Канонические макеты — это проверенные, универсальные макеты, обеспечивающие оптимальное взаимодействие с пользователем на различных форм-факторах.
Стандартные макеты поддерживают телефоны с маленькими экранами, а также планшеты, складные устройства и устройства ChromeOS. Созданные в соответствии с принципами Material Design , эти макеты являются одновременно эстетичными и функциональными.
Фреймворк Android включает в себя специализированные компоненты, которые упрощают и делают надежной реализацию макетов.
Стандартные макеты создают привлекательные, повышающие производительность пользовательские интерфейсы, которые лежат в основе отличных приложений.
Подробный список
Формат «список-подробности» позволяет пользователям просматривать списки элементов, содержащих описательную, пояснительную или другую дополнительную информацию — подробную информацию об элементе.
Макет приложения разделяет окно на две расположенные рядом панели: одна для списка, другая для подробной информации. Пользователи выбирают элементы из списка, чтобы отобразить подробную информацию о них. Прямые ссылки в подробной информации открывают дополнительный контент в этой панели.
Расширенные по ширине окна (см. раздел «Использование классов размеров окна ») позволяют одновременно отображать список и подробную информацию. Выбор элемента списка обновляет панель с подробной информацией, отображая связанное с выбранным элементом содержимое.
На экранах средней и компактной ширины отображается либо список, либо подробная информация, в зависимости от взаимодействия пользователя с приложением. Когда виден только список, при выборе элемента списка вместо списка отображается подробная информация. Когда виден только подробный список, нажатие кнопки «Назад» снова отображает список.
Изменения конфигурации, такие как изменение ориентации устройства или размера окна приложения, могут изменить класс размера окна дисплея. Макет «список-подробности» реагирует соответствующим образом, сохраняя состояние приложения:
- Если расширенное окно, отображающее одновременно список и подробную информацию, сужается до среднего или компактного размера, подробная информация остается видимой, а список скрывается.
- Если на экране средней или компактной ширины видна только панель с подробной информацией, и размер окна увеличивается до «расширен», то список и подробная информация отображаются одновременно, при этом в списке указывается, что выбран элемент, соответствующий содержимому панели с подробной информацией.
- Если на экране средней или компактной ширины видна только панель списка, а при расширении отображается список и панель с подробной информацией в качестве заполнителя, то список и панель с подробными сведениями отображаются одновременно.
Функция «Список-подробности» идеально подходит для мессенджеров , менеджеров контактов , интерактивных медиабраузеров или любых приложений, где контент может быть организован в виде списка элементов, раскрывающих дополнительную информацию.
Выполнение
Декларативная парадигма Compose поддерживает логику класса размера окна, которая определяет, следует ли отображать список и панели сведений одновременно (когда класс размера окна ширины расширен) или только список или панель сведений (когда класс размера окна ширины средний). или компактный).
Чтобы обеспечить однонаправленный поток данных, поднимите все состояние , включая текущий класс размера окна и сведения о выбранном элементе списка (если есть), чтобы все компонуемые объекты имели доступ к данным и могли правильно отображаться.
При отображении только панели сведений в окнах небольшого размера добавьте BackHandler , чтобы удалить панель сведений и отобразить только панель списка. BackHandler не является частью общей навигации приложения, поскольку обработчик зависит от класса размера окна и выбранного подробного состояния.
Пример реализации см. в примере List-detail с Compose .
,Декларативная парадигма Compose поддерживает логику класса размера окна, которая определяет, следует ли отображать список и панели сведений одновременно (когда класс размера окна ширины расширен) или только список или панель сведений (когда класс размера окна ширины средний). или компактный).
Чтобы обеспечить однонаправленный поток данных, поднимите все состояние , включая текущий класс размера окна и сведения о выбранном элементе списка (если есть), чтобы все компонуемые объекты имели доступ к данным и могли правильно отображаться.
При отображении только панели сведений в окнах небольшого размера добавьте BackHandler , чтобы удалить панель сведений и отобразить только панель списка. BackHandler не является частью общей навигации приложения, поскольку обработчик зависит от класса размера окна и выбранного подробного состояния.
Пример реализации см. в примере List-detail с Compose .
Кормить
Макет ленты располагает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента.
Размер и расположение определяют взаимосвязь между элементами контента.
Группы контента создаются путем присвоения элементам одинакового размера и их размещения рядом друг с другом. Внимание к элементам привлекается за счет того, что они становятся больше, чем расположенные рядом элементы.
Карточки и списки — распространенные элементы оформления ленты новостей.
Макет ленты поддерживает отображение контента практически любого размера, поскольку сетка может адаптироваться от одной прокручиваемой колонки к многоколоночной прокручиваемой ленте контента.
Ленты новостей особенно хорошо подходят для новостных приложений и социальных сетей .
Выполнение
Лента состоит из большого количества элементов контента в контейнере с вертикальной прокруткой, расположенном в сетке. Ленивые списки эффективно отображают большое количество элементов в столбцах или строках. Ленивые сетки отображают элементы в сетках, поддерживая настройку размеров и интервалов элементов.
Настройте столбцы макета сетки на основе доступной области отображения, чтобы установить минимально допустимую ширину для элементов сетки. При определении элементов сетки настройте интервалы столбцов, чтобы выделить одни элементы над другими.
Для заголовков разделов, разделителей или других элементов, занимающих всю ширину канала, используйте maxLineSpan чтобы занять всю ширину макета.
На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .
Пример реализации см. в примере Feed with Compose .
,Лента состоит из большого количества элементов контента в контейнере с вертикальной прокруткой, расположенном в сетке. Ленивые списки эффективно отображают большое количество элементов в столбцах или строках. Ленивые сетки отображают элементы в сетках, поддерживая настройку размеров и интервалов элементов.
Настройте столбцы макета сетки на основе доступной области отображения, чтобы установить минимально допустимую ширину для элементов сетки. При определении элементов сетки настройте интервалы столбцов, чтобы выделить одни элементы над другими.
Для заголовков разделов, разделителей или других элементов, занимающих всю ширину канала, используйте maxLineSpan чтобы занять всю ширину макета.
На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .
Пример реализации см. в примере Feed with Compose .
Вспомогательная панель
Функция организации панелей позволяет распределить содержимое приложения по основным и дополнительным областям отображения.
Основная область отображения занимает большую часть окна приложения (обычно около двух третей) и содержит основной контент. Вторичная область отображения представляет собой панель, занимающую оставшуюся часть окна приложения и отображающую контент, дополняющий основной контент.
Вспомогательные макеты панелей хорошо работают на дисплеях с увеличенной шириной (см. раздел «Использование классов размеров окон ») в альбомной ориентации. Дисплеи средней или компактной ширины поддерживают отображение как основной, так и дополнительной областей отображения, если контент адаптируется к более узким пространствам экрана или если дополнительный контент может быть изначально скрыт в нижнем или боковом окне, доступном с помощью элемента управления, такого как меню или кнопка.
Макет вспомогательной панели отличается от макета «список-подробности» соотношением основного и второстепенного содержимого. Содержимое второстепенной панели имеет смысл только по отношению к основному содержимому; например, окно инструментов во вспомогательной панели само по себе не имеет значения. Однако дополнительное содержимое в панели подробностей макета «список-подробности» имеет смысл даже без основного содержимого, например, описание товара из списка товаров.
Варианты использования вспомогательной панели включают:
- Приложения для повышения производительности: документ или электронная таблица, сопровождаемые комментариями рецензента во вспомогательной панели.
- Медиаприложения: потоковое видео, дополненное списком похожих видеороликов во вспомогательной панели, или отображение музыкального альбома, дополненного плейлистом.
- Инструменты и настройки: Инструмент для редактирования медиафайлов с палитрами, эффектами и другими настройками в панели поддержки.
Выполнение
Compose поддерживает логику класса размера окна, которая позволяет вам определить, следует ли отображать как основной контент, так и вспомогательный контент одновременно, или разместить вспомогательный контент в альтернативном месте.
Поднимите все состояние, включая текущий класс размера окна и информацию, связанную с данными в основном содержимом и вспомогательном содержимом.
Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.
Пример реализации см. в разделе «Поддержка» с примером Compose .
,Compose поддерживает логику класса размера окна, которая позволяет вам определить, следует ли отображать как основной контент, так и вспомогательный контент одновременно, или разместить вспомогательный контент в альтернативном месте.
Поднимите все состояние, включая текущий класс размера окна и информацию, связанную с данными в основном содержимом и вспомогательном содержимом.
Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.
Пример реализации см. в разделе «Поддержка» с примером Compose .
Дополнительные ресурсы
- Материальный дизайн — Канонические макеты
Канонические макеты — это проверенные, универсальные макеты, обеспечивающие оптимальное взаимодействие с пользователем на различных форм-факторах.
Стандартные макеты поддерживают телефоны с маленькими экранами, а также планшеты, складные устройства и устройства ChromeOS. Созданные в соответствии с принципами Material Design , эти макеты являются одновременно эстетичными и функциональными.
Фреймворк Android включает в себя специализированные компоненты, которые упрощают и делают надежной реализацию макетов.
Стандартные макеты создают привлекательные, повышающие производительность пользовательские интерфейсы, которые лежат в основе отличных приложений.
Подробный список
Формат «список-подробности» позволяет пользователям просматривать списки элементов, содержащих описательную, пояснительную или другую дополнительную информацию — подробную информацию об элементе.
Макет приложения разделяет окно на две расположенные рядом панели: одна для списка, другая для подробной информации. Пользователи выбирают элементы из списка, чтобы отобразить подробную информацию о них. Прямые ссылки в подробной информации открывают дополнительный контент в этой панели.
Расширенные по ширине окна (см. раздел «Использование классов размеров окна ») позволяют одновременно отображать список и подробную информацию. Выбор элемента списка обновляет панель с подробной информацией, отображая связанное с выбранным элементом содержимое.
На экранах средней и компактной ширины отображается либо список, либо подробная информация, в зависимости от взаимодействия пользователя с приложением. Когда виден только список, при выборе элемента списка вместо списка отображается подробная информация. Когда виден только подробный список, нажатие кнопки «Назад» снова отображает список.
Изменения конфигурации, такие как изменение ориентации устройства или размера окна приложения, могут изменить класс размера окна дисплея. Макет «список-подробности» реагирует соответствующим образом, сохраняя состояние приложения:
- Если расширенное окно, отображающее одновременно список и подробную информацию, сужается до среднего или компактного размера, подробная информация остается видимой, а список скрывается.
- Если на экране средней или компактной ширины видна только панель с подробной информацией, и размер окна увеличивается до «расширен», то список и подробная информация отображаются одновременно, при этом в списке указывается, что выбран элемент, соответствующий содержимому панели с подробной информацией.
- Если на экране средней или компактной ширины видна только панель списка, а при расширении отображается список и панель с подробной информацией в качестве заполнителя, то список и панель с подробными сведениями отображаются одновременно.
Функция «Список-подробности» идеально подходит для мессенджеров , менеджеров контактов , интерактивных медиабраузеров или любых приложений, где контент может быть организован в виде списка элементов, раскрывающих дополнительную информацию.
Выполнение
Декларативная парадигма Compose поддерживает логику класса размера окна, которая определяет, следует ли отображать список и панели сведений одновременно (когда класс размера окна ширины расширен) или только список или панель сведений (когда класс размера окна ширины средний). или компактный).
Чтобы обеспечить однонаправленный поток данных, поднимите все состояние , включая текущий класс размера окна и сведения о выбранном элементе списка (если есть), чтобы все компонуемые объекты имели доступ к данным и могли правильно отображаться.
При отображении только панели сведений в окнах небольшого размера добавьте BackHandler , чтобы удалить панель сведений и отобразить только панель списка. BackHandler не является частью общей навигации приложения, поскольку обработчик зависит от класса размера окна и выбранного подробного состояния.
Пример реализации см. в примере List-detail с Compose .
,Декларативная парадигма Compose поддерживает логику класса размера окна, которая определяет, следует ли отображать список и панели сведений одновременно (когда класс размера окна ширины расширен) или только список или панель сведений (когда класс размера окна ширины средний). или компактный).
Чтобы обеспечить однонаправленный поток данных, поднимите все состояние , включая текущий класс размера окна и сведения о выбранном элементе списка (если есть), чтобы все компонуемые объекты имели доступ к данным и могли правильно отображаться.
При отображении только панели сведений в окнах небольшого размера добавьте BackHandler , чтобы удалить панель сведений и отобразить только панель списка. BackHandler не является частью общей навигации приложения, поскольку обработчик зависит от класса размера окна и выбранного подробного состояния.
Пример реализации см. в примере List-detail с Compose .
Кормить
Макет ленты располагает эквивалентные элементы контента в настраиваемой сетке для быстрого и удобного просмотра большого объема контента.
Размер и расположение определяют взаимосвязь между элементами контента.
Группы контента создаются путем присвоения элементам одинакового размера и их размещения рядом друг с другом. Внимание к элементам привлекается за счет того, что они становятся больше, чем расположенные рядом элементы.
Карточки и списки — распространенные элементы оформления ленты новостей.
Макет ленты поддерживает отображение контента практически любого размера, поскольку сетка может адаптироваться от одной прокручиваемой колонки к многоколоночной прокручиваемой ленте контента.
Ленты новостей особенно хорошо подходят для новостных приложений и социальных сетей .
Выполнение
Лента состоит из большого количества элементов контента в контейнере с вертикальной прокруткой, расположенном в сетке. Ленивые списки эффективно отображают большое количество элементов в столбцах или строках. Ленивые сетки отображают элементы в сетках, поддерживая настройку размеров и интервалов элементов.
Настройте столбцы макета сетки на основе доступной области отображения, чтобы установить минимально допустимую ширину для элементов сетки. При определении элементов сетки настройте интервалы столбцов, чтобы выделить одни элементы над другими.
Для заголовков разделов, разделителей или других элементов, занимающих всю ширину канала, используйте maxLineSpan чтобы занять всю ширину макета.
На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .
Пример реализации см. в примере Feed with Compose .
,Лента состоит из большого количества элементов контента в контейнере с вертикальной прокруткой, расположенном в сетке. Ленивые списки эффективно отображают большое количество элементов в столбцах или строках. Ленивые сетки отображают элементы в сетках, поддерживая настройку размеров и интервалов элементов.
Настройте столбцы макета сетки на основе доступной области отображения, чтобы установить минимально допустимую ширину для элементов сетки. При определении элементов сетки настройте интервалы столбцов, чтобы выделить одни элементы над другими.
Для заголовков разделов, разделителей или других элементов, занимающих всю ширину канала, используйте maxLineSpan чтобы занять всю ширину макета.
На дисплеях компактной ширины, на которых недостаточно места для отображения более одного столбца, LazyVerticalGrid ведет себя так же, как LazyColumn .
Пример реализации см. в примере Feed with Compose .
Вспомогательная панель
Функция организации панелей позволяет распределить содержимое приложения по основным и дополнительным областям отображения.
Основная область отображения занимает большую часть окна приложения (обычно около двух третей) и содержит основной контент. Вторичная область отображения представляет собой панель, занимающую оставшуюся часть окна приложения и отображающую контент, дополняющий основной контент.
Вспомогательные макеты панелей хорошо работают на дисплеях с увеличенной шириной (см. раздел «Использование классов размеров окон ») в альбомной ориентации. Дисплеи средней или компактной ширины поддерживают отображение как основной, так и дополнительной областей отображения, если контент адаптируется к более узким пространствам экрана или если дополнительный контент может быть изначально скрыт в нижнем или боковом окне, доступном с помощью элемента управления, такого как меню или кнопка.
Макет вспомогательной панели отличается от макета «список-подробности» соотношением основного и второстепенного содержимого. Содержимое второстепенной панели имеет смысл только по отношению к основному содержимому; например, окно инструментов во вспомогательной панели само по себе не имеет значения. Однако дополнительное содержимое в панели подробностей макета «список-подробности» имеет смысл даже без основного содержимого, например, описание товара из списка товаров.
Варианты использования вспомогательной панели включают:
- Приложения для повышения производительности: документ или электронная таблица, сопровождаемые комментариями рецензента во вспомогательной панели.
- Медиаприложения: потоковое видео, дополненное списком похожих видеороликов во вспомогательной панели, или отображение музыкального альбома, дополненного плейлистом.
- Инструменты и настройки: Инструмент для редактирования медиафайлов с палитрами, эффектами и другими настройками в панели поддержки.
Выполнение
Compose поддерживает логику класса размера окна, которая позволяет вам определить, следует ли отображать как основной контент, так и вспомогательный контент одновременно, или разместить вспомогательный контент в альтернативном месте.
Поднимите все состояние, включая текущий класс размера окна и информацию, связанную с данными в основном содержимом и вспомогательном содержимом.
Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.
Пример реализации см. в разделе «Поддержка» с примером Compose .
,Compose поддерживает логику класса размера окна, которая позволяет вам определить, следует ли отображать как основной контент, так и вспомогательный контент одновременно, или разместить вспомогательный контент в альтернативном месте.
Поднимите все состояние, включая текущий класс размера окна и информацию, связанную с данными в основном содержимом и вспомогательном содержимом.
Для дисплеев компактной ширины размещайте вспомогательный контент под основным контентом или внутри нижнего листа. Для средней и расширенной ширины размещайте вспомогательный контент рядом с основным контентом, размер которого соответствует размеру контента и доступному пространству. Для средней ширины разделите пространство дисплея поровну между основным и вспомогательным контентом. Для увеличения ширины отведите 70 % места для основного контента и 30 % для вспомогательного контента.
Пример реализации см. в разделе «Поддержка» с примером Compose .
Дополнительные ресурсы
- Материальный дизайн — Канонические макеты