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

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

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

Канонические макеты отзывчивы и адаптивны. Они поддерживают телефоны с небольшим экраном, а также планшеты, складные устройства и устройства 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. Дерево решений канонической компоновки большого экрана.

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

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