我想根据屏幕大小在不同位置显示多个布局。如果屏幕足够宽(平板电脑),我希望布局水平显示,然后折叠到下一行。如果屏幕很窄(手机),我希望布局垂直堆叠。
当我提供固定的 layout_width 时,Constraint Flow 小部件可以正常工作。
我想将子容器的布局更改为动态的……达到一个限制。分散容器的内容仅在一定程度上有用。基本上,当在手机上显示时,我希望容器的大小适应屏幕大小。在平板电脑或大型手机/肖像上显示时,请限制宽度,以免占用整个屏幕。
为了实现这一点,我设置了 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>