Пример использования Android ConstraintLayout в сложном UI

Перевод статьи на Медиуме о построении пользовательского интерфейса с помощью компонента разметки ConstraintLayout.


Создайте сложный и отзывчивый интерфейс для вашего приложения

 

Пример использования Android ConstraintLayout в сложном UI

ConstraintLayout был представлен для создания очень сложных и отзывчивых пользовательских интерфейсов приложений. Ранее я использовал RelativeLayout для создания сложных пользовательских интерфейсов, пока не наткнулся на этот интерфейс.

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

Есть три шага для завершения входа в систему.

  1. Mobile Number
  2. OTP
  3. Profile

В настоящее время пользователь находится на первом шаге, а именно «введите номер мобильного телефона».

Потратьте несколько минут и попробуйте создать описанный выше пользовательский интерфейс, используя RelativeLayout или любой другой макет, и посмотрите, как он работает. Дайте мне знать в комментариях, если вы смогли построить именно этот пользовательский интерфейс, используя макет, отличный от ConstraintLayout.

Те, кто не знаком с ConstraintLayout, сначала должны прочитать документацию по Android ConstraintLayout.

Давайте начнем.

Внедрение ConstraintLayout в проект

Сначала добавьте зависимость Gradle в ваш проект.

Использование Guideline

Так выглядит пользовательский интерфейс, о котором пойдет речь ниже, в режиме конструктора в Android Studio.

Создание этого интерфейса стало возможным благодаря использованию Guideline.

Guideline — это аналог линии, устанавливаемой на макетах в визуальных редакторах, по которой дизайнеры выравнивают элементы. Такую линию представляет view класса android.support.constraint.Guideline. Guideline может быть горизонтальным или вертикальным — это указывается атрибутом android:orientation. Сам guideline нулевого размера, не занимает места в контейнере и всегда привязан только к сторонам ConstraintLayout.

Guideline  — это не что иное, как виртуальные представления — они не видны как таковые. Их можно просматривать в превью дизайна и blueprints. На изображении выше вы можете видеть, что я использовал два ориентира — две пунктирные линии, которые можно увидеть в центре по вертикали и по горизонтали.

После добавления Guideline , вот как выглядит XML:

Строка app:layout_constraintGuide_percent=”0.5" определяет, где именно вы хотите установить Guideline. В моем случае я хотел, чтобы это было в центре, поэтому установил значение 0,5.

Если вы хотите добавить TextView горизонтально, например, точно на 3/4 ширины экрана, вам нужно добавить вертикальную направляющую. Это действительно было бы вертикальным ориентиром. Мы делим экран по горизонтали, поэтому будем использовать vertical guideline.

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

Надеюсь, что это дает вам представление о Guideline. Мы вернемся к исходной проблеме сейчас.

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

Добавление ImageView

Во-первых, мы добавим ImageView точно в центр Guideline. Вот код:

Разместить ваш ImageView точно по центру относительно горизонтальной направляющей помогают следующие строки:

app:layout_constraintBottom_toTopOf="@+id/guideline1" app:layout_constraintTop_toTopOf="@+id/guideline1"

А разместить ImageView точно по центру относительно вертикальной направляющей помогают следующие строки:

app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintStart_toStartOf="@+id/guideline"

Теперь мы добавим разделители слева и справа от этого ImageView, как того требует пользовательский интерфейс:

Строки ниже помещают разделитель точно по центру по вертикали относительно ImageView ivotp:

app:layout_constraintBottom_toBottomOf

app:layout_constraintTop_toTopOf

Вот как выглядит наш пользовательский интерфейс:

В конце этих разделителей мы добавим два ImageViews, как показано ниже:

Вот как выглядит наш пользовательский интерфейс:

Теперь нам просто нужно добавить три TextView под каждым кругом ImageView, точно в центре по горизонтали. Вот код, чтобы добавить это:

В приведенном выше коде строки app: layout_constraintEnd_toEndOf и app: layout_constraintStart_toStartOf  выровняют текст по горизонтали относительно ImageView, а строка app: layout_constraintTop_toBottomOf  выровняет текст под ImageView.

Финальный результат и код

Вот наш пользовательский интерфейс и наш окончательный код XML:

После создания этого интерфейса я понимаю важность использования ConstraintLayout. Теперь я стараюсь использовать ConstraintLayout везде, где это возможно.

Добавить комментарий