Канонические макеты

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

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

Фреймворк Android включает в себя специализированные компоненты, которые упрощают и делают надежной реализацию макетов.

Стандартные макеты создают привлекательные, повышающие производительность пользовательские интерфейсы, которые лежат в основе отличных приложений.

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

Подробный список

Формат «список-подробности» позволяет пользователям просматривать списки элементов, содержащих описательную, пояснительную или другую дополнительную информацию — подробную информацию об элементе.

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

Расширенные по ширине окна (см. раздел «Использование классов размеров окна ») позволяют одновременно отображать список и подробную информацию. Выбор элемента списка обновляет панель с подробной информацией, отображая связанное с выбранным элементом содержимое.

На экранах средней и компактной ширины отображается либо список, либо подробная информация, в зависимости от взаимодействия пользователя с приложением. Когда виден только список, при выборе элемента списка вместо списка отображается подробная информация. Когда виден только подробный список, нажатие кнопки «Назад» снова отображает список.

Изменения конфигурации, такие как изменение ориентации устройства или размера окна приложения, могут изменить класс размера окна дисплея. Макет «список-подробности» реагирует соответствующим образом, сохраняя состояние приложения:

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

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

Выполнение

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

Библиотека SlidingPaneLayout предназначена для реализации макетов списков на основе представлений или фрагментов.

Сначала объявите SlidingPaneLayout корневым элементом макета XML. Затем добавьте два дочерних элемента — представления или фрагменты, — которые представляют список и подробное содержимое.

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

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

Пример реализации см. в примере List-detail с выдвижной панелью .

Встраивание активности

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

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

Встраивание действий поддерживается в Android 12L (уровень API 32) и более поздних версиях, но также может быть доступно и на более низких уровнях API, если это реализовано производителями устройств. Если внедрение действий недоступно на устройстве, резервное поведение приводит к тому, что действие списка или подробное действие занимает все окно приложения в зависимости от взаимодействия пользователя с приложением.

Дополнительные сведения см. в разделе «Внедрение действий» .

Пример реализации см. в примере List-detail с внедрением активности .

,

Встраивание активности

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

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

Встраивание действий поддерживается в Android 12L (уровень API 32) и более поздних версиях, но также может быть доступно и на более низких уровнях API, если это реализовано производителями устройств. Если внедрение действия недоступно на устройстве, резервное поведение приводит к тому, что действие списка или подробное действие занимает все окно приложения в зависимости от взаимодействия пользователя с приложением.

Дополнительные сведения см. в разделе «Внедрение действий» .

Пример реализации см. в примере List-detail с внедрением активности .

Кормить

Макет ленты располагает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента.

Размер и расположение определяют взаимосвязь между элементами контента.

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

Карточки и списки — распространенные элементы оформления ленты новостей.

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

Ленты новостей особенно хорошо подходят для новостных приложений и социальных сетей .

Выполнение

RecyclerView эффективно отображает большое количество элементов в одном столбце. GridLayoutManager размещает элементы в сетке, позволяя настраивать размеры и диапазоны элементов.

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

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

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

Пример реализации см. в примере канала с представлениями .

,

RecyclerView эффективно отображает большое количество элементов в одном столбце. GridLayoutManager размещает элементы в сетке, позволяя настраивать размеры и диапазоны элементов.

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

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

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

Пример реализации см. в примере канала с представлениями .

Вспомогательная панель

Функция организации панелей позволяет распределить содержимое приложения по основным и дополнительным областям отображения.

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

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

Макет вспомогательной панели отличается от макета «список-подробности» соотношением основного и второстепенного содержимого. Содержимое второстепенной панели имеет смысл только по отношению к основному содержимому; например, окно инструментов во вспомогательной панели само по себе не имеет значения. Однако дополнительное содержимое в панели подробностей макета «список-подробности» имеет смысл даже без основного содержимого, например, описание товара из списка товаров.

Варианты использования вспомогательной панели включают:

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

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

Применимость

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

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

,

Применимость

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

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

Дополнительные ресурсы

• Материальный дизайн — Канонические макеты

,

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

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

Фреймворк Android включает в себя специализированные компоненты, которые упрощают и делают надежной реализацию макетов.

Стандартные макеты создают привлекательные, повышающие производительность пользовательские интерфейсы, которые лежат в основе отличных приложений.

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

,

Если вы уже знакомы с каноническими макетами адаптивных приложений, но не уверены, какие API-интерфейсы Android использовать, перейдите в раздел «Применимость», чтобы определить, какой макет подходит для вариантов использования вашего приложения.

Подробный список

Формат «список-подробности» позволяет пользователям просматривать списки элементов, содержащих описательную, пояснительную или другую дополнительную информацию — подробную информацию об элементе.

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

Расширенные по ширине окна (см. раздел «Использование классов размеров окна ») позволяют одновременно отображать список и подробную информацию. Выбор элемента списка обновляет панель с подробной информацией, отображая связанное с выбранным элементом содержимое.

На экранах средней и компактной ширины отображается либо список, либо подробная информация, в зависимости от взаимодействия пользователя с приложением. Когда виден только список, при выборе элемента списка вместо списка отображается подробная информация. Когда виден только подробный список, нажатие кнопки «Назад» снова отображает список.

Изменения конфигурации, такие как изменение ориентации устройства или размера окна приложения, могут изменить класс размера окна дисплея. Макет «список-подробности» реагирует соответствующим образом, сохраняя состояние приложения:

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

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

Выполнение

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

Библиотека SlidingPaneLayout предназначена для реализации макетов списков на основе представлений или фрагментов.

Сначала объявите SlidingPaneLayout корневым элементом макета XML. Затем добавьте два дочерних элемента — представления или фрагменты, — которые представляют список и подробное содержимое.

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

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

Пример реализации см. в примере List-detail с выдвижной панелью .

Встраивание активности

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

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

Встраивание действий поддерживается в Android 12L (уровень API 32) и более поздних версиях, но также может быть доступно и на более низких уровнях API, если это реализовано производителями устройств. Если внедрение действий недоступно на устройстве, резервное поведение приводит к тому, что действие списка или подробное действие занимает все окно приложения в зависимости от взаимодействия пользователя с приложением.

Дополнительные сведения см. в разделе «Внедрение действий» .

Пример реализации см. в примере List-detail с внедрением активности .

,

Встраивание активности

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

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

Встраивание действий поддерживается в Android 12L (уровень API 32) и более поздних версиях, но также может быть доступно и на более низких уровнях API, если это реализовано производителями устройств. Если внедрение действия недоступно на устройстве, резервное поведение приводит к тому, что действие списка или подробное действие занимает все окно приложения в зависимости от взаимодействия пользователя с приложением.

Дополнительные сведения см. в разделе «Внедрение действий» .

Пример реализации см. в примере List-detail с внедрением активности .

Кормить

Макет ленты располагает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента.

Размер и расположение определяют взаимосвязь между элементами контента.

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

Карточки и списки — распространенные элементы оформления ленты новостей.

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

Ленты новостей особенно хорошо подходят для новостных приложений и социальных сетей .

Выполнение

RecyclerView эффективно отображает большое количество элементов в одном столбце. GridLayoutManager размещает элементы в сетке, позволяя настраивать размеры и диапазоны элементов.

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

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

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

Пример реализации см. в примере канала с представлениями .

,

RecyclerView эффективно отображает большое количество элементов в одном столбце. GridLayoutManager размещает элементы в сетке, позволяя настраивать размеры и диапазоны элементов.

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

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

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

Пример реализации см. в примере канала с представлениями .

Вспомогательная панель

Функция организации панелей позволяет распределить содержимое приложения по основным и дополнительным областям отображения.

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

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

Макет вспомогательной панели отличается от макета «список-подробности» соотношением основного и второстепенного содержимого. Содержимое второстепенной панели имеет смысл только по отношению к основному содержимому; например, окно инструментов во вспомогательной панели само по себе не имеет значения. Однако дополнительное содержимое в панели подробностей макета «список-подробности» имеет смысл даже без основного содержимого, например, описание товара из списка товаров.

Варианты использования вспомогательной панели включают:

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

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

,

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как LinearLayout или ConstraintLayout . Установите классы размеров окон, которые делят пространство горизонтального отображения, доступное для вашего приложения, на три категории: компактное (< 600 dp), среднее (> = 600 dp) и расширенное (> = 840 dp).

Для каждого класса размера окна определите макеты следующим образом:

• Компактный: в папке layout ресурсов приложения поместите содержимое, отображающее вспомогательную панель, под основным содержимым или внутри нижнего листа.
• Средний: в папке layout-w600dp укажите вспомогательное содержимое панели, в результате чего основной контент и поддерживающая визуализация панели будут располагаться рядом, разделяя горизонтальное пространство отображения поровну.
• Развернуто: в папке layout-w840dp включите вспомогательное содержимое панели, в результате чего основное содержимое будет отображаться рядом друг с другом; однако вспомогательная панель занимает только 30% горизонтального пространства, а остальные 70% остаются для основного контента.

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

Примеры реализации см. в следующих примерах:

• Вспомогательная панель с представлениями
• Опорная панель с фрагментами

Применимость

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

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

,

Применимость

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

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

Дополнительные ресурсы

• Материальный дизайн — Канонические макеты