Различия между ConstraintLayout и RelativeLayout

Цель ConstraintLayout - оптимизировать и сгладить иерархию представлений ваших макетов, применяя некоторые правила к каждому представлению, чтобы избежать вложенности.

Правила напоминают вам RelativeLayout, например, устанавливая левый левый угол какого-либо другого вида.

app:layout_constraintBottom_toBottomOf="@+id/view1"

В отличие от RelativeLayout, ConstraintLayout предлагает значение bias, которое используется для позиционирования вида с учетом горизонтального и вертикального смещения 0% и 100% относительно маркеров (отмеченных кружком). Эти проценты (и дроби) обеспечивают плавное позиционирование изображения на экранах разной плотности и размера.

app:layout_constraintHorizontal_bias="0.33" <!-- from 0.0 to 1.0 -->
app:layout_constraintVertical_bias="0.53" <!-- from 0.0 to 1.0 -->

Базовый маркер (длинная труба с закругленными углами, ниже круглого маркера) используется для выравнивания содержимого представления с другой ссылкой на представление.

Квадратные ручки (в каждом углу обзора) используются для изменения размера изображения в dps.

Это полностью основано на мнении, и мое впечатление о ConstraintLayout

Эквивалентные свойства Relative Layout и Constraint Layout

(1) Относительный макет:

android:layout_centerInParent="true"    

(1) Эквивалент макета ограничений:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"

(2) Относительный макет:

android:layout_centerHorizontal="true"

(2) Эквивалент макета ограничений:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"

(3) Относительный макет:

android:layout_centerVertical="true"    

(3) Эквивалент макета ограничений:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

(4) Относительный макет:

android:layout_alignParentLeft="true"   

(4) Эквивалент макета ограничений:

app:layout_constraintLeft_toLeftOf="parent"

(5) Относительный макет:

android:layout_alignParentStart="true"

(5) Эквивалент макета ограничений:

app:layout_constraintStart_toStartOf="parent"

(6) Относительный макет:

android:layout_alignParentRight="true"

(6) Эквивалент макета ограничений:

app:layout_constraintRight_toRightOf="parent"

(7) Относительный макет:

android:layout_alignParentEnd="true"    

(7) Эквивалент макета ограничений:

app:layout_constraintEnd_toEndOf="parent"

(8) Относительный макет:

android:layout_alignParentTop="true"

(8) Эквивалент макета ограничений:

app:layout_constraintTop_toTopOf="parent"

(9) Относительный макет:

android:layout_alignParentBottom="true" 

(9) Эквивалент макета ограничений:

app:layout_constraintBottom_toBottomOf="parent"

(10) Относительный макет:

android:layout_alignStart="@id/view"

(10) Эквивалент макета ограничений:

app:layout_constraintStart_toStartOf="@id/view"

(11) Относительный макет:

android:layout_alignLeft="@id/view" 

(11) Эквивалент макета ограничений:

app:layout_constraintLeft_toLeftOf="@id/view"

(12) Относительный макет:

android:layout_alignEnd="@id/view"  

(12) Эквивалент макета ограничений:

app:layout_constraintEnd_toEndOf="@id/view"

(13) Относительный макет:

android:layout_alignRight="@id/view"

(13) Эквивалент макета ограничений:

app:layout_constraintRight_toRightOf="@id/view"

(14) Относительный макет:

android:layout_alignTop="@id/view"  

(14) Эквивалент макета ограничений:

app:layout_constraintTop_toTopOf="@id/view"

(15) Относительный макет:

android:layout_alignBaseline="@id/view" 

(15) Эквивалент макета ограничений:

app:layout_constraintBaseline_toBaselineOf="@id/view"

(16) Относительный макет:

android:layout_alignBottom="@id/view"

(16) Эквивалент макета ограничений:

app:layout_constraintBottom_toBottomOf="@id/view"

(17) Относительный макет:

android:layout_toStartOf="@id/view"

(17) Эквивалент макета ограничений:

app:layout_constraintEnd_toStartOf="@id/view"

(18) Относительный макет:

android:layout_toLeftOf="@id/view"  

(18) Эквивалент макета ограничений:

app:layout_constraintRight_toLeftOf="@id/view"

(19) Относительный макет:

android:layout_toEndOf="@id/view"

(19) Эквивалент макета ограничений:

app:layout_constraintStart_toEndOf="@id/view"

(20) Относительный макет:

android:layout_toRightOf="@id/view"

(20) Эквивалент макета ограничений:

app:layout_constraintLeft_toRightOf="@id/view"

(21) Относительный макет:

android:layout_above="@id/view" 

(21) Эквивалент макета ограничения:

app:layout_constraintBottom_toTopOf="@id/view"

(22) Относительный макет:

android:layout_below="@id/view" 

(22) Эквивалент макета ограничений:

app:layout_constraintTop_toBottomOf="@id/view"

Об этом сообщает @davidpbr ConstraintLayout performance

Я сделал два похожих макета с 7 дочерними элементами, каждый с родительским ConstraintLayout и RelativeLayout. На основе инструмента отслеживания методов Android Studio кажется, что ConstraintLayout проводит больше времени в onMeasure и выполняет дополнительную работу в onFinishInflate.

Используемая библиотека (support-v4, appcompat-v7…):

com.android.support.constraint:constraint-layout:1.0.0-alpha1

Устройства / версии Android воспроизводятся на: Samsung Galaxy S6 (SM-G920A. К сожалению, нет Nexus atm). Android 5.0.2

Сравнение трассировки быстрого метода:

Образец репозитория Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

Ниже приведены отличия / преимущества:

1. Компоновка с ограничениями имеет двойную мощь как относительного макета, так и линейного макета: устанавливает относительное положение представлений (например, относительный макет), а также устанавливает веса для динамического пользовательского интерфейса (что было возможно только в линейном макете).

2. Очень эффективное использование - группировка элементов в цепочку. Таким образом, мы можем сформировать группу представлений, которые в целом можно разместить желаемым образом, не добавляя еще один уровень иерархии, чтобы сформировать еще одну группу представлений.

3. В дополнение к весам мы можем применить горизонтальное и вертикальное смещение, которое представляет собой не что иное, как процент смещения от центра. (смещение 0,5 означает выравнивание по центру. Любое значение меньше или больше означает соответствующее движение в соответствующем направлении).

4. Другой очень важной особенностью является то, что он уважает и предоставляет функциональные возможности для обработки представлений GONE, чтобы макеты не ломались, если для некоторого представления установлено значение GONE через код Java. Дополнительную информацию можно найти здесь: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#VisibilityBehavior

5. Предоставляет возможности автоматического применения ограничений с помощью инструмента Blue print и Visual Editor, который упрощает создание страницы.

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

Вот лучшее место для быстрого обучения: https://codelabs.developers.google.com/codelabs/constraint-layout/#0.

Большая разница в том, что ConstraintLayout соблюдает ограничения, даже если представление отсутствует. Таким образом, это не нарушит макет, если у вас есть цепочка, и вы хотите, чтобы представление исчезло посередине.

Официально ConstraintLayout намного быстрее

В версии Android N класс ConstraintLayout предоставляет функции, аналогичные RelativeLayout, но по значительно более низкой цене.

В дополнение к ответу @ dhaval-jivani.

Я обновил проект github до последней версии макета ограничений v.1.1.0-beta3.

Я измерил и сравнил время метода onCreate и время между началом onCreate и концом выполнения последнего метода preformDraw, который отображается на мониторе ЦП. Все тесты проводились на Samsung S5 mini с android 6.0.1 Вот результаты:

Новый запуск (открытие первого экрана после запуска приложения)

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

OnCreate: 123 мс

Время рисования последней преформы - Время создания: 311,3 мс

Макет ограничения

OnCreate: 120,3 мс

Время рисования последней преформы - Время создания: 310 мс

Кроме того, я проверил тест производительности из этой статьи, здесь код и обнаружил, что on loop counts менее 100 Вариант компоновки ограничений выполняется быстрее при выполнении раздувания, измерения и компоновки, чем варианты с относительной компоновкой. А на старых устройствах Android, таких как Samsung S3 с Android 4.3, разница больше.

В заключение я согласен с комментариями из статьи:

Стоит ли рефакторинг старых представлений включать его с RelativeLayout или LinearLayout?

Как всегда: как всегда

Я бы не стал проводить рефакторинг, если у вас либо проблемы с производительностью с вашей текущей иерархией макета, либо вы все равно хотите внести значительные изменения в макет. Хотя в последнее время я не измерял его, я не обнаружил никаких проблем с производительностью в последних выпусках. Так что я думаю, вы должны безопасно использовать его. но - как я уже сказал - не мигрируйте просто ради миграции. Делайте это только в том случае, если в этом есть необходимость и выгода. Однако для новых макетов я почти всегда использую ConstraintLayout. Это намного лучше по сравнению с тем, что было у нас раньше.

Вывод, который я могу сделать,

1) Мы можем разрабатывать пользовательский интерфейс, не затрагивая xml-часть кода. Честно говоря, я чувствую, что Google скопировал дизайн пользовательского интерфейса в приложениях для iOS, это будет иметь смысл, если вы знакомы с разработкой пользовательского интерфейса в iOS, но в относительной компоновке сложно установить ограничения, не касаясь дизайна xml.

2) Во-вторых, он имеет плоскую иерархию представления, в отличие от других макетов, поэтому имеет лучшую производительность, чем относительный макет, что вы, возможно, видели из других ответов.

3) У него также есть дополнительные вещи, помимо того, что имеет относительный макет, например круговое относительное позиционирование, где мы можем расположить другой вид относительно этого на определенном радиусе с определенным углом, что не может быть сделано в относительном макете.

Я повторяю это еще раз, проектирование пользовательского интерфейса с использованием макета ограничений аналогично разработке пользовательского интерфейса в iOS, поэтому в будущем, если вы будете работать на iOS, вам будет проще, если вы использовали макет ограничения.

Настоящий вопрос, который следует задать, заключается в том, есть ли причина использовать какой-либо макет, кроме макета ограничений? Я считаю, что ответ может быть отрицательным.

Тем, кто настаивает на том, что они нацелены на начинающих программистов или им подобных, следует указать причину, по которой они уступают любому другому макету.

Макеты ограничений лучше во всех отношениях (они стоят около 150 КБ в размере APK). Они быстрее, они проще, они более гибкие, они лучше реагируют на изменения, они устраняют проблемы, когда элементы уходят, они лучше соответствуют радикально разным типам экранов и не используют кучу вложенных циклов с такой длинной нарисованная древовидная структура для всего. Вы можете положить что угодно где угодно, относительно чего угодно и где угодно.

Они были немного странными в середине 2016 года, когда редактор визуального макета был недостаточно хорош, но они настолько хороши, что если у вас вообще есть макет, вы можете серьезно подумать об использовании макета с ограничениями, даже когда он делает то же самое, что и RelativeLayout, или даже простой LinearLayout. FrameLayouts явно по-прежнему имеют свою цель. Но на данный момент я не вижу ничего нового. Если бы они начали с этого, они бы больше ничего не добавили.

Единственное отличие, которое я заметил, заключается в том, что элементы, установленные в относительной компоновке с помощью перетаскивания, автоматически получают свои размеры относительно других элементов, поэтому, когда вы запускаете приложение, вы получаете то, что вы видите. Однако в макете ограничения, даже если вы перетаскиваете элемент в представлении дизайна, при запуске приложения все может измениться. Это можно легко исправить, установив ограничения вручную или, что более рискованно, щелкнув правой кнопкой мыши элемент в дереве компонентов, выбрав подменю компоновки ограничений, а затем щелкнув «вывести ограничения». Надеюсь это поможет