android - 从下到上和从右到左排列 ConstraintLayout 流引用

Question

我需要从下到上和从右到左填充 ConstraintLayout Flow View 。这是我的代码:

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/flow"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:constraint_referenced_ids="tv1,tv2,tv3,tv4,tv5,tv6,tv7,tv8,tv9,tv10"
    app:flow_horizontalGap="8dp"
    app:flow_verticalGap="8dp"
    app:flow_verticalStyle="packed"
    app:flow_wrapMode="chain"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

这是结果:

(事实上，由于 API 响应，我将动态设置引用，因此假设 View 不在 XML 布局中)

但我需要下面的:

感谢任何帮助。

Answer 1

要从下到上和从右到左排列项目，您可以使用 FlexboxLayout Google Library .您只需要在 FlexboxLayout 中使用以下属性:

1. app:flexDirection="column_reverse" 这将从下到上绘制每个项目。

2. app:flexWrap="wrap_reverse" 这将从右到左绘制每个项目。

3. app:justifyContent="flex_start" 这将控制每个项目的对齐方式，我们使用 flex_start 从底部对齐它。

Xml 示例如下:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView 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">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexLayout"
        android:layout_width="wrap_content"
        android:layout_height="300dp"
        app:flexDirection="column_reverse"
        app:flexWrap="wrap_reverse"
        app:justifyContent="flex_start"
        android:background="@android:color/white">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="2"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="3"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="4"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv5"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="5"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv6"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="6"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv7"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="7"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv8"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="8"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv9"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="9"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/tv10"
            android:layout_width="120dp"
            android:layout_height="65dp"
            android:background="@android:color/holo_orange_dark"
            android:gravity="center"
            android:layout_margin="5dp"
            android:text="10"
            android:textSize="18sp" />

    </com.google.android.flexbox.FlexboxLayout>

</HorizontalScrollView>

或以编程方式:

val flexLayout: FlexboxLayout = findViewById<FlexboxLayout>(R.id.flexLayout)
val itemWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120f, resources.displayMetrics).toInt()
val itemHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 65f, resources.displayMetrics).toInt()
val itemMargin = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5f, resources.displayMetrics).toInt()

for (i in 0..9) {
    val tv = TextView(this)
    tv.text = (i + 1).toString()
    tv.setBackgroundColor(ContextCompat.getColor(this, android.R.color.holo_orange_dark))
    tv.gravity = Gravity.CENTER
    val params = FlexboxLayout.LayoutParams(itemWidth, itemHeight)
    params.setMargins(itemMargin, itemMargin, itemMargin, itemMargin)
    tv.layoutParams = params
    flexLayout.addView(tv)
}

结果: