it-swarm.com.ru

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

Я запутался в разнице между ConstraintLayout и RelativeLayout. Может ли кто-нибудь сказать мне точные различия между ними? 

168
b2mob

Цель 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.

 enter image description here

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

116
Nikola Despotoski

Об этом сообщает производительность @davidpbrConstraintLayout

Я создал две одинаковые 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

Быстрое сравнение методов отслеживания:

1

Пример репозитория Github: https://github.com/OnlyInAmerica/ConstraintLayoutPerf

38
Dhaval Jivani

Эквивалентные свойства относительного макета и макета ограничения

 Relative Layout and Constraint Layout equivalent properties

(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"

25
Naimatullah

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

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

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

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

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

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

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

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

19
Vishu Gupta

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

12
Herrbert74

Процесс рисования Android View состоит из 3 этапов. Вы можете найти соответствующие методы, когда расширяет ViewGroup

  • Мера 
  • Раскладка 
  • Рисовать

Используя инструмент Systrace мы можем рассчитать меру/макет 

Systrace для варианта макета, который использует RelativeLayout:

 enter image description here

Systrace для варианта макета, который использует ConstraintLayout:

 enter image description here

Разница в производительности (с помощью OnFrameMetricsAvailableListener , которая позволяет собирать покадровую информацию о времени визуализации интерфейса вашего приложения)

ConstraintLayout работает примерно на 40% лучше в фазе измерения/макета, чем RelativeLayout

 enter image description here

И последнее, но не менее важное: ConstraintLayout - это современный способ создания ответственного пользовательского интерфейса, он постоянно развивается, и в каждом выпуске появляются интересные функции, облегчающие жизнь. Последний - Ограничение Layout 1.1

Пожалуйста, прочитайте больше: 

https://constraintlayout.com/

https://Android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html

https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

8
yoAlex5

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

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

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

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

5
Tatarize

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

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

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

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

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

OnCreate: 123мс

Время последней предварительной обработки - время создания: 311,3 мс

Схема ограничения

OnCreate: 120,3 мс

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

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

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

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

Как всегда: это зависит ????

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

4
Andrey T

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

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

3
serv-inc

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

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

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

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

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

3
murali krish

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

0
Wilson