Informuj o zwijaniu aplikacji

Duże, rozłożone wyświetlacze i unikalne stany złożenia umożliwiają korzystanie z nowych funkcji na urządzeniach składanych. Aby aplikacja była dostosowana do składania w Jetpack Compose, użyj biblioteki Compose Material 3 Adaptive, która udostępnia interfejsy API do obsługi funkcji okien urządzeń składanych, takich jak zagięcia, zawiasy i pozycje urządzenia. Gdy aplikacja jest dostosowana do składania, może dostosować swój układ, aby uniknąć umieszczania ważnych treści w obszarze zagięć lub zawiasów, i używać zagięć i zawiasów jako naturalnych separatorów.

Informacje o tym, czy urządzenie obsługuje konfiguracje takie jak pozycja stołu lub książki, mogą pomóc w podejmowaniu decyzji o obsłudze różnych układów lub udostępnianiu określonych funkcji.

Informacje o oknie

W Jetpack Compose użyj funkcji kompozycyjnej collectFoldingFeaturesAsState(), aby obserwować informacje o składaniu okna. collectFoldingFeaturesAsState() zbiera bieżące funkcje składania okna z WindowInfoTracker do stanu Compose State zawierającego listę FoldingFeature obiektów.

Ponieważ collectFoldingFeaturesAsState() zwraca State Compose, elementy kompozycyjne są automatycznie ponownie komponowane, gdy zmienia się stan złożenia lub pozycja urządzenia , bez konieczności ręcznego zarządzania cyklem życia lub zbierania danych:

@Composable
fun FoldAwareScreen() {
    val foldingFeatures by collectFoldingFeaturesAsState()

    // Access folding features for the current window.
    val foldFeature = foldingFeatures.firstOrNull()
    if (foldFeature != null) {
        // Adapt layout based on the fold feature.
    }
}

Funkcje wyświetlaczy składanych

Lista elementów FoldingFeature zwracana przez collectFoldingFeaturesAsState() (podtyp DisplayFeature) zawiera informacje o wyświetlaczach składanych, w tym te właściwości:

• state: stan złożenia urządzenia, FLAT lub HALF_OPENED

• orientation: orientacja zagięcia lub zawiasu, HORIZONTAL lub VERTICAL.

• occlusionType: czy zagięcie lub zawias zasłania część wyświetlacza, NONE lub FULL.

• isSeparating: czy zagięcie lub zawias tworzy 2 logiczne obszary wyświetlania, true lub false.

Uwaga: chociaż zawias w urządzeniach składanych umożliwia składanie urządzenia pod różnymi kątami, FoldingFeature nie udostępnia kąta jako części interfejsu API. Różne urządzenia mają różne zakresy raportowania, a dokładność czujników może się różnić w zależności od urządzenia. Dlatego animacje lub logika oparta na dokładnym kącie zawiasu muszą być dostosowane do urządzenia.

Urządzenie składane, które jest HALF_OPENED, zawsze zgłasza isSeparating jako true, ponieważ ekran jest podzielony na 2 obszary wyświetlania. W przypadku urządzenia z 2 ekranami isSeparating jest zawsze ustawione na true, gdy aplikacja obejmuje oba ekrany.

Właściwość FoldingFeature bounds (dziedziczona z DisplayFeature) reprezentuje prostokąt ograniczający funkcję składania, taką jak zagięcie lub zawias. Granice można wykorzystać do umieszczania elementów na ekranie względem funkcji:

@Composable
fun FoldFeatureDemo() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    if (foldFeature != null) {
        val isSeparating = foldFeature.isSeparating
        val occlusionType = foldFeature.occlusionType
        val bounds = foldFeature.bounds
        // Use bounds and properties to position content.
    }
}

Pozycja stołu

Korzystając z informacji zawartych w obiekcie FoldingFeature, aplikacja może obsługiwać pozycje takie jak pozycja stołu, w której telefon leży na powierzchni, zawias jest w pozycji poziomej, a składany ekran jest otwarty do połowy.

Pozycja stołu zapewnia użytkownikom wygodę korzystania z telefonu bez konieczności trzymania go w dłoni. Pozycja stołu świetnie sprawdza się podczas oglądania multimediów, robienia zdjęć i prowadzenia rozmów wideo.

Rysunek 1. Aplikacja odtwarzacza wideo w pozycji stołu – film na pionowej części ekranu, elementy sterujące odtwarzaniem na części poziomej.

Aby sprawdzić, czy urządzenie jest w pozycji stołu, użyj FoldingFeature.State i FoldingFeature.Orientation z collectFoldingFeaturesAsState() aby sprawdzić, czy urządzenie jest w pozycji stołu postawy:

@Composable
fun TabletopContent() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    val isTableTopPosture = foldFeature != null &&
        foldFeature.state == FoldingFeature.State.HALF_OPENED &&
        foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL

    if (isTableTopPosture) {
        // Tabletop layout: separate content and controls across the fold.
    } else {
        // Standard layout.
    }
}

Możesz też sprawdzić, czy okno jest w pozycji stołu, sprawdzając właściwość Posture zwracaną przez currentWindowAdaptiveInfoV2():

val adaptiveInfo = currentWindowAdaptiveInfoV2()
val isTabletop = adaptiveInfo.windowPosture.isTabletop

Gdy wiesz, że urządzenie jest w pozycji stołu, odpowiednio zaktualizuj układ aplikacji. W przypadku aplikacji multimedialnych oznacza to zwykle umieszczenie odtwarzania nad zagięciem oraz umieszczenie elementów sterujących i dodatkowych treści tuż za nim, aby zapewnić wygodne oglądanie lub słuchanie bez użycia rąk.

Przykłady

• MediaPlayerActivity Aplikacja: dowiedz się, jak używać Media3 Exoplayer i WindowManager do tworzenia odtwarzacza wideo dostosowanego do składania.

• Optymalizacja aplikacji aparatu na urządzeniach składanych za pomocą Jetpack WindowManager codelab: dowiedz się, jak zaimplementować pozycję stołu w aplikacjach do fotografowania. Wyświetl wizjer w górnej połowie ekranu (nad zagięciem), a elementy sterujące w dolnej połowie.

Pozycja książki

Kolejną unikalną funkcją urządzeń składanych jest pozycja książki, w której urządzenie jest otwarte do połowy, a zawias jest pionowy. Pozycja książki świetnie sprawdza się podczas czytania e-booków. Dzięki układowi 2 stron na dużym ekranie składanym, otwartym jak oprawiona książka, pozycja książki zapewnia wrażenia podobne do czytania prawdziwej książki.

Można jej też używać do fotografowania, jeśli chcesz robić zdjęcia bez użycia rąk w innym formacie obrazu.

Pozycję książki zaimplementuj za pomocą tych samych technik co pozycję stołu. Sprawdź, czy orientacja funkcji składania jest pionowa, a nie pozioma:

@Composable
fun BookContent() {
    val foldingFeatures by collectFoldingFeaturesAsState()
    val foldFeature = foldingFeatures.firstOrNull()

    val isBookPosture = foldFeature != null &&
        foldFeature.state == FoldingFeature.State.HALF_OPENED &&
        foldFeature.orientation == FoldingFeature.Orientation.VERTICAL

    if (isBookPosture) {
        // Book posture layout: two-page layout across the vertical fold.
    } else {
        // Standard single-page layout.
    }
}

Uwaga: w przypadku urządzeń składanych z 2 ekranami oddzielonymi zawiasem używaj układów zaprojektowanych dla pozycji stołu i książki, nawet jeśli FoldingFeature.State ma wartość FLAT. Gdy isSeparating ma wartość true, nie umieszczaj elementów sterujących interfejsu zbyt blisko zagięcia lub zawiasu, ponieważ mogą być trudne do dosięgnięcia. Użyj occlusionType, aby zdecydować, czy umieścić treści w granicach funkcji składania bounds.

Zmiany rozmiaru okna

Obszar wyświetlania aplikacji może się zmienić w wyniku zmiany konfiguracji urządzenia, np. gdy urządzenie jest złożone lub rozłożone, obrócone lub zmienione w trybie wielu okien.

Aby pobrać bieżącą klasę rozmiaru okna i dostosować się do zmian rozmiaru w Jetpack Compose, użyj funkcji kompozycyjnej currentWindowAdaptiveInfoV2() z biblioteki Compose Material 3 Adaptive. currentWindowAdaptiveInfoV2() zwraca instancję WindowAdaptiveInfo, która zawiera WindowSizeClass bieżącego okna (z domyślną obsługą dużych i bardzo dużych punktów przerwania) oraz windowPosture urządzenia:

@Composable
fun AdaptiveApp() {
    val adaptiveInfo = currentWindowAdaptiveInfoV2()
    val windowSizeClass = adaptiveInfo.windowSizeClass

    when {
        windowSizeClass.isWidthAtLeastBreakpoint(
            WIDTH_DP_EXPANDED_LOWER_BOUND
        ) -> {
            // Expanded layout
        }
        windowSizeClass.isWidthAtLeastBreakpoint(
            WIDTH_DP_MEDIUM_LOWER_BOUND
        ) -> {
            // Medium layout
        }
        else -> {
            // Compact layout
        }
    }
}

Zobacz Używanie klas rozmiarów okien.

Dodatkowe materiały

Więcej informacji o układach dostosowanych do składania i urządzeniach składanych znajdziesz w tych materiałach:

Przykłady

• Przykład Jetpack WindowManager: przykład użycia biblioteki Jetpack WindowManager.
• Jetcaster : implementacja pozycji stołu za pomocą Compose.

Codelabs

• Obsługa urządzeń składanych i z 2 ekranami za pomocą Jetpack WindowManager.
• Optymalizacja aplikacji aparatu na urządzeniach składanych za pomocą Jetpack WindowManager.