Question

使用xml苦苦挣扎。我想在RoundedCornerImageView的底部显示CardView。很难实现它。

以下是我希望布局看起来像

的快照

到目前为止，我已经尝试了xml。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card"
        android:orientation="vertical">
        <LinearLayout
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <TextView
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is Title"
            android:textSize="24sp"
            android:textColor="#000"/>
        <TextView
            android:padding="5dp"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#c5c5c5"
            android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <com.softoven.ultron.util.RoundedImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/avatar"
        android:paddingTop="20dp"
        android:layout_gravity="bottom|center_horizontal"/>
</FrameLayout>

Answer 1

这应该适合你：

1）以RelativeLayout作为根视图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/container">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:id="@+id/card"
            android:orientation="vertical">
            <LinearLayout
                android:layout_margin="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <TextView
                    android:padding="5dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="This is Title"
                    android:textSize="24sp"
                    android:textColor="#000"/>
                <TextView
                    android:padding="5dp"
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#c5c5c5"
                    android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </LinearLayout>

    <com.softoven.ultron.util.RoundedImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/avatar"
        android:paddingTop="20dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-40dp"
        android:layout_below="@+id/container" />

</RelativeLayout>

2）以LinearLayout作为根视图：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/container">

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:id="@+id/card"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_margin="10dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                        <TextView
                            android:padding="5dp"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="This is Title"
                            android:textSize="24sp"
                            android:textColor="#000"/>
                        <TextView
                            android:padding="5dp"
                            android:layout_marginTop="10dp"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:textColor="#c5c5c5"
                            android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
                    </LinearLayout>
                </android.support.v7.widget.CardView>
            </LinearLayout>

            <com.softoven.ultron.util.RoundedImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:src="@drawable/avatar"
                android:paddingTop="20dp"
                android:layout_marginTop="-40dp"
                android:layout_gravity="center_horizontal" />

</LinearLayout>

Answer 2

Use **android:elevation** attribute to show imageview over cardview.

<?xml version="1.0" encoding="utf-8"?>
<com.softoven.ultron.util.RoundedImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:src="@drawable/avatar"
    android:paddingTop="20dp"
    **android:elevation = "5dp"**
    android:layout_gravity="bottom|center_horizontal"/>

Answer 3

您可以使用RelativeLayout代替FrameLayout来实现所需的行为。请使用以下代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/card"
        android:orientation="vertical">
        <LinearLayout
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <TextView
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is Title"
            android:textSize="24sp"
            android:textColor="#000"/>
        <TextView
            android:padding="5dp"
            android:layout_marginTop="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#c5c5c5"
            android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <com.softoven.ultron.util.RoundedImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/avatar"
        android:paddingTop="20dp"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@id/card"/>

看看这对你有帮助。

Answer 4

将LinearLayout更改为RelativeLayout并将ImageView放在CardView上

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="This is Title"
                android:textColor="#000"
                android:textSize="24sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:padding="5dp"
                android:text="This is content.This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content"
                android:textColor="#c5c5c5" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_alignParentBottom="true"
                android:paddingTop="20dp"
                android:src="@drawable/ic_menu_share" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

</FrameLayout>

Answer 5

将imageview置于RelativeLayout内，并将margintop作为负值（-20dp），将cardview置于另一个相对布局中。将这两个相对布局放在相对布局中：

<RLMain>

<RL1>
 <CV></CV>
</RL1>

<RL2>
<IV></IV>(give margintop in -ve value (-20dp))
</RL2>

</RLMain>

Answer 6

我通过在 Constraintlayout 中给出高度来解决。 android:elevation 属性允许您更改 z 轴。

<块引用>

https://developer.android.com/training/material/shadows-clipping

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="300dp">

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:elevation="3dp"
    android:src="@color/purple_500"
    app:layout_constraintBottom_toBottomOf="@id/card_editor_shop"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/card_editor_shop" />

<androidx.cardview.widget.CardView
    android:id="@+id/card_editor_shop"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:cardBackgroundColor="@color/black"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

如何在CardView底部显示ImageView

6 个答案: