TextView置于ImageView前方消失问题及布局选型咨询

嘿，我来帮你拆解下TextView消失的原因，以及布局方案的最优选择～

一、TextView消失的核心原因 #

从你贴的代码来看，主要有这几个问题：

• 错误使用跨布局属性：你在RelativeLayout的子View里用了app:layout_constraintXXX系列属性，这些是ConstraintLayout专属的约束，在RelativeLayout里完全不生效，导致TextView的位置约束失效，要么跑到奇怪的地方，要么被ImageView遮挡。
• 布局层级混乱：你把TextView和多个ImageView直接平级放在同一个RelativeLayout里，ImageView尺寸很大（259dp宽、390dp高），后续添加的ImageView会覆盖在TextView上方，直接把文字挡住了。
• HorizontalScrollView子布局宽度错误：RelativeLayout设置了layout_width="match_parent"，但HorizontalScrollView需要子布局宽度足够容纳所有卡片（比如wrap_content或者手动计算总宽度），否则多个ImageView会挤压在一起，进一步导致TextView的空间被挤占。

二、RelativeLayout是不是最优方案？ #

答案是不是。因为你的需求是多个独立的“图片+文字”卡片横向滚动，每个卡片是一个独立单元，更推荐的方案是：

1. 给每个卡片单独创建一个Item布局（比如用FrameLayout或ConstraintLayout，用来承载ImageView和TextView）；
2. 在HorizontalScrollView内部用LinearLayout（横向）来排列这些卡片，结构更清晰，维护性更强。

三、修改后的代码示例 #

1. 单独的卡片Item布局（item_country_card.xml） #

这个布局负责单个国家的图片和文字排版，确保TextView在ImageView左下角：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="259dp"
    android:layout_height="390dp"
    android:layout_marginEnd="30dp">

    <!-- 国家图片 -->
    <ImageView
        android:id="@+id/img_country"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <!-- 国家名称TextView，固定在左下角 -->
    <TextView
        android:id="@+id/txt_country_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="16dp"
        android:textColor="#FFFFFF"
        android:textSize="24sp" />
</FrameLayout>

2. 主布局修改 #

把原来的RelativeLayout换成横向LinearLayout，用来加载多个卡片：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite">

    <TextView
        android:id="@+id/txtTitleHome3"
        android:layout_width="wrap_content"
        android:layout_height="31dp"
        android:text="@string/ExploreTitulo"
        android:textColor="#323B45"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintMarginStart="32dp"
        app:layout_constraintMarginTop="59dp" />

    <TextView
        android:id="@+id/txtDescHome3"
        android:layout_width="278dp"
        android:layout_height="26dp"
        android:text="@string/sloganHome"
        android:textColor="#323B45"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="@+id/txtTitleHome3"
        app:layout_constraintTop_toBottomOf="@+id/txtTitleHome3"
        app:layout_constraintMarginTop="8dp" />

    <HorizontalScrollView
        android:id="@+id/scrlVPrincipal2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintTop_toBottomOf="@+id/txtDescHome3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintMarginTop="32dp">

        <!-- 横向LinearLayout用来排列所有卡片 -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingStart="32dp"
            android:paddingEnd="32dp">

            <!-- 第一个国家卡片 -->
            <include layout="@layout/item_country_card" />

            <!-- 第二个国家卡片 -->
            <include layout="@layout/item_country_card" />

            <!-- 第三个国家卡片 -->
            <include layout="@layout/item_country_card" />

        </LinearLayout>
    </HorizontalScrollView>

</android.support.constraint.ConstraintLayout>

四、额外优化建议 #

• 给TextView添加半透明背景（比如android:background="#80000000"），这样在亮色图片上文字也能清晰显示；
• 如果卡片数量较多，建议用RecyclerView配合HorizontalLayoutManager替代HorizontalScrollView，性能更好，也支持复用。

内容的提问来源于stack exchange，提问作者André Silva