Сетки и единицы

Пиксели, не зависящие от плотности экрана (dp), и масштабируемые пиксели (sp) необходимы для создания макетов и шрифтов, которые единообразно реагируют на широкий диапазон плотности экрана, классов размеров, форм-факторов и соотношений сторон, характерных для устройств Android.

Выводы

  • Если вы используете базовую сетку, придерживайтесь значений 4 и 8.
  • Указывайте характеристики в единицах dp и sp, а не в пикселях.
  • Экспортировать растровую графику для всех сегментов.
  • При разработке учитывайте адаптивность, а также разные классы размеров, разрешения и соотношения сторон.
  • Пиксели, не зависящие от плотности экрана (dp). Это гибкие единицы, которые масштабируются, чтобы иметь одинаковые размеры на любом экране. Они основаны на физической плотности экрана. Эти единицы измерения относятся к экрану с разрешением 160 точек на дюйм, на котором 1 dp примерно равен 1 px.
  • Масштабируемые пиксели (sp). Выполняют ту же функцию, что и dp, но для шрифтов. Значение по умолчанию для sp совпадает со значением по умолчанию для dp. Система Android рассчитывает фактический размер шрифта на основе устройства и настроек, заданных пользователем.
Обозначение dp и sp

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

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

Сегменты плотности

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

Android группирует плотности экрана в диапазоны и использует их, чтобы показывать на устройстве оптимальный набор объектов. Наиболее часто используемые сегменты плотности: mdpi, hdpi, xhdpi, xxhdpi и xxxhdpi (nodpi и anydpi относятся к сегменту, который не масштабируется в зависимости от разрешения устройства и обычно используется для векторных изображений). Каждый из них соответствует файлу ресурсов вашего приложения.

Плотность MDPI – x1, HDPI – x1,5, XHDPI – x2, XXHDPI – x3, XXXHDPI – x4.
Вечеринка, дыня, плотность

Чтобы рассчитать dp:

dp = (ширина в пикселях * 160) / плотность экрана

Базовая сетка

Использование сетки помогает создавать интерфейсы с единообразными отступами и выравниванием. В интерфейсе Android для макетов, компонентов и интервалов используется сетка с шагом 8 dp.

Сетка с шагом 8 dp

Небольшие элементы, такие как значки, текст и некоторые элементы в компонентах, лучше всего выравнивать по сетке с шагом 4 dp.

Сетка с шагом 8 dp подходит для большинства элементов интерфейса, а сетка с шагом 4 dp – для небольших элементов, например значков.

Сетки макета

Сетки – основа любого макета. Учитывайте иерархию, количество и даже сообщение контента.

Иерархическая сетка

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

Пример иерархической сетки на компактном и большом экранах

При адаптации к разным размерам экрана иерархический макет может перекомпоновываться, изменять размер и показывать ячейки сетки.

Модульная сетка

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

Пример модульной сетки на компактном и большом экране

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

Сетка столбцов

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

Пример сетки столбцов в компактном и большом режиме

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

Сетка с четырьмя столбцами

Классы размеров

Классы размеров окон – это набор точек останова области просмотра, которые помогают проектировать, разрабатывать и тестировать адаптивные макеты приложений. В Android классы размеров окон делятся на три категории: компактный, средний и расширенный. Подробнее о классах размеров окон…

Соотношения сторон

Соотношение сторон – это отношение ширины элемента к его высоте. Соотношение сторон указывается в формате "ширина:высота".

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

Для элементов интерфейса рекомендуется использовать следующие соотношения сторон:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3