android ConstraintLayout 流程 : align items from right to left

Question

我正在使用 android ConstraintLayout Flow，我必须从右到左排列项目，如下所示:

XML 代码:

<androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/flow"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:flow_horizontalStyle="spread_inside"
            app:flow_maxElementsWrap="4"
            app:flow_verticalGap="29dp"
            app:flow_wrapMode="aligned"
            app:constraint_referenced_ids="item1 , item2 , ..."
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/headerTextView" />

注意:我们的 supportsRtl 在 Manifest 中设置了 False ...

我该怎么做？!

Answer 1

有一种解决方法，可以通过使用 android:rotationY="180" 在 Y 方向上旋转 ConstraintLayout 将项目从右到左添加到流中

>

这将反转整个布局，包括流程中的每个单独元素；因此，在下面的演示中，您会看到颠倒的文本，例如:

要解决这个问题，我们必须对每个单独的元素执行反向操作。这需要一个 ViewGroup，因此这里每个单独的元素都包装在一个 FrameLayout 中用于此目的。

演示:

<?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="wrap_content"
    android:rotationY="180">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:constraint_referenced_ids="button1, button2, button3, button4, button5, button6, button7, button8, button9"
        app:flow_horizontalGap="8dp"
        app:flow_maxElementsWrap="3"
        app:flow_verticalBias="1"
        app:flow_verticalGap="8dp"
        app:flow_verticalStyle="packed"
        app:flow_wrapMode="chain"
        tools:ignore="MissingConstraints" />


    <FrameLayout
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="1"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="2"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="3"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="4"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="5"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="6"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="7"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="8"
            android:textSize="18sp" />
    </FrameLayout>


    <FrameLayout
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:rotationY="180"
        tools:ignore="MissingConstraints">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_light"
            android:text="9"
            android:textSize="18sp" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>