Пример помощника потока ConstraintLayout - PullRequest
Новая
       21

Пример помощника потока ConstraintLayout

0 голосов
/ 25 февраля 2019

Я прочитал в записи блога , что в ConstraintLayout 2.0.0 был представлен способ создания потока просмотров.Чего я точно хочу достичь: у меня есть несколько TextView с фиксированным размером рядом друг с другом.В зависимости от размера экрана, некоторые TextView s должны быть вставлены в следующую строку.

Пример на большом экране с шестью TextViews:

[AAA] [BBB] [CCC] [DDD]

[EEE] [FFF]

Пример на маленьком экране с шестью TextViews:

[AAA] [BBB]

[CCC] [DDD]

[EEE] [FFF]

Я уже видел этот Stackoverflow вопрос, предлагающий использовать FlexboxLayout, но есть комментарий о том, чтото же самое теперь можно сделать с помощью ConstraintLayout.

Кто-нибудь может дать мне пример того, как добиться желаемого поведения с помощью ConstraintLayout?Я не смог найти никаких инструкций по этому поводу.Заранее спасибо.

1 Ответ

0 голосов
/ 13 мая 2019

Этого можно добиться, добавив androidx.constraintlayout.helper.widget.Flow виртуальное представление внутри androidx.constraintlayout.widget.ConstraintLayout и сославшись на все ваши текстовые просмотры с атрибутом app:constraint_referenced_ids.

Пример ниже показывает, как я этого достиг. 

<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"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[AAAAAAAA]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[BBBBBBBB]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[CCCCCCCC]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[DDDDDDDD]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[EEEEEEEE]"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/text6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[FFFFFFFF]"
        tools:ignore="MissingConstraints" />

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:constraint_referenced_ids="text1,text2,text3,text4,text5,text6"
        app:flow_horizontalBias="0"
        app:flow_horizontalGap="10dp"
        app:flow_horizontalStyle="packed"
        app:flow_verticalBias="0"
        app:flow_wrapMode="chain"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Поиграйте с атрибутами app:flow_, чтобы изменить расположение текстовых представлений, таких как выравнивание, поля и т. Д.

Окончательный результат должен выглядеть примерно так, как показано ниже.

Result

...