Подтвердить что ты не робот

Групповые представления в ConstraintLayout обрабатывают их как единое представление

Мне нужно применить некоторые ограничения к группе представлений в ConstraintLayout. Я хочу сгруппировать эти виды и продолжить редактирование, пока дизайнер макетов в студии Android рассматривает их как единый вид. Есть ли способ сделать это без фактического наложения видов на ViewGroup (другой макет)? Если такая обертка необходима, может быть, есть макет обертки, который поставляется с ConstraintLayout и позволяет группировать объекты без создания тяжелых макетов, таких как RelativeLayout?

4b9b3361

Ответ 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

Я просто хочу добавить графику к большому принятому ответу. Это очень просто:

В представлении макета> выберите все виды, которые вы хотите сгруппировать> щелкните их правой кнопкой мыши> Цепочки> Создать горизонтальную цепочку: enter image description here

Центрировать их также просто:

Выберите представление head группы> Упорядочить> Упаковать по горизонтали> установите начальное ограничение первого вида и конечное ограничение последнего вида для их родителя: enter image description here