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

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

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

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

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

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

,

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

,

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

,

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

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

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

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

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

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

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

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

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

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

Выполнение

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

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

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

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

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

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

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

• 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 с выдвижной панелью .

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Кормить

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

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

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

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

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

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

Рисунок 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. 大屏幕规范布局决策树。

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

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