如何使用给定的 XML 代码将文本移动到圆圈下方？

Question

我正在使用下面的 XML 代码和 RecyclerView 但我得到的是卡片内部和上侧的文字但我想看看圆圈下面的文字，应该做哪些更改我输入以下 XML 代码?

参考图像由当前和期望输出图像组成，如

<?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="200dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="5dp">
    <!--
    grid items for RecyclerView
    -->
    <androidx.cardview.widget.CardView
        android:id="@+id/myCardView"
        android:layout_width="110dp"
        android:layout_height="110dp"
        app:cardCornerRadius="50dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="ABCD"
        android:textSize="20sp"
        android:textColor="#fff" />
    </androidx.cardview.widget.CardView>
</RelativeLayout>

Answer 1

CardView 只能接受 1 个直接子级，因此您需要用另一个 ViewGroup 包裹您的视图，如下所示：

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="200dp"
    android:padding="5dp">
    <!--
    grid items for RecyclerView
    -->
    <androidx.cardview.widget.CardView
        android:id="@+id/myCardView"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        app:cardCornerRadius="50dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image"
                android:layout_centerHorizontal="true"
                android:text="ABCD"
                android:textColor="#000"
                android:textSize="20sp" />
        </RelativeLayout>

    </androidx.cardview.widget.CardView>
</RelativeLayout>

然后您可以根据需要调整视图的引力。

Answer 2

您可以从 CardView 中取出 TextView 以使 ImageView 完全占据圆角 CardView

的整个区域

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="200dp"
    android:gravity="center"
    android:padding="5dp">
    <!--
    grid items for RecyclerView
    -->
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/myCardView"
        android:layout_centerHorizontal="true"
        android:textColor="#fff"
        android:text="ABCD"
        android:textSize="20sp" />

    <androidx.cardview.widget.CardView
        android:id="@+id/myCardView"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_centerHorizontal="true"
        app:cardCornerRadius="50dp">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher" />
    </androidx.cardview.widget.CardView>


</RelativeLayout>

预览

Answer 3

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="200dp"
    android:gravity="center"
    android:padding="5dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/myCardView"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_centerInParent="true"
        app:cardCornerRadius="60dp">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher" />

    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/myCardView"
        android:layout_marginTop="0dp"
        android:text="ABCD"
        android:textAlignment="center"
        android:textSize="20sp" />

</RelativeLayout>

如何使用给定的 XML 代码将文本移动到圆圈下方？

How to shift text below the circle using given XML code?

xml

android

android-layout

android-cardview