Новости о продуктах

Устройства Android плавно интегрируются с подключенными дисплеями.

7 минут чтения
Francesco Romano
Инженер по связям с разработчиками, Android

Мы рады объявить о важном этапе сближения мобильных и настольных вычислительных систем на Android: поддержка подключенных дисплеев стала общедоступной с выходом Android 16 QPR3 !

Как было показано на Google I/O 2025 , подключенные дисплеи позволяют пользователям подключать свои устройства Android к внешнему монитору и мгновенно получать доступ к оконной среде рабочего стола. Приложения можно использовать в окнах произвольной формы или развернутых на весь экран, а пользователи могут выполнять многозадачность так же, как и в настольной операционной системе.

Google и Samsung объединили усилия, чтобы обеспечить удобный и мощный интерфейс работы с окнами рабочего стола на устройствах всей экосистемы Android под управлением Android 16 при подключении к внешнему дисплею.
Теперь эта функция общедоступна на поддерживаемых устройствах* для пользователей, которые могут подключать свои поддерживаемые телефоны Pixel и Samsung к внешним мониторам, что открывает новые возможности для создания более привлекательных и продуктивных приложений, адаптирующихся к различным форм-факторам.

Как это работает?

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

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

materialDisplay.gif

Телефон подключен к внешнему дисплею, на котором отображается рабочий стол, при этом телефон сохраняет собственное состояние.

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

materialDisplay2.gif

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

Почему это важно?

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


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

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

  • Не следует предполагать, что объект Display является постоянным : объект Display , связанный с контекстом вашего приложения, может изменяться при перемещении окна приложения на внешний дисплей или при изменении конфигурации дисплея. Ваше приложение должно корректно обрабатывать события изменения конфигурации и динамически запрашивать метрики дисплея, а не кэшировать их.
  • Учитывайте изменения плотности пикселей : внешние дисплеи могут иметь совершенно иную плотность пикселей, чем основной экран устройства. Убедитесь, что ваши макеты и ресурсы правильно адаптируются к этим изменениям, чтобы сохранить четкость и удобство использования пользовательского интерфейса. Используйте пиксели (dp), не зависящие от плотности, для макетов, предоставляйте ресурсы, специфичные для плотности, и обеспечьте соответствующее масштабирование пользовательского интерфейса.
  • Обеспечьте корректную поддержку внешних периферийных устройств : при подключении к внешнему монитору пользователи часто создают среду, более похожую на рабочий стол. Это часто включает использование внешних клавиатур, мышей, тачпадов, веб-камер, микрофонов и динамиков. Улучшите поддержку взаимодействия с клавиатурой и мышью .

Создание настольных приложений будущего с использованием современных инструментов.

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

Новые категории размеров окон: Большие и Очень большие.

Самое значительное обновление в Jetpack WindowManager 1.5.0 — это добавление двух новых классов ширины окон: Large и Extra-large.

Классы размеров окон — это наш официальный, регламентированный набор контрольных точек области просмотра, который помогает вам проектировать и разрабатывать адаптивные макеты. В версии 1.5.0 мы расширяем эти рекомендации для экранов, размеры которых выходят за рамки типичных планшетов.

Вот новые контрольные точки ширины:

  • Большой размер: для ширины от 1200 до 1600 dp
  • Очень большой размер: для ширины ≥1600dp
windowClasses.png

Различные классы размеров окон в зависимости от ширины экрана.

На очень больших поверхностях простое увеличение масштаба расширенного макета на планшете не всегда обеспечивает наилучший пользовательский опыт. Например, почтовый клиент может без проблем отображать две панели (почтовый ящик и сообщение) в классе размера окна «Расширенный». Но на очень большом настольном мониторе почтовый клиент может элегантно отображать три или даже четыре панели, например, почтовый ящик, список сообщений, полное содержимое сообщения и панель календаря/задач, — всё одновременно.

Чтобы добавить новые классы размеров окон в свой проект, просто вызовите функцию из набора WindowSizeClass.BREAKPOINTS_V2 вместо WindowSizeClass.BREAKPOINTS_V1 :

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Затем примените правильную компоновку, когда убедитесь, что в вашем приложении достаточно места:

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Создавайте адаптивные макеты с помощью Jetpack Navigation 3.

Navigation 3 — это новейшее дополнение к коллекции Jetpack. Navigation 3, только что вышедший в первой стабильной версии, представляет собой мощную навигационную библиотеку, разработанную для работы с Compose.

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

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

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

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

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

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

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

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

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

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

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

adaptivepane.gif

Адаптивное приложение, отображающее трехпанельную навигацию на широких экранах.

Ознакомьтесь с документацией, чтобы узнать больше о создании пользовательских макетов с помощью сцен в Navigation 3 .

Автономные адаптивные макеты

Если вам нужен автономный макет, библиотека Compose Material 3 Adaptive поможет вам создать адаптивные пользовательские интерфейсы, такие как макеты списка и подробных сведений, а также вспомогательные макеты панелей, которые автоматически адаптируются к конфигурации окна в зависимости от класса размера окна или положения устройства.

Хорошая новость в том, что библиотека уже обновлена ​​до новых контрольных точек! Начиная с версии 1.2 , функции директивы построения панели по умолчанию поддерживают классы размеров окна Large и Extra-large width.

Для включения новых точек останова достаточно указать это в файле сборки Gradle:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Начиная

Ознакомьтесь с функцией подключения дисплея в последней версии Android. Установите Android 16 QPR3 на поддерживаемое устройство, подключите его к внешнему монитору и начните тестирование своего приложения уже сегодня!

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

Обратная связь

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

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


*Примечание: На момент написания статьи поддержка подключения дисплеев реализована на устройствах серий Pixel 8, 9, 10, а также на широком спектре устройств Samsung, включая S26, Fold7, Flip7 и Tab S11.

    Автор:

    Продолжить чтение