Мне нужно применить некоторые ограничения к группе представлений в ConstraintLayout
. Я хочу сгруппировать эти виды и продолжить редактирование, пока дизайнер макетов в студии Android рассматривает их как единый вид. Есть ли способ сделать это без фактического наложения видов на ViewGroup
(другой макет)? Если такая обертка необходима, может быть, есть макет обертки, который поставляется с ConstraintLayout
и позволяет группировать объекты без создания тяжелых макетов, таких как RelativeLayout
?
Групповые представления в ConstraintLayout обрабатывают их как единое представление
Ответ 1
Цепочки ConstraintLayout
Разработчики Android недавно выпустили новую версию ConstraintLayout
(1.0.2 на сегодняшний день). Эта версия содержит новую важную функцию - Цепи, которая позволяет группировать представления в ConstraintLayout
.
Цепочки обеспечивают групповое поведение на одной оси (по горизонтали или вертикали).
Набор виджетов считается цепочкой, если они связаны друг с другом через двунаправленное соединение
После создания цепочки есть две возможности:
- Распределите элементы в доступном пространстве
- Цепочка также может быть "упакована", в этом случае элементы сгруппированы вместе
В настоящее время для использования этой функции необходимо использовать следующую зависимость gradle (поскольку это альфа-версия):
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha9'
Здесь вы можете найти новейшую версию ConstraintLayout
для использования в ваших проектах.
До Android Studio 2.3 дизайнер пользовательского интерфейса Android Studio не поддерживал создание цепочек, поскольку в него нельзя было добавлять двунаправленные ограничения. Решение состояло в том, чтобы создать эти ограничения в XML вручную, как упомянуто TranslucentCloud. В Android Studio 2.3 (в настоящее время только на канальном канале) цепочки поддерживаются и в редакторе пользовательского интерфейса (GoRoS упоминается в комментариях).
Пример
Ниже приведен пример того, как расположить два вида вместе в середине экрана, используя цепочки ConstraintLayout
и chains:
<?xml version="1.0" encoding="utf-8"?>
<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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintVertical_chainPacked="true"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"/>
</android.support.constraint.ConstraintLayout>
Обновление (январь 2018 года) @Mateus Gondim
В последних версиях вы должны использовать app:layout_constraintVertical_chainStyle="packed"
вместо app:layout_constraintVertical_chainPacked="true"
Ответ 2
Вы можете использовать
android.support.constraint.Guideline
группировать элементы вместе.
Добавьте руководство (вертикальное или горизонтальное), а затем используйте его как привязку для других представлений. Вот простой пример горизонтального центрирования двух сгруппированных текстовых просмотров: (показ дизайна в AS)
<?xml version="1.0" encoding="utf-8"?>
<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="56dp"
android:background="@android:color/white"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="@+id/top_text"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@android:color/holo_red_light"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
android:text="Above"
tools:text="Above" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/bottom_text"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@android:color/holo_blue_bright"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="@+id/guideline"
android:text="Below"
tools:text="Below" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Right vertically centered"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Right vertically centered"/>
</ConstraintLayout>
Ответ 3
Я просто хочу добавить графику к большому принятому ответу. Это очень просто:
В представлении макета> выберите все виды, которые вы хотите сгруппировать> щелкните их правой кнопкой мыши> Цепочки> Создать горизонтальную цепочку:
Центрировать их также просто:
Выберите представление head группы> Упорядочить> Упаковать по горизонтали> установите начальное ограничение первого вида и конечное ограничение последнего вида для их родителя: