Равномерные интервальные представления с использованием ConstraintLayout

Обычным использованием LinearLayout является равномерное пространственное (весовое) представление, например: Пример макета

Как вы реализуете равномерно распределенные виды, подобные этому, используя новый ConstraintLayout ?

Ссылки на ConstraintLayout для справки: запись в блоге , видео сеанса ввода-вывода

Solutions Collecting From Web of "Равномерные интервальные представления с использованием ConstraintLayout"

Есть два способа сделать это, используя ConstraintLayout : Цепи и рекомендации . Чтобы использовать Chains, убедитесь, что вы используете ConstraintLayout Beta 3 или новее, и если вы хотите использовать редактор визуальных макетов в Android Studio, убедитесь, что используете Android Studio 2.3 Beta 1 или новее.

Метод 1 – Использование цепей

Откройте редактор макетов и добавьте виджеты как обычно, добавив родительские ограничения по мере необходимости. В этом случае я добавил две кнопки с ограничениями в нижней части родительской и боковой стороны родителя (левая сторона для кнопки «Сохранить» и правая сторона для кнопки «Поделиться»):

Введите описание изображения здесь

Обратите внимание, что в этом состоянии, если я перехожу к пейзажному виду, представления не заполняют родителя, а привязаны к углам:

Введите описание изображения здесь

Выделите оба вида, нажав Ctrl / Cmd или перетащив поле вокруг представлений:

Введите описание изображения здесь

Затем щелкните правой кнопкой мыши по просмотрам и выберите «Центр по горизонтали»:

Введите описание изображения здесь

Это устанавливает двунаправленную связь между представлениями (как определяется цепочка). По умолчанию стиль цепи «распространяется», который применяется, даже если атрибут XML не включен. Придерживаясь этого стиля цепочки, но устанавливая ширину наших представлений на 0dp просматривать все доступные пространства, равномерно распределяя их по родительскому 0dp :

Введите описание изображения здесь

Это более заметно в ландшафтном представлении:

Введите описание изображения здесь

Если вы предпочитаете пропустить редактор макета, получившийся XML будет выглядеть так:

 <android.support.constraint.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"> <Button android:id="@+id/button_save" android:layout_width="0dp" android:layout_height="wrap_content" android:text="@string/button_save_text" android:layout_marginStart="8dp" android:layout_marginBottom="8dp" android:layout_marginEnd="4dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toLeftOf="@+id/button_share" app:layout_constraintHorizontal_chainStyle="spread" /> <Button android:id="@+id/button_share" android:layout_width="0dp" android:layout_height="wrap_content" android:text="@string/button_share_text" android:layout_marginStart="4dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintLeft_toRightOf="@+id/button_save" app:layout_constraintRight_toLeftOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </android.support.constraint.ConstraintLayout> 

Детали:

  • Установка ширины каждого элемента в 0dp или MATCH_CONSTRAINT позволяет представлениям заполнять родительский (необязательный)
  • Представления должны быть связаны друг с другом в двунаправленном порядке (справа от кнопки «Сохранить кнопки» для доступа к кнопке «Поделиться», слева от ссылок на кнопку «Поделиться», чтобы сохранить кнопку), это произойдет автоматически через редактор макета при выборе «Центр по горизонтали»,
  • Первый вид в цепочке может указывать стиль цепочки через layout_constraintHorizontal_chainStyle , см. Документацию по различным стилям цепи, если стиль цепочки опущен, по умолчанию «распространен»,
  • Взвешивание цепи можно настроить с помощью layout_constraintHorizontal_weight
  • Этот пример относится к горизонтальной цепочке, имеются соответствующие атрибуты для вертикальных цепей

Метод 2 – Использование руководства

Откройте макет в редакторе и нажмите кнопку руководства:

Введите описание изображения здесь

Затем выберите «Добавить вертикальный указатель»: Введите описание изображения здесь

Появится новое руководство, которое по умолчанию будет привязано слева в относительных значениях (обозначается левой стрелкой):

Относительный ориентир редактора компоновки

Нажмите стрелку слева, чтобы переключить ее на процентное значение, затем перетащите указатель на 50%:

Указатель формата редактора

Теперь руководство может использоваться как якорь для других видов. В моем примере я привязал право кнопки сохранения и левую часть кнопки совместного доступа к руководству:

Окончательный макет

Если вы хотите, чтобы представления заполнили доступное пространство, тогда ограничение должно быть установлено на «Любой размер» (круговые линии, выполняемые по горизонтали):

Ограничение любого размера

(Это то же самое, что установка layout_width в 0dp ).

Руководство также может быть создано в XML довольно легко, а не с помощью редактора макетов:

 <android.support.constraint.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/guideline" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" /> 

Хорошо, если это помогает кому-то

Ключ находится здесь app:layout_constraintHorizontal_weight="1" и
Самое лучшее в макете ограничения – это то, что он поддерживает круговую зависимость, и вот что я сделал, используя именно это.

Для первого ребенка
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Для второго ребенка

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

Вот полная демоверсия

 <android.support.design.widget.TextInputLayout android:id="@+id/textInputParent" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"> <EditText android:id="@+id/editTextParent" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/state" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/textInputFirstChild" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toBottomOf="@+id/textInputParent"> <EditText android:id="@+id/editTextChildOne" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/pin_code" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/textInputSecondChild" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintHorizontal_weight="1" app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@+id/textInputParent"> <EditText android:id="@+id/editTextChildSecond" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/country" /> </android.support.design.widget.TextInputLayout>