Канонические макеты на большом экране

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

Изображение устройств с большим экраном и канонической компоновкой.

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

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

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

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

UX-дизайн для больших экранов

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

Посетите галерею больших экранов, чтобы увидеть тщательно подобранную коллекцию макетов больших экранов.

Совершить экскурсию
Устройства с большим экраном, демонстрирующие различные макеты.

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

Каркас подробного макета списка.

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

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

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

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

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

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

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

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

Выполнение

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

Сочинить

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

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

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

Пример реализации см. в примере List-detail с Compose .

Виды и фрагменты

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

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

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

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

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

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

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

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

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

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

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

Кормить

Каркас макета ленты.

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

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

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

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

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

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

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

Выполнение

Сочинить

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

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

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

На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .

Пример реализации см. в примере Feed with Compose .

Виды и фрагменты

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

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

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

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

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

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

Каркас макета поддерживающей панели.

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

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

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

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

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

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

Выполнение

Сочинить

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

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

Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.

Пример реализации см. в разделе «Поддержка» с примером Compose .

Виды и фрагменты

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

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

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

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

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

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

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

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

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

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

{% дословно %} {% дословно %} {% дословно %} {% endverbatim %} ,

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

Изображение устройств с большим экраном и канонической компоновкой.

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

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

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

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

UX-дизайн для больших экранов

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

Посетите галерею больших экранов, чтобы увидеть тщательно подобранную коллекцию макетов больших экранов.

Совершить экскурсию
Устройства с большим экраном, демонстрирующие различные макеты.

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

Каркас подробного макета списка.

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

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

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

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

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

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

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

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

Выполнение

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

Сочинить

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

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

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

Пример реализации см. в примере List-detail с Compose .

Виды и фрагменты

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

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

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

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

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

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

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

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

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

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

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

Кормить

Каркас макета ленты.

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

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

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

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

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

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

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

Выполнение

Сочинить

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

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

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

На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .

Пример реализации см. в примере Feed with Compose .

Виды и фрагменты

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

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

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

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

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

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

Каркас макета поддерживающей панели.

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

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

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

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

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

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

Выполнение

Сочинить

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

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

Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.

Пример реализации см. в разделе «Поддержка» с примером Compose .

Виды и фрагменты

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

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

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

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

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

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

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

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

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

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

{% дословно %} {% дословно %} {% дословно %} {% endverbatim %} ,

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

Изображение устройств с большим экраном и канонической компоновкой.

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

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

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

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

UX-дизайн для больших экранов

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

Посетите галерею больших экранов, чтобы увидеть тщательно подобранную коллекцию макетов больших экранов.

Совершить экскурсию
Устройства с большим экраном, демонстрирующие различные макеты.

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

Каркас подробного макета списка.

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

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

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

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

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

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

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

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

Выполнение

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

Сочинить

Декларативная парадигма композиции поддерживает логику класса размера окна, которая определяет, показывать ли показатели списка и детализации одновременно (когда класс размер ширины расширяется) или просто панель списка или детализации (когда класс размер окна ширины является средним или компактный).

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

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

Для примера реализации см. В списке Detail с образцом Compose .

Виды и фрагменты

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

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

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

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

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

Внедрение деятельности

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

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

Внедрение активности поддерживается на Android 12L (API -уровне 32) и выше, но также может быть доступно на более низких уровнях API, если он реализован производителями устройств. Когда встраивание активности недоступно на устройстве, поведение резервного отступления приводит к действию списка или подробной деятельности, занимающей все окно приложения на основе взаимодействия с пользователем с приложением.

Для получения дополнительной информации см. Внедрение деятельности .

Для примера реализации см. В списке-полухлинге с образцом встраивания деятельности .

Кормить

Каркас макета подачи.

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

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

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

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

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

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

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

Выполнение

Сочинить

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

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

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

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

Для примера реализации см. Feed с образцом Compose .

Виды и фрагменты

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

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

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

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

Для примера реализации см. Пример Feed with Views .

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

Каркас поддерживающей пластинкой.

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

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

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

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

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

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

Выполнение

Сочинить

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

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

Для дисплеев компактной ширины поместите поддерживающий контент под основным содержанием или в нижний лист. Для средней и расширенной ширины поместите вспомогательный контент рядом с основным контентом, размером с соответствующего размера на основе доступного контента и места. Для средней ширины разделите пространство дисплея в равной степени между основным и поддерживающим контентом. Для расширенной ширины дайте 70% места для основного контента, 30% вспомогательному контенту.

Для примера реализации см. Вспомогательную панель с образцом Compose .

Виды и фрагменты

Поддерживающая макет панели реализуется с использованием Helper Mayout, такой как LinearLayout или ConstraintLayout . Установите классы размера окна, которые делят количество горизонтального пространства отображения, доступное для вашего приложения на три категории: Compact (<600DP), Medium (> = 600DP) и расширен (> = 840dp).

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

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

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

Для примеров реализации см. Следующие образцы:

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

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

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

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

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

{ % Vorbatim %} { % endverbatim %} { % Vorbatim %} { % endverbatim %},

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

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

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

Структура Android включает в себя специализированные компоненты, которые делают реализацию макетов простыми и надежными с использованием видов или JetPack Compose.

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

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

UX Designs для больших экранов

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

Посетите большую экранную галерею, чтобы увидеть кураторскую коллекцию больших макетов экрана.

Совершить экскурсию
Большие экранные устройства, показывающие различные макеты.

Списка-detail

Каркас макета списка-detail.

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

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

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

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

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

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

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

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

Выполнение

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

Сочинить

Декларативная парадигма композиции поддерживает логику класса размера окна, которая определяет, показывать ли показатели списка и детализации одновременно (когда класс размер ширины расширяется) или просто панель списка или детализации (когда класс размер окна ширины является средним или компактный).

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

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

Для примера реализации см. В списке Detail с образцом Compose .

Виды и фрагменты

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

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

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

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

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

Внедрение деятельности

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

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

Внедрение активности поддерживается на Android 12L (API -уровне 32) и выше, но также может быть доступно на более низких уровнях API, если он реализован производителями устройств. Когда встраивание активности недоступно на устройстве, поведение резервного отступления приводит к действию списка или подробной деятельности, занимающей все окно приложения на основе взаимодействия с пользователем с приложением.

Для получения дополнительной информации см. Внедрение деятельности .

Для примера реализации см. В списке-полухлинге с образцом встраивания деятельности .

Кормить

Каркас макета подачи.

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

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

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

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

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

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

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

Выполнение

Сочинить

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

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

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

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

Для примера реализации см. Feed с образцом Compose .

Виды и фрагменты

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

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

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

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

Для примера реализации см. Пример Feed with Views .

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

Каркас поддерживающей пластинкой.

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

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

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

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

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

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

Выполнение

Сочинить

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

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

Для дисплеев компактной ширины поместите поддерживающий контент под основным содержанием или в нижний лист. Для средней и расширенной ширины поместите вспомогательный контент рядом с основным контентом, размером с соответствующего размера на основе доступного контента и места. Для средней ширины разделите пространство дисплея в равной степени между основным и поддерживающим контентом. Для расширенной ширины дайте 70% места для основного контента, 30% вспомогательному контенту.

Для примера реализации см. Вспомогательную панель с образцом Compose .

Виды и фрагменты

Поддерживающая макет панели реализуется с использованием Helper Mayout, такой как LinearLayout или ConstraintLayout . Установите классы размера окна, которые делят количество горизонтального пространства отображения, доступное для вашего приложения на три категории: Compact (<600DP), Medium (> = 600DP) и расширен (> = 840dp).

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

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

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

Для примеров реализации см. Следующие образцы:

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

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

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

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

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

{ % Vorbatim %} { % endverbatim %} { % Vorbatim %} { % endverbatim %}