ConstraintLayout中TextView前放两个ImageView 多行出现多余空白如何解决？

问题原因 #

你当前的布局存在两个核心问题：

• 两个ImageView上添加的app:layout_constraintXXX属性属于ConstraintLayout的专属属性，在LinearLayoutCompat父容器下完全不生效，属于冗余代码。
• 横向LinearLayout中的TextView使用wrap_content作为宽度，当文字长度超过可用宽度时，不会主动限制宽度换行，最终导致布局出现多余空白或内容溢出。

修复方案 #

调整布局参数如下：

1. 删掉两个ImageView上冗余的ConstraintLayout相关属性
2. 给TextView设置android:layout_width="0dp" + android:layout_weight="1"，让TextView自动占满图标后的剩余横向空间，超出宽度自动换行
3. 给外层LinearLayoutCompat添加android:gravity="center_vertical"，保证图标和TextView始终垂直居中对齐
4. 如果不需要文字居中显示，可删掉TextView的android:textAlignment="center"属性，避免视觉上的空白间隙

可选优化：如果想减少布局层级，可以去掉外层的LinearLayoutCompat，直接用ConstraintLayout约束三个控件：两个ImageView依次从左到右排列，TextView的start约束到第二个ImageView的end，end约束到父布局的end，top和两个ImageView对齐即可，效果完全一致。

修复后完整代码 #

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/title_holder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dp16"
        android:layout_marginTop="@dimen/dp18"
        android:layout_marginEnd="@dimen/dp16"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/som_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp8"
            android:src="@drawable/ic_info_icon" />

        <ImageView
            android:id="@+id/hand_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/dp8"
            android:src="@drawable/ic_hand" />

        <TextView
            android:id="@+id/name_details"
            style="@style/sharp_sans_semi_bold_20"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:text="Mynameis RachelKaren " />
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.constraintlayout.widget.ConstraintLayout>

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