Nowości o produktach

Płynne rozszerzanie działania urządzeń z Androidem na podłączone wyświetlacze

7 min czytania
r.
Francesco Romano
Inżynier ds. relacji z deweloperami, Android

Z radością informujemy o ważnym kroku w kierunku zbliżenia do siebie komputerów mobilnych i stacjonarnych w Androidzie: obsługa podłączonych wyświetlaczy jest już ogólnie dostępna w wersji Android 16 QPR3!

Jak pokazano na Google I/O 2025, podłączone wyświetlacze umożliwiają użytkownikom podłączenie urządzeń z Androidem do monitora zewnętrznego i natychmiastowe uzyskanie dostępu do trybu okien na pulpicie. Aplikacje można używać w oknach o dowolnym rozmiarze lub w oknach zmaksymalizowanych, a użytkownicy mogą wykonywać wiele zadań jednocześnie, tak jak w przypadku systemu operacyjnego na komputerze.

Google i Samsung współpracowały, aby zapewnić płynne i wydajne korzystanie z trybu okien na pulpicie na urządzeniach z ekosystemu Android z systemem Android 16 podłączonych do wyświetlacza zewnętrznego.
Jest to teraz ogólnie dostępne na obsługiwanych urządzeniach* dla użytkowników, którzy mogą podłączyć obsługiwane telefony Pixel i Samsung do monitorów zewnętrznych, co stwarza nowe możliwości tworzenia bardziej angażujących i wydajniejszych aplikacji, które dostosowują się do różnych formatów.

Jak to działa?

Gdy obsługiwany telefon z Androidem lub urządzenie składane jest podłączone do wyświetlacza zewnętrznego, na tym wyświetlaczu rozpoczyna się nowa sesja na pulpicie.

Korzystanie z podłączonego wyświetlacza jest podobne do korzystania z komputera, w tym z paska zadań, na którym wyświetlane są aktywne aplikacje i który umożliwia przypinanie aplikacji w celu szybkiego dostępu. Użytkownicy mogą jednocześnie uruchamiać wiele aplikacji obok siebie w oknach o dowolnym rozmiarze na podłączonym wyświetlaczu.

materialDisplay.gif

Telefon podłączony do wyświetlacza zewnętrznego z sesją na pulpicie, podczas gdy telefon zachowuje swój stan.

Gdy urządzenie obsługujące tryb okien na pulpicie (np. tablet Samsung Galaxy Tab S11) jest podłączone do wyświetlacza zewnętrznego, sesja na pulpicie jest rozszerzana na oba wyświetlacze, co zapewnia jeszcze większą przestrzeń roboczą. Oba wyświetlacze działają wtedy jako jeden ciągły system, co umożliwia swobodne przenoszenie okien aplikacji, treści i kursora między wyświetlaczami.

materialDisplay2.gif

Tablet podłączony do wyświetlacza zewnętrznego, który rozszerza sesję na pulpicie na oba wyświetlacze.

Dlaczego jest to ważne?

W wersji Android 16 QPR3 sfinalizowaliśmy zachowania okien, interakcje z paskiem zadań i zgodność z urządzeniami wejściowymi (mysz i klawiatura), które definiują korzystanie z podłączonego wyświetlacza. Dodaliśmy też mechanizmy zapewniające zgodność , aby skalować okna i unikać ponownego uruchamiania aplikacji podczas przełączania wyświetlaczy.


Jeśli Twoja aplikacja jest tworzona zgodnie z zasadami projektowania adaptacyjnego, będzie automatycznie wyglądać i działać jak aplikacja na komputerze, a użytkownicy będą się czuć jak u siebie. Jeśli aplikacja jest zablokowana w orientacji pionowej lub zakłada interfejs tylko dotykowy, nadszedł czas na jej modernizację.

Zwróć szczególną uwagę na te sprawdzone metody, które zapewniają optymalne działanie aplikacji na podłączonych wyświetlaczach:

  • Nie zakładaj stałego obiektu Display: obiekt Display powiązany z kontekstem aplikacji może się zmienić, gdy okno aplikacji zostanie przeniesione na wyświetlacz zewnętrzny lub gdy zmieni się konfiguracja wyświetlacza. Aplikacja powinna prawidłowo obsługiwać zdarzenia zmiany konfiguracji i dynamicznie wysyłać zapytania o dane wyświetlacza, zamiast je buforować.
  • Uwzględnij zmiany konfiguracji gęstości: wyświetlacze zewnętrzne mogą mieć znacznie inną gęstość pikseli niż ekran urządzenia głównego. Upewnij się, że układy i zasoby prawidłowo dostosowują się do tych zmian, aby zachować przejrzystość i użyteczność interfejsu. W przypadku układów używaj pikseli niezależnych od gęstości (dp), udostępniaj zasoby dostosowane do gęstości i upewnij się, że interfejs jest odpowiednio skalowany.
  • Prawidłowo obsługuj urządzenia zewnętrzne: gdy użytkownicy podłączają się do monitora zewnętrznego, często tworzą środowisko bardziej przypominające komputer. Często wiąże się to z używaniem klawiatur zewnętrznych, myszy, trackpadów, kamer internetowych, mikrofonów i głośników. Ulepsz obsługę interakcji z klawiaturąmyszą.

Tworzenie przyszłości komputerów za pomocą nowoczesnych narzędzi

Udostępniamy kilka narzędzi, które pomogą Ci tworzyć aplikacje na komputery. Podsumujmy najnowsze aktualizacje naszych podstawowych bibliotek adaptacyjnych.

Nowe klasy rozmiarów okien: duża i bardzo duża

Największą nowością w Jetpack WindowManager 1.5.0 jest dodanie 2 nowych klas rozmiarów okien: dużej i bardzo dużej.

Klasy rozmiarów okien to oficjalny, subiektywny zestaw punktów przerwania widocznego obszaru, który pomaga projektować i tworzyć układy adaptacyjne. W wersji 1.5.0 rozszerzamy te wskazówki na ekrany, które są większe niż typowe tablety.

Oto nowe punkty przerwania szerokości:

  • Duża: szerokość od 1200 dp do 1600 dp.
  • Bardzo duża: szerokość ≥ 1600 dp.
windowClasses.png

Różne klasy rozmiarów okien w zależności od szerokości wyświetlacza.

Na bardzo dużych powierzchniach samo skalowanie układu rozszerzonego tabletu nie zawsze zapewnia najlepsze wrażenia użytkownika. Na przykład klient poczty e-mail może wygodnie wyświetlać 2 panele (skrzynkę pocztową i wiadomość) w klasie rozmiaru okna Rozszerzony. Ale na bardzo dużym monitorze komputerowym klient poczty e-mail może elegancko wyświetlać 3 lub nawet 4 panele, np. skrzynkę pocztową, listę wiadomości, pełną treść wiadomości oraz panel kalendarza lub zadań.

Aby uwzględnić nowe klasy rozmiarów okien w projekcie, po prostu wywołaj funkcję z zestawu WindowSizeClass.BREAKPOINTS_V2 zamiast WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Następnie zastosuj odpowiedni układ, gdy masz pewność, że aplikacja ma co najmniej tyle miejsca:

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

Tworzenie układów adaptacyjnych za pomocą Jetpack Navigation 3

Navigation 3 to najnowszy dodatek do kolekcji Jetpack. Navigation 3, która właśnie osiągnęła pierwszą stabilną wersję, to zaawansowana biblioteka nawigacji zaprojektowana do współpracy z Compose.

Navigation 3 to także doskonałe narzędzie do tworzenia układów adaptacyjnych, ponieważ umożliwia wyświetlanie wielu miejsc docelowych jednocześnie i płynne przełączanie się między tymi układami.

Ten system zarządzania przepływem interfejsu aplikacji jest oparty na scenach. Scena to układ, który wyświetla jednocześnie co najmniej 1 miejsce docelowe. A SceneStrategy określa, czy można utworzyć scenę. Łączenie instancji SceneStrategy umożliwia tworzenie i wyświetlanie różnych scen dla różnych rozmiarów ekranu i konfiguracji urządzenia.

W przypadku gotowych układów kanonicznych, takich jak lista-szczegóły i panel pomocniczy, możesz używać scen z biblioteki Compose Material 3 Adaptive (dostępnej w wersji 1.3 i nowszych).

Możesz też łatwo tworzyć własne sceny niestandardowe, modyfikując przepisy na sceny lub zaczynając od zera. Rozważmy na przykład scenę, która wyświetla 3 panele obok siebie:

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()
            }
        }
    }

W tym przypadku możesz zdefiniować SceneStrategy, aby wyświetlać 3 panele, jeśli szerokość okna jest wystarczająca, a wpisy z listy wstecznej deklarują, że obsługują wyświetlanie w scenie z 3 panelami.

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
    }
}

Podczas tworzenia NavDisplay możesz używać ThreePaneSceneStrategy z innymi strategiami. Możemy na przykład dodać TwoPaneStrategy, aby wyświetlać 2 panele obok siebie, gdy nie ma wystarczająco dużo miejsca na 3 panele.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

Jeśli nie ma wystarczająco dużo miejsca na wyświetlenie 3 lub 2 paneli, obie nasze niestandardowe strategie scen zwracają wartość null.W takim przypadku NavDisplay wraca do wyświetlania ostatniego wpisu na stosie wstecznym w jednym panelu za pomocą SinglePaneScene.

Dzięki scenom i strategiom możesz dodawać do aplikacji układy z 1, 2 i 3 panelami.

adaptivepane.gif

Aplikacja adaptacyjna wyświetlająca nawigację z 3 panelami na szerokich ekranach.

Więcej informacji o tworzeniu niestandardowych układów za pomocą scen w Navigation 3 znajdziesz w dokumentacji: jak to zrobić.

Samodzielne układy adaptacyjne

Jeśli potrzebujesz samodzielnego układu, biblioteka Compose Material 3 Adaptive pomoże Ci tworzyć adaptacyjne interfejsy, takie jak układy lista-szczegóły i panel pomocniczy, które automatycznie dostosowują się do konfiguracji okna na podstawie klas rozmiarów okien lub pozycji urządzenia. 

Dobra wiadomość jest taka, że biblioteka jest już aktualna i zawiera nowe punkty przerwania. Od wersji 1.2 domyślne dyrektywy rusztowania panelu obsługują klasy rozmiarów okien o dużej i bardzo dużej szerokości.

Musisz tylko wyrazić zgodę, deklarując w pliku kompilacji Gradle, że chcesz używać nowych punktów przerwania:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Pierwsze kroki

Poznaj funkcję podłączonego wyświetlacza w najnowszej wersji Androida. Pobierz Androida 16 QPR3 na obsługiwane urządzenie, a następnie podłącz je do monitora zewnętrznego, aby rozpocząć testowanie aplikacji już dziś. 

Aby dowiedzieć się więcej o wdrażaniu tych sprawdzonych metod, zapoznaj się z zaktualizowaną dokumentacją dotyczącą obsługi wielu wyświetlaczyzarządzania oknami.

Prześlij opinię

Twoja opinia jest dla nas bardzo ważna, ponieważ stale ulepszamy korzystanie z podłączonego wyświetlacza na komputerze. Podziel się swoimi przemyśleniami i zgłoś wszelkie problemy za pomocą oficjalnych kanałów opinii.

Staramy się, aby Android był wszechstronną platformą, która dostosowuje się do wielu sposobów, w jakie użytkownicy chcą korzystać z aplikacji i urządzeń. Ulepszenia obsługi podłączonych wyświetlaczy to kolejny krok w tym kierunku. Uważamy, że użytkownicy będą zachwyceni aplikacjami na komputery, które stworzysz.


*Uwaga: w momencie pisania tego artykułu podłączone wyświetlacze są obsługiwane na urządzeniach z serii Pixel 8, 9 i 10 oraz na wielu urządzeniach Samsung, w tym S26, Fold7, Flip7 i Tab S11.

Autor:

Czytaj dalej