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

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты

,

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

Рис. 1. Приложение для обмена сообщениями, показывающее список разговоров и сведения о выбранном разговоре.

Выполнение

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

Библиотека 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 с внедрением активности .

Кормить

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

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

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

Карточки и списки являются распространенными компонентами макетов каналов.

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

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

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

Выполнение

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

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

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

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

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

,

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 3. Приложение для покупок с описаниями продуктов на вспомогательной панели.

Выполнение

Вспомогательный макет панели реализуется с использованием вспомогательного макета, такого как 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 для связи между основным содержимым и вспомогательной панелью, используя представления, фрагменты или их комбинацию.

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

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

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

,

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

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

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

Рисунок 4. Дерево решений канонической компоновки большого экрана.

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

• Material Design — канонические макеты