Для чего используют Group, Guideline, Barriers, Chains в ConstraintLayout

Group

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

<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:text="TextView 1"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        app:layout_constraintStart_toStartOf="parent"
        android:text="TextView 2"/>

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="textView1,textView2"/>
</androidx.constraintlayout.widget.ConstraintLayout>

В этом примере можно скрыть или показать обе TextView, изменяя видимость Group.

Guideline

Guideline — это невидимый элемент, который используется для создания опорных линий, к которым можно привязывать другие виджеты. Существует три типа Guideline:

  • Вертикальные и горизонтальные линии.
  • Линии, задающие относительное положение (% от ширины или высоты родителя).
  • Линии с фиксированным отступом от одного из краев.
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_begin="100dp"
        android:orientation="horizontal"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:text="TextView above guideline"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        android:text="TextView below guideline"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Barrier

Barrier используется для создания динамических границ на основе размера одного или нескольких виджетов. Это полезно, когда вы хотите расположить элементы относительно границы, определенной изменяющимся содержимым.

<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Short text"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        android:text="A much longer text that will define the barrier"/>

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView1,textView2"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        android:text="Aligned to the barrier"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Chain

Chain позволяет создавать цепочки виджетов с определенными правилами распределения пространства между ними. Это мощный инструмент для создания сложных макетов.

Типы цепочек:

  • Spread (по умолчанию): равномерное распределение пространства между элементами.

  • Spread Inside: равномерное распределение пространства между элементами, но без распределения на краях.

  • Packed: элементы сжаты вместе.

    <androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">
    
      <TextView
          android:id="@+id/textView1"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintEnd_toStartOf="@+id/textView2"
          android:text="Item 1"/>
    
      <TextView
          android:id="@+id/textView2"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          app:layout_constraintStart_toEndOf="@+id/textView1"
          app:layout_constraintEnd_toStartOf="@+id/textView3"
          android:text="Item 2"/>
    
      <TextView
          android:id="@+id/textView3"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          app:layout_constraintStart_toEndOf="@+id/textView2"
          app:layout_constraintEnd_toEndOf="parent"
          android:text="Item 3"/>
    

</androidx.constraintlayout.widget.ConstraintLayout>


Для использования цепочек в коде выше, убедитесь, что вы установили подходящие атрибуты цепочки в `ConstraintSet` или в XML-файле, как показано ниже:

```kotlin
app:layout_constraintHorizontal_chainStyle="spread"