【问题标题】:Constraint Flow widget ignores max width attributes约束流小部件忽略最大宽度属性
【发布时间】:2022-04-21 03:23:54
【问题描述】:

我有多个布局,我想根据屏幕大小在不同的位置显示。如果屏幕足够宽(平板电脑),我希望布局水平显示然后换行到下一行。如果屏幕很窄(手机),我希望布局垂直堆叠。

当我提供固定的 layout_width 时,约束流小部件可以正常工作。

我想将子容器的布局更改为动态的……达到一个限制。将容器的内容散开仅在一定程度上有用。基本上,当在手机上显示时,我希望容器的大小适应屏幕大小。在平板电脑或大型手机/肖像上显示时,请限制宽度,以免占用整个屏幕。

为了实现这一点,我设置了 android:layout_width="match_parent" 和 app:layout_constraintWidth_max="350dp"。该行为在其他布局容器中正常工作,但不适用于 Flow 小部件的约束。 Flow 小部件忽略最大宽度属性并依赖于 layout_width。第二个布局容器被推离屏幕右侧。当鼠标悬停在第二个布局上时,可以在 Android Studio 中看到第二个布局的轮廓。

如何实现动态布局大小和位置的目标?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/layoutOne"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_dark"
            android:maxWidth="350dp"
            android:minHeight="490dp"
            app:layout_constraintWidth_max="350dp" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layoutTwo"
            android:layout_width="350dp"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_purple"
            android:minHeight="490dp" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layoutThree"
            android:layout_width="350dp"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark"
            android:minHeight="490dp" />

        <androidx.appcompat.widget.LinearLayoutCompat
            android:id="@+id/layoutFour"
            android:layout_width="350dp"
            android:layout_height="wrap_content"
            android:background="@android:color/black"
            android:minHeight="490dp" />

        <androidx.constraintlayout.helper.widget.Flow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:constraint_referenced_ids="layoutOne,layoutTwo,layoutThree,layoutFour"
            app:flow_horizontalStyle="packed"
            app:flow_verticalAlign="top"
            app:flow_wrapMode="chain"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

【问题讨论】:

    标签: android layout android-constraintlayout constraint-layout-chains


    【解决方案1】:

    我就是这样解决的。在 onCreate() 中,读取最初在 XML 中设置的宽度值。如果布局宽度超过屏幕宽度,则布局宽度设置为屏幕宽度。
    我尝试以编程方式设置 matchConstraintMaxWidth,但它不起作用。布局不流动/换行。

    DisplayMetrics displayMetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    ConstraintLayout.LayoutParams layoutParams = (ConstraintLayout.LayoutParams)myConstraintLayout.getLayoutParams();
    if(displayMetrics.widthPixels < (int) layoutParams.width )
        layoutParams.width = displayMetrics.widthPixels;
    myConstraintLayout.setLayoutParams(layoutParams);
    

    【讨论】: