Разработка пользовательского интерфейса с представлениями

Реализация Jetpack Compose

Редактор макетов позволяет быстро создавать макеты на основе View , перетаскивая элементы пользовательского интерфейса в визуальный редактор дизайна вместо написания XML-файла макета. Редактор дизайна позволяет предварительно просмотреть ваш макет на разных устройствах и версиях Android, а также динамически изменять размер макета, чтобы убедиться в его корректной работе на экранах разных размеров.

Редактор макетов особенно эффективен при создании макета с использованием ConstraintLayout .

На этой странице представлен обзор редактора макетов. Более подробную информацию об основах макетирования см. в разделе «Макеты» .

Введение в редактор макетов

Редактор макета появляется при открытии XML-файла макета.

Рисунок 1. Редактор макета.

1. Палитра : содержит различные представления и группы представлений, которые можно перетаскивать в макет.
2. Дерево компонентов : отображает иерархию компонентов в вашем макете.
3. Панель инструментов : содержит кнопки, позволяющие настраивать внешний вид макета в редакторе и изменять атрибуты макета.
4. Редактор дизайна : позволяет редактировать макет в режиме проектирования, режиме чертежа или в обоих режимах.
5. Атрибуты : содержит элементы управления для атрибутов выбранного представления.
6. Режим просмотра : позволяет просматривать макет в любом из двух режимов. , Расколоть или Дизайн режимы. В режиме разделенного экрана одновременно отображаются окна «Код» и «Дизайн» .
7. Элементы управления масштабированием и панорамированием : позволяют управлять размером и положением предварительного просмотра в редакторе.

При открытии XML-файла разметки по умолчанию открывается редактор дизайна, как показано на рисунке 1. Чтобы отредактировать XML-файл разметки в текстовом редакторе, нажмите кнопку «Код». Кнопка находится в правом верхнем углу окна. Обратите внимание, что панели «Палитра» , «Дерево компонентов» и «Атрибуты» недоступны при редактировании макета в режиме просмотра кода .

Совет: Чтобы переключаться между редактором дизайна и текстовым редактором, нажмите Alt ( Control в macOS) + Shift и клавишу со стрелкой вправо или влево.

Изменить внешний вид предварительного просмотра

Кнопки в верхнем ряду редактора дизайна позволяют настроить внешний вид макета в редакторе.

Рисунок 2. Кнопки на панели инструментов редактора макета, позволяющие настраивать внешний вид макета.

1. Дизайн и планировка : выберите желаемый способ отображения макета в редакторе. Вы также можете нажимать клавишу B для переключения между этими типами отображения.
   • Выберите «Дизайн» , чтобы увидеть предварительный просмотр вашего макета.
   • Выберите «Чертеж» , чтобы увидеть только контуры для каждого вида.
   • Выберите «Дизайн + Чертеж» , чтобы увидеть оба варианта отображения рядом.
2. Варианты ориентации экрана и компоновки : выберите альбомную или портретную ориентацию экрана или другие режимы экрана, для которых ваше приложение предоставляет альтернативные варианты компоновки, например, ночной режим. Это меню также содержит команды для создания нового варианта компоновки , как описано в разделе на этой странице. Вы также можете нажать букву O на клавиатуре, чтобы изменить ориентацию.

3. Режим системного интерфейса : Если в вашем приложении включена динамическая цветовая гамма , переключитесь на обои и посмотрите, как ваши макеты реагируют на обои, выбранные разными пользователями. Обратите внимание, что сначала необходимо изменить тему на динамическую цветовую тему Material, а затем сменить обои.

4. Тип и размер устройства : выберите тип устройства (телефон/планшет, Android TV или Wear OS) и конфигурацию экрана (размер и плотность). Вы можете выбрать один из нескольких предварительно настроенных типов устройств и собственные определения AVD, а также создать новое определение AVD, выбрав «Добавить определение устройства» из списка, как показано на рисунке 3.

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

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

   

   Рисунок 3. Список устройств, содержащий эталонные образцы.

5. Версия API : Выберите версию Android для предварительного просмотра макета. Список доступных версий Android зависит от того, какие версии платформы SDK вы установили с помощью SDK Manager.

6. Тема приложения : Выберите тему пользовательского интерфейса, которая будет применена к предварительному просмотру. Это работает только для поддерживаемых стилей макета, поэтому многие темы из этого списка приведут к ошибке.

7. Язык : Выберите язык, который будет отображаться для строк пользовательского интерфейса. В этом списке отображаются только языки, доступные в ваших строковых ресурсах. Если вы хотите отредактировать переводы, нажмите «Редактировать переводы» в меню. Для получения дополнительной информации о работе с переводами см. раздел «Локализация пользовательского интерфейса с помощью редактора переводов» .

Примечание: Если вы не добавите новый файл макета из раздела «Варианты макета» , эти настройки не повлияют на код или манифест вашего приложения. Они влияют только на предварительный просмотр макета.

Создать новый макет

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

Создать новый макет можно одним из следующих способов:

Воспользуйтесь главным меню Android Studio.

1. В окне «Проект» щелкните модуль, к которому хотите добавить макет.
2. В главном меню выберите Файл > Создать > XML > XML-файл макета .
3. В появившемся диалоговом окне укажите имя файла, корневой тег макета и набор исходных файлов, к которому относится макет.
4. Нажмите «Готово» , чтобы создать макет.

Используйте вид проекта.

1. В окне «Проект» выберите представление « Проект» .
2. Щелкните правой кнопкой мыши по папке с макетами, куда вы хотите добавить макет.
3. В появившемся контекстном меню выберите «Создать» > «Файл ресурсов макета» .

Используйте представление Android.

1. В окне проекта выберите представление Android .
2. Щелкните правой кнопкой мыши папку layout .
3. В появившемся контекстном меню выберите Создать > Файл ресурсов макета .

Воспользуйтесь Диспетчером ресурсов.

1. В Диспетчере ресурсов выберите вкладку «Макет» .
2. Нажмите кнопку + , а затем выберите «Файл ресурсов макета» .

Используйте варианты макета для оптимизации под разные экраны.

Вариант макета — это альтернативная версия существующего макета, оптимизированная для определенного размера экрана или ориентации.

Используйте предложенный вариант макета.

В Android Studio есть распространенные варианты макета, которые можно использовать в вашем проекте. Чтобы использовать предложенный вариант макета, выполните следующие действия:

1. Откройте файл макета по умолчанию.
2. Нажмите на « Дизайн» значок в правом верхнем углу окна.
3. Имя файла макета отображается в раскрывающемся списке «Действие для переключения и создания квалификаторов для файлов макета» . Выберите соответствующий пункт в раскрывающемся списке.
4. В раскрывающемся списке выберите вариант, например, «Создать параметр «Альбомная ориентация»» или «Создать параметр «Планшет»» .

   

   Рисунок 4. Выпадающий список параметров компоновки.

Создается новая директория макета.

Создайте собственный вариант макета

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

1. Откройте файл макета по умолчанию.
2. Нажмите на « Дизайн» значок в правом верхнем углу окна.
3. Имя файла макета отображается в раскрывающемся списке «Действие для переключения и создания квалификаторов для файлов макета» . Выберите соответствующий пункт в раскрывающемся списке.

4. В раскрывающемся списке выберите «Добавить квалификатор ресурса» . (См. рисунок 4 выше.)

   Открывается диалоговое окно «Выбор каталога ресурсов» .

5. В диалоговом окне «Выбор каталога ресурсов» определите квалификаторы ресурсов для варианта:

   1. Выберите квалификатор из списка доступных квалификаторов .
   2. Нажмите « Добавить» . кнопка.
   3. Введите все необходимые значения.
   4. Повторите эти шаги, чтобы добавить другие квалификаторы.

6. После добавления всех необходимых параметров нажмите кнопку ОК .

Если у вас есть несколько вариантов одного и того же макета, вы можете переключаться между ними, выбрав вариант в раскрывающемся списке «Действие для переключения и создания квалификаторов для файлов макета» .

Для получения дополнительной информации о создании макетов для разных размеров экрана см. раздел «Поддержка разных размеров экрана» .

Преобразовать вид или макет

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

1. Нажмите кнопку «Дизайн» в правом верхнем углу окна редактора.
2. В дереве компонентов щелкните правой кнопкой мыши по представлению или макету, а затем выберите «Преобразовать представление» .
3. В появившемся диалоговом окне выберите новый тип отображения или макета, а затем нажмите «Применить» .

Преобразовать макет в ConstraintLayout

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

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

1. Откройте существующий макет в Android Studio.
2. Нажмите на « Дизайн» значок в правом верхнем углу окна редактора.
3. В дереве компонентов щелкните правой кнопкой мыши по макету, а затем выберите пункт «Преобразовать your-layout-type в ConstraintLayout» .

Чтобы узнать больше о ConstraintLayout , см. статью «Создание адаптивного пользовательского интерфейса с помощью ConstraintLayout» .

Найдите предметы в Палитре

Для поиска представления или группы представлений по имени на палитре нажмите кнопку «Поиск» . Кнопка находится в верхней части палитры. В качестве альтернативы, вы можете ввести название элемента, когда окно палитры находится в фокусе.

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

Открытая документация из палитры

Чтобы открыть справочную документацию для разработчиков Android по определенному элементу интерфейса или группе элементов, выберите этот элемент на палитре и нажмите Shift + F1 .

Чтобы просмотреть документацию по Material Guidelines для представления или группы представлений, щелкните правой кнопкой мыши элемент пользовательского интерфейса на палитре и выберите Material Guidelines в контекстном меню. Если для элемента нет конкретной записи, команда откроет главную страницу документации по Material Guidelines .

Добавьте элементы интерфейса в свой макет.

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

Если вы используете ConstraintLayout , вы можете автоматически создавать ограничения с помощью функций Infer Constraints и Autoconnect.

Редактировать атрибуты представления

Рисунок 5. Панель атрибутов .

Редактировать атрибуты представления можно на панели «Атрибуты» в редакторе макетов. Это окно доступно только при открытом редакторе дизайна, поэтому для его использования просматривайте макет в режиме «Дизайн» или «Разделение» .

При выборе представления, будь то щелчком мыши по нему в дереве компонентов или в редакторе дизайна, на панели «Атрибуты» отображается следующее, как показано на рисунке 5:

1. Объявленные атрибуты : Список атрибутов, указанных в файле макета. Чтобы добавить атрибут, нажмите кнопку «Добавить». кнопка вверху раздела.
2. Макет : Содержит элементы управления шириной и высотой представления. Если представление находится в ConstraintLayout , в этом разделе также отображается смещение ограничений и перечисляются ограничения, используемые представлением. Для получения дополнительной информации об управлении размером представлений с помощью ConstraintLayout см. раздел « Настройка размера представления» .
3. Общие атрибуты : Отображает общие атрибуты для выбранного представления. Чтобы увидеть все доступные атрибуты, разверните раздел «Все атрибуты» в нижней части окна.
4. Поиск : Позволяет искать определенный атрибут представления.

5. Значки справа от каждого значения атрибута указывают, являются ли значения атрибутов ссылками на ресурсы. Эти индикаторы надежны. когда значение представляет собой ссылку на ресурс и пустое когда значение задано жестко, это помогает с первого взгляда распознать такие значения.

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

6. Красная подсветка вокруг значения атрибута указывает на ошибку в этом значении. Например, ошибка может указывать на недопустимое значение для атрибута, определяющего макет.

   Оранжевая подсветка указывает на предупреждение, связанное с данным значением. Например, предупреждение может появиться при использовании жестко заданного значения там, где ожидается ссылка на ресурс.

Добавьте примеры данных в ваше представление.

Поскольку многие макеты Android зависят от данных, получаемых во время выполнения, бывает сложно визуализировать внешний вид макета при разработке приложения. Вы можете добавить примеры данных предварительного просмотра в TextView , ImageView или RecyclerView прямо из редактора макетов.

Примечание: При добавлении тестовых данных в View Android Studio вносит изменения в ваш проект так, как если бы вы использовали собственные данные. Затем вы можете внести эти изменения по мере необходимости.

Чтобы отобразить окно «Атрибуты представления в режиме проектирования» , щелкните правой кнопкой мыши один из этих типов представления и выберите «Задать примерные данные» , как показано на рисунке 6.

Рисунок 6. Окно «Атрибуты представления в режиме проектирования» .

Для TextView можно выбрать одну из нескольких категорий примеров текста. При использовании примеров текста Android Studio заполняет атрибут text TextView выбранными вами данными. Обратите внимание, что выбрать пример текста можно через окно «Атрибуты представления» в режиме проектирования только в том случае, если атрибут text пуст.

Рисунок 7. TextView с примерами данных.

Для ImageView можно выбрать одно из нескольких изображений-примеров. При выборе изображения-примера Android Studio автоматически заполняет атрибут tools:src объекта ImageView (или tools:srcCompat если используется AndroidX).

Рисунок 8. ImageView с примерами данных.

Для RecyclerView можно выбрать один из шаблонов, содержащих примеры изображений и текста. При использовании этих шаблонов Android Studio добавляет в каталог res/layout файл recycler_view_item.xml , содержащий макет для примеров данных. Android Studio также добавляет метаданные в RecyclerView для корректного отображения примеров данных.

Рисунок 9. RecyclerView с примерами данных.

Показать предупреждения и ошибки макета

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

Чтобы просмотреть все известные проблемы в окне под редактором, нажмите «Показать предупреждения и ошибки ». или ) на панели инструментов.

Скачайте шрифты и примените их к тексту.

При использовании Android 8.0 (уровень API 26) или библиотеки Jetpack Core вы можете выбрать из сотен шрифтов, выполнив следующие шаги:

1. В редакторе макета нажмите « Дизайн» . Значок для просмотра макета в редакторе дизайна.
2. Выберите текстовый режим просмотра.
3. На панели «Атрибуты» разверните поле textAppearance , а затем разверните поле fontFamily .
4. Прокрутите список до конца и нажмите «Дополнительные шрифты» , чтобы открыть диалоговое окно «Ресурсы» .
5. В диалоговом окне «Ресурсы» для выбора шрифта просмотрите список или введите текст в строку поиска вверху. Если вы выберете шрифт в разделе «Загружаемые» , вы можете либо нажать «Создать загружаемый шрифт» , чтобы загрузить шрифт во время выполнения как загружаемый шрифт, либо нажать «Добавить шрифт в проект» , чтобы упаковать файл шрифта TTF в ваш APK-файл. Шрифты, перечисленные в разделе «Android» , предоставляются системой Android, поэтому их не нужно загружать или включать в ваш APK-файл.
6. Нажмите ОК для завершения.

Проверка макета

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

Рисунок 10. Вкладка «Проверка макета».

Для переключения между доступными наборами конфигураций выберите один из следующих вариантов в раскрывающемся списке «Эталонные устройства» в верхней части окна проверки компоновки:

• Справочные устройства
• Обычай
• Дальтонизм
• Размеры шрифта

Рисунок 11. Выпадающее меню «Эталонные устройства».

Справочные устройства

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

Рисунок 12. Предварительный просмотр эталонного устройства в инструменте проверки компоновки.

Обычай

Чтобы настроить параметры предварительного просмотра на экране, выберите один из нескольких вариантов, включая язык, устройство или ориентацию экрана:

Рисунок 16. Настройка пользовательского отображения в инструменте проверки макета.

Дальтонизм

Чтобы сделать ваше приложение более доступным для пользователей с дальтонизмом, проверьте его структуру с помощью симуляций распространенных типов дальтонизма:

Рисунок 13. Предварительный просмотр симуляции дальтонизма в инструменте проверки макета.

Размеры шрифта

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

Рисунок 14. Предварительный просмотр различных размеров шрифта в инструменте проверки макета.