如何实现ConstraintLayout Flow包裹子View、子View填充剩余空间且不超父90%宽度？

需求说明 #

需要Flow组件满足以下所有布局要求：

• 外层Flow组件宽度由最宽的子View决定，实现包裹效果；
• Flow组件宽度不能超过父布局的90%，内部子View需遵守Flow的内边距，宽度小于Flow；
• 内部子View自适应自身内容宽度，不能硬编码宽度；
• 宽度小于最宽子View的内部子View，需填充Flow内的剩余空间（遵守内边距）。

伪代码逻辑：

flow_widget.width = longest_child.width
contained_view.width = min( contained_view.contents.width, flow_widget.width )

我的尝试代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".TestFragment">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/centerControls"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:constraint_referenced_ids="textView,editText,button"
        app:flow_verticalGap="5dp"
        app:flow_wrapMode="none"
        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        
        app:layout_constrainedWidth_max="wrap"

        android:background="@color/green"
        
        app:layout_constraintWidth_percent="0.9"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a text view"
        />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am an edit view"
        android:hint="I am a hint"
        />
    
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a button"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

当前问题：Flow组件虽遵守90%宽度限制，但未实现包裹子View的效果，绿色背景区域过宽，未能贴合最宽子View的宽度。

解决方案 #

可以通过Flow组件实现需求，核心是调整Flow的宽度约束和子View的布局属性，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    tools:context=".TestFragment">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/centerControls"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:constraint_referenced_ids="textView,editText,button"
        app:flow_verticalGap="5dp"
        app:flow_wrapMode="none"
        app:flow_horizontalStyle="spread"
        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        
        app:layout_constrainedWidth="true"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.9"
        
        android:background="@color/green" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a text view"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintWidth_max="wrap" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am an edit view"
        android:hint="I am a hint"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintWidth_max="wrap" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="I am a button"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintWidth_max="wrap" />

</androidx.constraintlayout.widget.ConstraintLayout>

关键调整说明 #

1. Flow组件宽度设置：

   • 将android:layout_width改为wrap_content，让Flow优先包裹最宽子View；
   • 添加app:layout_constrainedWidth="true"，配合layout_constraintWidth_percent="0.9"实现宽度不超过父布局90%的限制；
   • 保留app:layout_constraintWidth_max="wrap"确保Flow宽度不会超过最宽子View的尺寸（当最宽子View小于父布局90%时）。

2. Flow布局样式：

   • 设置app:flow_horizontalStyle="spread"，让子View在Flow的宽度范围内填充剩余空间，满足“窄子View填充剩余空间”的需求。

3. 子View属性调整：

   • 子View保持android:layout_width="0dp"，同时添加app:layout_constraintWidth_default="wrap"和app:layout_constraintWidth_max="wrap"，确保子View先自适应内容宽度，同时不超过Flow的宽度限制，当Flow宽度由最宽子View决定时，窄子View会自动拉伸填充Flow的宽度。

这样调整后，Flow会优先包裹最宽子View，同时不超过父布局90%宽度；内部子View自适应内容，窄子View会填充Flow内的剩余空间，完全符合需求。

内容的提问来源于stack exchange，提问作者Mikey A. Leonetti