Как задать относительные позиции виджетам в ConstraintLayout

В ConstraintLayout требуется задать относительное позиционирование вложенных виджетов. 

Например, Картинка вверху в треть высоты экрана и внизу две кнопки, каждая из которых занимает по половине экрана, чтобы разметка одинаково смотрелась на всех устройствах.
    

Ответы

Ответ 1

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

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

Начинаем работу с того, что задаем две опорные линии. Для этого кликаем правой кнопко
мыши по области редактирования и выбираем Add Vertical Guidline для вертикальной и Add Horizontal Guidline для горизонтальной:



UPD:  C Android Studio 2.2 Preview3 опорные линии можно задать из панели инструментов вверху редактора:



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

По умолчанию опорная линия позиционируется по относительным координатам (расстояни
в dp), о чем сообщает изображение стрелочки в кружочке этой линии. Но нам нужно относительно
позиционирование в процентах, поэтому кликаем мышкой на эту стрелочку в кружочке и она приобретает вид с процентами - двигаем за этот кружочек в нужные позиции: вертикальную устанавливаем в 50%, а горизонтальную устанавливаем в 34% (треть экрана), затем бросаем на разметку три виджета, которые нам нужны (ImageView и две Button):



Теперь привязываем к этим линиям наши виджеты, кликаем на виджет и соединяем кружочк
на их гранях с привязочными линиями: кнопки - левую кнопку с левого края с краем экран
и нижнюю точку с низом экрана, правый кружок с вертикальной опорной линией, правую кнопку так же, только в зеркально (UPD С версии 1.0 появился режим компоновки chains (цепочки), который позволяет обойтись без вертикальной опорной линии):



Размер кнопкам по горизонтали назначаем - максимальное расстояние (аналог match_parent)
в квадрате справа щелкаем по горизонтальным линиям, пока не появится в виде "пилы" 
. (треугольнички - wrap_content, отрезок - фиксированный размер). Вертикальный оставляем, как есть (в виде треугольничков - wrap_content). Задаем маржины, числа сбоку от пиктограмм размера виджета (здесь 16dp и 8dp).

С кнопками все.

Теперь нижний край (кружок снизу) у ImageView соединяем с горизонтальной опорно
линией. Прочие края соединяем с краями экрана:

 

ставим маржины у ImageView в 0, размер виджета wrap_content:



Вот и все. Описание получилось очень длинным, но в реальности эта верстка занял
меньше минуты. В итоге получаем следующее:



Данная разметка будет сохранять свой относительный вид на любых размерах экрано
с любой плотностью.  

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

Если виджету требуется указать дополнительные свойства, то кликаем на пиктограмм
разнонаправленных стрелочек в верхнем правом углу редактора - появятся все атрибуты, доступные для виджета:



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

в xml-виде все это выглядит следующим образом: