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

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

Время на чтение: 7 минут
Посмотреть профиль Francesco Romano
Francesco Romano Инженер по связям с разработчиками 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 – добавление двух новых классов размеров окна по ширине: "Большой" и "Очень большой".

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

Вот новые точки останова для ширины:

  • Большой: ширина от 1200 до 1600 dp.
  • Очень большой: ширина ≥ 1600 dp.
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

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

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

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

Для стандартных канонических макетов, таких как список и подробные сведения и вспомогательная панель, можно использовать сцены из адаптивной библиотеки Compose Material 3 (доступна в версии 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
    }
}

При создании NavDisplay можно использовать ThreePaneSceneStrategy вместе с другими стратегиями. Например, можно добавить 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 поможет создать адаптивные интерфейсы, например макеты со списком и подробными сведениями или с дополнительной панелью, которые автоматически адаптируются к конфигурациям окон на основе классов размеров окон или положений устройств. 

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

Чтобы включить новые точки останова, добавьте в файл сборки Gradle следующую строку:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Начало работы

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

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

Отзывы

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

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


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

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