ConstraintLayout使用Flow布局时如何设置TextView横向70%、30%占比

问题原因 #

• 你同时为三个子控件配置了独立的ConstraintLayout约束、又将它们加入Flow控件管理，Flow会默认覆盖子控件原有约束，两套规则冲突导致权重属性不生效
• Flow的flow_horizontalStyle设为spread_inside不符合权重分配的要求，需要调整为spread才能让权重规则生效

修复步骤 #

1. 删掉indicator、tv_left、tv_right三个子控件上所有的layout_constraintxxx约束属性，交由Flow统一管理布局
2. 给tv_left添加app:layout_constraintHorizontal_weight="7"，给tv_right添加app:layout_constraintHorizontal_weight="3"
3. 调整Flow的间距、边距属性，替代原来子控件单独配置的边距，避免布局错乱

修改后的完整代码 #

<androidx.constraintlayout.widget.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="wrap_content"
    android:paddingTop="14dp"
    android:paddingEnd="16dp"
    android:paddingBottom="14dp">

    <ImageView
        android:id="@+id/indicator"
        android:layout_width="8dp"
        android:layout_height="8dp"
        tools:src="@drawable/ic_bullet_point_yellow" />

    <TextView
        android:id="@+id/tv_left"
        style="@style/Tesco__Theme.Text.T3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="@color/tesco__dove_gray"
        app:layout_constraintHorizontal_weight="7"
        tools:text="asdasdsasddsadsadsadsaddasewere ewr" />

    <TextView
        android:id="@+id/tv_right"
        style="@style/Tesco__Theme.Text.H6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="end|center_horizontal"
        app:layout_constraintHorizontal_weight="3"
        tools:text="sadsadsdsaasdasdassadsadasZ" />

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:orientation="horizontal"
        app:constraint_referenced_ids="indicator,tv_left,tv_right"
        app:flow_horizontalGap="16dp"
        app:flow_horizontalStyle="spread"
        app:flow_verticalAlign="center"
        app:flow_wrapMode="chain"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

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