Constraint layout это что
ConstraintLayout 101 и новый редактор компоновок в Android Studio
Данная статья является переводом поста из блога Android-разработчицы из ЮАР Ребекки Фрэнкс riggaroo.co.za, подготовленным Android-отделом компании Лайв Тайпинг. Оригинальная статья доступна здесь.
Недавно мне посчастливилось принять участие в конференции Google I/O, где я познакомилась с ConstraintLayout. Я была так потрясена его возможностями, что не могла дождаться, когда приеду домой и попробую всё сама.
Что же такое ConstraintLayout?
ConstraintLayout — это новый вид layout, который вы можете использовать в ваших Android-приложениях. Эта компоновка обладает обратной совместимостью вплоть до API Level 9 и является частью Support Library. Цель ConstraintLayout — уменьшить количество иерархий layout, улучшить производительность layout, а также заменить работу с RelativeLayouts. Она совместима с другими компоновками, так что они могут прекрасно гармонировать друг с другом.
Первые шаги с ConstraintLayout
Чтобы начать работу, вам нужно скачать Android Studio 2.2 Preview 1. Помимо новой layout в комплект входит также новый Layout Editor, который, как мне сказали, пришлось создавать с нуля, потому что прежний стал совершенно бесполезным.
Теперь вам нужно добавить одну строку в раздел dependencies файла build.gradle (или Android Studio сделает это автоматически, когда вы создадите новый layout, использующий его):
Для того, чтобы воспользоваться ConstraintLayout, кликните на папку res/layout. Выберите New > Layout Resource Folder. В опции root element удалите LinearLayout и начните вводить ConstraintLayout — так вы создадите новый файл с вашей ConstraintLayout, который по умолчанию состоит из Blueprint Mode 
и Design Mode и выглядит примерно так:
Как работает новый Layout Editor
Constraints
Constraints — это правила, которые вы определяете для виджета. Constraints предоставляют опции, во многом идентичные ‘toLeftOf, toRightOf’ в RelativeLayouts. Также при помощи ограничений задаются выравнивания для виджетов.
Виды constraints:
Resize Handle
Меняйте размер виджета, растягивая его за углы
Size Constraint Handle
Маленькие кружочки, расположенные по сторонам виджета, позволяют задавать его положение внутри контейнера
Baseline Constraint Handle
Позволяет вам выровнять две строки текста в виджетах.
Определяет смещение вашего виджета. Вы можете задать вертикальное или горизонтальное смещение.
Управление размерами виджета
В окне Properties находится схематичное изображение, с помощью которого вы можете управлять размерами виджета. Здесь вы можете определить поля и то, как виджет будет менять свой размер, а именно:
Any Size
Аналогично match_parent. Единственное отличие в том, что эта опция подчиняется constraints.
Wrap Content
Виджет будет большим настолько, насколько это необходимо, чтобы вместить всё содержимое.
Fixed Size
Позволяет задать фиксированный размер виджета в dp.
Для переключения между этими типами достаточно кликнуть по одной из опций на изображении.
Вы также можете задавать смещение, перетаскивая ползунок по вертикальной или горизонтальной оси.
Autoconnect
Autoconnect — это опция, которая автоматически начинает рассчитывать оптимальные значения для виджета, исходя из его местоположения.
Как только вы переместите виджет в layout, вы увидите линии, которые начнут расходиться от него в разные стороны — так работает Autoconnect. Опция включена по умолчанию и может быть выключена и включена обратно по нажатию на иконку с магнитом
Constraints, заданные вручную
Для создания своих собственных constraints кликните по кружочку на одной из сторон виджета, который вы хотите разместить. Не отпуская кнопку мыши, прочертите линию к виджету, к которому вы хотите его привязать — как только виджет позеленеет, он создаст constraint. Вы можете удалить constraint, кликнув по нему, когда он подсвечен красным.
Inference
Inference создает constraints для всех виджетов внутри вашей компоновки. Он действует наподобие Autoconnect, только он работает не с одним виджетом, редактируемым в данный момент, а со всем layout сразу. Он использует математические расчёты, чтобы определить, какие виджеты нужно привязать к другим, исходя из их местоположения на экране.
Чтобы воспользоваться Inference, нажмите иконку с лампочкой
Кое-что ещё на заметку:
Что делать с моими старыми разметками? Мне нужно их переделывать?
Я бы не стала бросаться с головой в омут и переделывать всё на свете без особой необходимости. Если вы считаете, что ваш старый layout работает медленно или вам трудно вносить туда какие-то изменения, то, возможно, вам стоит задуматься о том, чтобы использовать ConstraintLayout. Учитывайте, что она находится в состоянии ранней альфы.
Может быть, я делала что-то не так, но все три раза, когда я пыталась проделать эту манипуляцию, ConstraintLayout был добавлен в мой layout, но результат отличался от того, который я ожидала. Похоже, что нужно подождать какое-то время, пока разработчики окончательно допилят эту опцию.
Мои мысли:
Новый layout editor и ConstraintLayout потрясли меня до глубины души. Я на самом деле думаю, что нам очень не хватало чего-то подобного. При всей своей мощности и пользе они выглядят очень простыми в освоении.
Надеюсь, что однажды из всего этого сделают отдельный инструмент, при помощи которого дизайнеры смогут создавать полноценные интерфейсы.
Что нового в ConstraintLayout 1.1
ConstraintLayout упрощает создание сложных макетов в Android, позволяя создавать большую часть вашего пользовательского интерфейса с помощью визуального редактора в Android Studio. Его часто называют более мощным RelativeLayout. С помощью ConstraintLayout вы можете избегать множества уровней вложенности при вёрстке сложных экранов.
Недавно была выпущена стабильная версия ConstraintLayout 1.1, и теперь он выглядит очень зрело. Полная его оптимизация ещё больше увеличивает его быстродействие, а новые элементы, такие как барьеры и группы, превращают создание по-настоящему крутого дизайна в достаточно тривиальную задачу.
Android Gradle
Чтобы использовать новые функции в проекте, необходимо добавить ConstraintLayout 1.1 в проект в качестве зависимости:
Новый функционал в 1.1
Проценты
Для того, чтобы View занимала определённый процент экрана, в ConstraintLayout 1.0 было необходимо наличие как минимум двух зависимостей. В ConstraintLayout 1.1 решение этой задачи было упрощено до простого указания процента ширины или высоты.
Ширина кнопки задана в процентах, и она занимает всё свободное пространство и сохраняет свой внешний вид:
Все View-компоненты поддерживают атрибуты layout_constraintWidth_percent и layout_constraintHeight_percent. Они позволяют ограничить View-компонент процентным значением в рамках всего доступного пространства. Таким образом, чтобы кнопка растянулась на 70% в рамках свободного для неё места, необходимо всего несколько строк:
Цепочки
При позиционировании нескольких компонентов с помощью цепочки есть возможность управления пространством между ними. В 1.1 было исправлено несколько ошибок с цепочками и теперь они могут работать с большим количеством View-компонентов. Чтобы создать цепочку, необходимо добавить зависимости в обе стороны от View-компонента:
У главного (head) View-компонента из цепочки доступно свойство app:layout_constraintVertical_chainStyle, которое можно установить в spread, spread_inside или packed.
Барьеры
Когда у вас есть несколько View-компонентов, которые могут динамически изменять размер, можно использовать барьер для их ограничения. Барьер можно расположить в начале, в конце, сверху или снизу нескольких компонентов. Это очень похоже на создание виртуальной группы компонентов. Виртуальной, потому что этой группы не существует физически, и, следовательно, она не усложняет иерархию компонентов.
Барьеры действительно полезны, когда вы создаете локализированные строки или отображаете контент, созданный пользователем, размер которого вы не можете предсказать.
Барьеры позволяют создать зависимости от нескольких View-компонентов:
Барьер всегда находится непосредственно за пределами виртуальной группы, и его можно использовать для построения зависимостей с другими View-компонентами. В этом примере View-компонент справа всегда находится в конце самого длинного компонента из виртуальной группы.
Группы
Иногда вам необходимо показывать или скрывать сразу несколько компонентов. Именно для этого в ConstraintLayout были добавлены группы.
Группа не добавляет дополнительного уровня вложенности в иерархию View-компонентов. Группа — это просто способ виртуального объединения. В примере ниже мы объединяем profile_name и profile_image под одним id — profile.
Это полезно, когда у вас есть несколько компонентов, которые отображаются или скрываются вместе.
После того как вы создали группу profile, вы можете менять видимость целой группе, и она будет применяться как к profile_name, так и к profile_image.
Круговые зависимости
В ConstraintLayout большинство зависимостей и ограничений задаются размерами экрана – горизонтальными и вертикальными. В Constraint Layout 1.1 появился новый тип зависимости – constraintCircle, который позволяет указывать зависимости по кругу. Вместо горизонтальных и вертикальных отступов можно указать угол и радиус круга. Это удобно для View-компонентов, смещённых под углом, таких как радиальное меню!
При создании круговых зависимостей углы начинаются сверху и изменяются по часовой стрелке. Например, таким образом нужно описать среднюю кнопку в примере выше:
Анимация с ConstraintSet
ConstraintLayout можно использовать вместе с ConstraintSet для одновременного анимирования нескольких элементов. ConstraintSet работает только с зависимостями из ConstraintLayout. ConstraintSet можно создать в коде или добавить прямо в xml-файл.
Для начала анимации используйте TransitionManager.beginDelayedTransition()` из support library. Эта функция запустит все анимации определённые в ConstraintSet**.
В этом видео можно узнать немного больше по этой теме:
Новые оптимизации
ConstraintLayout 1.1 добавляет несколько новых оптимизаций, которые повышают его быстродействие. Оптимизации выполняются для того, чтобы уменьшить количество зависимостей, необходимых для расположения View-компонентов на экране.
Суть оптимизаций заключается в избавлении от избыточных констант в макетах.
Появился новый атрибут — layout_optimizationLevel, который настраивает уровень оптимизации. Ему можно задать следующие значения:
Если вы хотите опробовать экспериментальные оптимизации dimensions и chains, вам необходимо включить их в ConstraintLayout с помощью
Android курс в Технополисе 2019
Обзор
Общий формат привязки Constraint выглядит следующим образом:
Привязка границ, настройка ширины и высоты
Основные правила привязки сторон:
Размеры View
Рассмотрим на примере ширины, каким образом нам задавать значения:
Результат получился таким же, как и в предыдущем случае, это связано с тем, что у нас достаточно большой текст. Давайте попробуем уменьшить длинную текста и посмотрим что получится:
layout_width=»0dp», layout_constraintWidth_default=»spread» для короткого текста:
layout_width=»0dp», layout_constraintWidth_default=»wrap» для короткого текста:
Bias и Baseline
Bias
За положение относительно привязанных сторон отвечают два атрибута:
Bias принимают значения от 0 до 1.
Baseline
Стоит обратить внимание, что так как мы не отвечаем за привязку верха и низа, то наше View может выйти за пределы родителя.
Правильно было бы привязать первое TextView ко второму:
Chain и Group
Chain
Цепь элементов может существовать как сама по себе, так и может быть привязана к сторонам родителя.
Простейшая цепь элементов выглядит следующим образом:
Для того, что бы установить тип цепи, необходимо добавить атрибут первому из элементов цепи.
Group
При помощи Group можно удобно скрывать или показывать элементы одновременно, не перебирая все из них по очереди. Хоть Group и находится внутри файла разметки, визуально они никак не отображается на экране.
Для разметки выше группа будет выглядеть следующим образом:
Guideline и Barrier
Guideline
Guideline это вспомогательная линия разметки. Она не имеет ширины и высоты, но относительно нее можно выравнивать другие элементы. Guideline всегда привязана только к сторонам родителя и может быть вертикальным или горизонтальным.
Расположение Guideline контролируется следующими атрибутами:
Предположим, что нам нужно разместить элементы следующим образом:
Попробуем добавиться такого результата при помощи Guideline :
Мы получили искомый результат. Если бы линии разметки были видимы, то экран бы выглядел следующим образом:
Barrier
Barrier – это невидимый View который применяется для нескольких объектов изначально неизвестного размера – если один из них увеличивается, то Barrier подстроит размер остальных под наибольшую высоту или ширину. Барьеры могут быть вертикальными и горизонтальными.
Предположим что у нас есть два TextView неизвестного размера, но мы хотим, что бы некий ImageView всегда был справа от них. Этого можно добиться следующим образом:
Невидимая линия разметки проходит ровно справа самого длинного TextView :
Другие возможности ConstraintLayout
Библиотека ConstraintLayout переодически обновляется и добавляются все новые и новые возможности.
Анимации, слои и прочие нововведения. За обновления удобнее всего следить на официальной странице.
Material Design за 15 минут: проверяем, на что способен ConstraintLayout
Содержание статьи
В мобильном приложении все должно быть прекрасно — и Java-код с паттернами, и UI. И если мобильный backend, кроме создателя, никто не видит, то создать удобный, яркий и, конечно же, модный интерфейс — дело необходимое и сложное. Зная об этом, летом компания Google анонсировала появление нового способа верстки пользовательских интерфейсов. Нововведения содержатся в классе ConstraintLayout, предполагается, что он не только упростит передачу мыслей дизайнеров разработчикам, но и повысит скорость работы приложения. Давай разберемся, как много в этих словах правды и где ждать подвохов.
View и ViewGroup
Чтобы правильно оценить нововведения, нужно понять, с чем мы вообще имеем дело. Java — классический ООП-язык, в котором важную роль играет принцип наследования. В Android у всех визуальных элементов есть базовый класс-прародитель — View. От него напрямую унаследованы все те многие элементы интерфейса, которые разработчик помещает на экране: TextView, ImageView и прочие. Для их корректного отображения на экране во View уже созданы все необходимые методы для отрисовки элемента: onDraw, getPadding и другие.
Но элементы класса View нельзя разместить на экране просто так, их нужно чем-то сгруппировать. Для компоновки элементов, создания из них единой, органичной картины в Android созданы макеты (layouts). Именно они позволяют размещать элементы так, чтобы они радовали глаз каждого хипстера :).
Для макетов создан отдельный родительский класс — ViewGroup, в котором собраны все необходимые для макета параметры. Макетов в Android много, самые распространенные — LinearLayout и RelativeLayout.
Отображаемые пользователю элементы приходится хранить в оперативной памяти устройства, что весьма затратно. Поэтому система старается побыстрее выгрузить оттуда ненужное, а новые объекты добавлять в последний момент. При этом объекты на экране отрисовываются не случайным образом, а в порядке их старшинства в иерархии наследования. Все видимые пользователю объекты класса View будут обработаны ОС в последнюю очередь, поэтому-то пользовательские интерфейсы и «подвисают».
Layout
Макеты в Android не живут своей жизнью, а привязаны к базовым компонентам приложения — Activity. Именно объекты этого класса хранят информацию о визуальных элементах, подготовленных для показа пользователю. Данные о UI передаются в Activity с помощью метода setContentView. Как правило, он вызывается сразу же при создании объекта, в методе onCreate.
Файл activity_main хранит в себе всю достаточную информацию о пользовательском интерфейсе, это и есть готовая верстка интерфейса приложения. В мире Android это конфиг в формате XML, расположение элементов в нем задается параметрами внутри тегов, а также может зависеть от позиции в файле.
Актуальные версии Android позволяют достаточно гибко обращаться с элементами интерфейса: можно использовать одну и ту же верстку несколько раз или создавать контейнеры с динамически подгружаемым содержимым. Конечно, такие конфигурационные файлы можно генерить программно, внутри Activity или где-то еще.
Установка
Новый макет был представлен публике в мае 2013 года. И хотя стабильная версия все еще не появилась, интерес к предложенному инструменту в среде Android-разработчиков не угасает. Есть ощущение, что компания Google делает большую ставку на этот макет и в будущем он может стать стандартом при разработке интерфейсов.
На первый взгляд — революции не произошло. Новый класс все так же унаследован от ViewGroup, однако создатели обещают, что работать с ним будет быстрее и легче. Все запланированные бонусы при работе с ConstraintLayout разработчик почувствует, только установив свежую Android Studio. Официально версия 2.2 пока еще не вышла, на момент написания статьи был доступен билд Release candidate 2. Это уже очень близко к стабильной версии, а значит, можно качать по ссылке внизу статьи и осваивать.
Устанавливается IDE по-прежнему быстро и просто, спасибо создателям. Возможно, тебе потребуется обновить версию сборщика Gradle, на официальном сайте доступна версия 3.0. Сложностей тоже быть не должно — просто скачай самую свежую версию, а затем укажи путь к папке в настройках студии.
ConstraintLayout
Сейчас новый макет доступен в виде отдельной библиотеки, подключаемой через Gradle.
Такой вариант дистрибуции выбран не просто так — ConstraintLayout совместим со всеми версиями Android начиная с 2.3. Это очень круто, поскольку RelativeLayout иногда некорректно работает в версиях Android ниже 4.2, а значит, в перспективе ConstraintLayout может выручить в подобных случаях, с которыми раньше справиться было трудно.
Способ создания новых проектов не поменялся (это же не Microsoft Office), но слегка изменился дизайн интерфейсов. В своем «Hello, world» сразу переходи к activity_main. На вкладке Text будет верстка на основе ConstraintLayout, примерно такая.
Если в качестве макета выбран RelativeLayout, то ничего страшного: проверь, что библиотека корректно подключена через Gradle и поменяй верстку руками.
Design
В новой студии обновлен графический редактор интерфейсов, который теперь называется просто Design. Его предшественник носил скорее декоративную функцию, пользы от него было мало. ConstraintLayout покажет все свои возможности только в связке с Design, вот почему столько приготовлений всего лишь из-за нового макета.
Рис. 1. Новый инструмент Design
И вот он, обещанный drag’n’drop! В новом редакторе Google тебе представилась возможность создавать UI исключительно с помощью мышки. TextView, ImageView, FAB и прочие элементы, даже кастомные, теперь можно (и нужно) передвигать мышкой и компоновать их между собой линиями связи. У программиста наконец-то есть возможность создать что-то осмысленное, не написав ни строчки кода. Если ты не поленился и установил новую студию, рекомендую немного попрактиковаться, а я продолжу рассказывать о возможностях вкладки Design.
Связи и ограничения
Constraint переводится с английского как ограничение, напряженность. Именно такие ограничения теперь придется задавать каждому элементу, указывая на опорные точки. В ConstraintLayout есть несколько видов опорных точек для View-объектов:
Как ты уже мог догадаться, объекты при верстке позиционируются относительно друг друга, это очень похоже на философию RelativeLayout.
Визуальный редактор Design показывает UI одновременно в двух режимах: слева максимально похоже на то, что увидит пользователь, справа — со всеми связями между объектами. Добавить новый элемент можно мышкой, перетащив его из раздела Palette в редактор.
Хорошая новость — с новым редактором стало гораздо легче выстраивать элементы. Прежде было достаточно хлопотно выровнять, к примеру, textView и imageView так, чтобы не было «провисаний». Новая студия сама предложит несколько вариантов позиционирования, достаточно немного «пошевелить» объект.
Рис. 2. Выравнивание элементов
Кроме других объектов и краев макета, теперь добавился еще один элемент — невидимая линия (invisible guideline). Их может быть несколько, как вертикальных, так и горизонтальных. Предназначение — создать своеобразную сетку на экране, чтобы элементы можно было помещать в образовавшиеся «ячейки». Координаты линий можно задавать как точными смещениями, так и в процентах, что, несомненно, практичнее. В перспективе это может быть очень удобным инструментом.
К счастью, изменения в визуальном редакторе идентичны тем, что происходят в уже привычном XML-конфиге. Можно переключиться на вкладку Text и подправить то, что мы натыкали мышкой, а затем переключиться обратно на вкладку Design, где автоматически добавятся внесенные правки.
Как показал опыт работы в новом редакторе, теперь при создании более-менее сложных интерфейсов есть смысл начинать создавать элементы с середины экрана, а затем прикреплять остальные «сверху» и «снизу». Процесс соединения элементов сопровождается анимацией и в первое время радует глаз. Рекомендую попробовать, это действительно интересно.
Производительность
Когда Google презентовала RelativeLayout, разработчиков настоятельно просили использовать этот класс осторожно и только в тех местах, где он необходим. Это объяснялось сложностью его реализации и, как следствие, повышенным расходом ресурсов при отрисовке элементов.
В случае с ConstraintLayout все по-другому. Создатели обещают не только упрощенный способ верстки, но и возросшую производительность! Оптимистичное заявление, давай проверим, как с этим обстоят дела на практике.
Для формирования в оперативной памяти ОС готовых к отображению картинок у всех наследников View поочередно вызываются методы measure, layout и draw. От того, как быстро они отработают, напрямую зависит легкость и плавность работы UI. В Android есть несколько способов замерить скорость работы приложения, для тестирования UI подойдет утилита Hierarchy Viewer. Она поставляется вместе с SDK и работает как отдельное приложение.
Запустить утилиту нужно в тот момент, когда на эмуляторе (или живом устройстве) активно предназначенное к тестированию Activity. Программа построит граф связи всех визуальных элементов и, самое главное, покажет, как быстро был обработан тот или иной элемент. Я решил сравнить производительность ConstraintLayout и RelativeLayout, а для теста выбрал несложную верстку: ImageView и три TextView рядом. В RelativeLayout верстка выглядит так.
С использованием ConstraintLayout мне удалось набросать такой же вариант UI, не прибегая к вбиванию кода. Правда, времени это заняло столько же, как и при работе с RelativeLayout, — к визуальному редактору еще нужно привыкнуть.
Результаты
Чтобы Hierarchy Viewer измерил затраченное ОС время, нужно нажать клавишу Profile node. Надо сказать, результаты получились странные. Если время рендеринга View-объектов примерно одинаково вне зависимости от верстки (что логично: их код никто не правил), то времени на макет с ConstraintLayout тратится существенно больше, чем на верстку со старым RelativeLayout.
Заметное падение производительности происходит в методе onMeasure, тут ConstraintLayout медленнее в полтора-два раза. Вполне логично, это следствие всех этих сложных связей между объектами, так как ОС требуется больше вычислений для позиционирования объектов. Если проводить серию тестов, то RelativeLayout снова впереди: отклонение от средних значений минимально, тогда как ConstraintLayout очень нестабилен.
Напомню, что сейчас новый макет поставляется как библиотека и находится в стадии alpha, очень далекой от релиза. Скорее всего, ребята из Google тщательно работают над оптимизацией, чтобы оправдать выданные авансы. Что же, пожелаем им здоровья, удачи и будем ждать существенных изменений в официальном релизе.
Впечатления
За тестированием ConstraintLayout я провел несколько вечеров, и у меня сложились двойственные впечатления. С одной стороны, серьезно снизился порог сложности для создания интерфейсов в стиле material: не нужно специальной подготовки, просто кликай мышкой и получай результат. И результат получается мгновенно, ты чувствуешь себя умным и успешным.
В то же время интерфейс редактора быстро перегружается мелкими деталями: обилие стрелок, черточек, анимации. и, кстати, сочетание клавиш Ctrl-z почему-то не работает. Сделав что-то не то, нельзя тут же откатиться назад, что поначалу пугает. При этом конечный результат в визуальном редакторе по-прежнему может отличаться от того, что ты увидишь в запущенном приложении.
Рис. 3. Организация рабочего пространства в Design
Но нужно отметить, в визуальном редакторе теперь действительно удобно выравнивать элементы или выставлять отступы. Это те моменты из разработки, которые занимают много времени и не доставляют большого удовольствия.
Outro
Упрощение интерфейсов — логичный тренд, который работает не только в IT. Уже давно редактор Vim перестал быть № 1 среди линуксоидов, вот и редактор XML скоро будет не для всех. Но в предложенных инструментах еще много минусов, которые неприемлемы при решении серьезных задач. Время покажет, станет ли ConstraintLayout макетом по умолчанию или же тихо забудется, как Google Glass.