Android RecyclerView Item中TextView位置偏移问题求助

看起来你遇到的问题根源是RelativeLayout中布局约束冲突，导致ImageView显示时挤压了文本区域的空间，让第二个TextView被挤到了ImageView下方。具体来说：

1. 原布局中，承载ImageView的layout_deportes设置了layout_alignTop="@id/txtUsername"，但没有明确它在文本框的右侧，导致它会和文本框抢占同一水平空间——当ImageView显示时，这个LinearLayout的宽度变大，直接挤压txtUsername的可用宽度，进而让txtDate（设置了layout_below="@id/txtUsername"）被挤到ImageView的下方。
2. 另外，txtDate的layout_width="match_parent"在RelativeLayout中会试图填充从头像到父布局右侧的所有空间，但右边有ImageView区域，这就造成了布局计算的冲突，加剧了显示异常。

下面给你两种修复方案，你可以根据自己的习惯选择：

方案一：改用LinearLayout作为根布局（推荐，更简洁易维护） #

把根布局改成水平LinearLayout，将头像、文本区域、ImageView区域分成三个独立的部分，彻底避免布局冲突：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp">

    <!-- 圆形头像 -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:background="@color/colorWhite"
        android:src="@drawable/ic_account_circle_black_24dp"
        card_view:civ_border_color="#FF000000"
        card_view:civ_border_width="2dp" />

    <!-- 文本区域：垂直排列两个TextView，确保txtDate始终在txtUsername下方 -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginLeft="5dp">

        <TextView
            android:id="@+id/txtUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp"
            android:text="Sample"
            android:textColor="@color/grey_700"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textSize="10sp" />
    </LinearLayout>

    <!-- 动态ImageView区域：垂直排列两行ImageView -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="20dp">

        <LinearLayout
            android:id="@+id/layout_deportes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="3dp">

            <ImageView
                android:id="@+id/sp1"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp2"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp3"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp4"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_deportes2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="3dp">

            <ImageView
                android:id="@+id/sp5"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp6"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp7"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <ImageView
                android:id="@+id/sp8"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

方案优势： #

• 布局结构清晰，各区域职责明确，不会出现RelativeLayout的约束冲突问题。
• 文本区域用垂直LinearLayout包裹，确保txtDate永远在txtUsername正下方，不受其他控件影响。
• ImageView区域独立在最右侧，宽度自适应，不会抢占文本区域的空间。

方案二：修复原RelativeLayout的约束 #

如果你坚持使用RelativeLayout，可以通过明确控件的相对位置来解决问题：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:background="@color/colorWhite"
        android:src="@drawable/ic_account_circle_black_24dp"
        card_view:civ_border_color="#FF000000"
        card_view:civ_border_width="2dp" />

    <!-- 用垂直LinearLayout包裹文本控件，确保两个TextView的相对位置 -->
    <LinearLayout
        android:id="@+id/layout_text_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/profile_image"
        android:layout_marginLeft="5dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txtUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp"
            android:text="Sample"
            android:textColor="@color/grey_700"
            android:textSize="20dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/txtDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textSize="10sp" />
    </LinearLayout>

    <!-- 让ImageView区域明确在文本容器的右侧，避免挤压文本空间 -->
    <LinearLayout
        android:id="@+id/layout_sports_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/layout_text_container"
        android:layout_alignTop="@id/layout_text_container"
        android:layout_marginLeft="20dp"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/layout_deportes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="3dp">

            <!-- sp1-sp4 代码和原布局一致 -->
            <ImageView
                android:id="@+id/sp1"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <!-- 省略其他三个ImageView代码 -->
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_deportes2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="3dp">

            <!-- sp5-sp8 代码和原布局一致 -->
            <ImageView
                android:id="@+id/sp5"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_marginRight="5dp"
                android:background="@drawable/circle"
                android:visibility="visible"
                card_view:srcCompat="@drawable/skate" />
            <!-- 省略其他三个ImageView代码 -->
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

核心修改点： #

• 将两个TextView包裹在垂直LinearLayout中，确保它们的相对位置不受外部控件影响。
• 让ImageView区域的根LinearLayout设置layout_toRightOf="@id/layout_text_container"，明确它在文本区域的右侧，不会挤压文本空间。

内容的提问来源于stack exchange，提问作者mvasco