如何在 CardView 的底部显示 ImageView

Question

与 xml 斗争。我想在 CardView 的底部显示 RoundedCornerImageView。很难实施。

这是我想要布局的快照

这是 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

将 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 2

您可以使用 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 3

这应该适合你：

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 4

将你的 imageview 放在 RelativeLayout 中，并在另一个相对布局中将 margintop 作为负值（-20dp）和 cardview。把这两个相对布局放在一个相对布局里面：

<RLMain>

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

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

</RLMain>

Answer 5

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 6

将卡片视图单独放在相对布局中，然后使用线性布局作为图像和相对布局的父级，并使用负边距 :) 试试这个：

  <FrameLayout 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="wrap_content">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <RelativeLayout
        android:layout_width="wrap_content"
        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"
            app:cardBackgroundColor="@color/colorAccent">

            <LinearLayout
                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" />
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginTop="-50dp"
        android:paddingTop="20dp"
        app:srcCompat="@drawable/service_flag" />
</LinearLayout>

Answer 7

我通过在 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

How to show ImageView over the bottom of CardView

xml

android

android-imageview