TwoPaneLayout

Important

Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.

TwoPaneLayout est un composant IU pour Jetpack Compose, qui contient les dispositions qui vous aident à créer l’IU des appareils double écran, pliables et écran large. TwoPaneLayout fournit une disposition à deux volets à utiliser au niveau supérieur d’une IU. Le composant place deux volets côte à côte lorsque l’application s’étend sur des appareils à double écran, pliables et à écran large.

Notes

TwoPaneLayout considère qu’un appareil est à écran large lorsque la plus petite largeur d’écran est supérieure à 585dp. Un appareil est considéré comme à écran unique lorsque la largeur d’écran la plus petite est égale à ou inférieure à 585dp.

La plus petite largeur d’écran est la plus petite valeur de la largeur ou de la hauteur de l’écran, que ce soit en mode portrait ou paysage.

Lorsque l’application est traversée d’une charnière ou pliure verticale, ou lorsque la largeur de l’écran est supérieure à la hauteur sur un appareil grand écran, volet1 est placé à gauche et volet2 à droite. Si l’appareil pivote, l’application est traversée d’une charnière ou pliure horizontale, ou la largeur de l’écran est inférieure à la hauteur sur un appareil grand écran, volet1 est placé en haut et volet2 en bas.

Fonction de haut niveau

@Composable
fun TwoPaneLayout(
    modifier: Modifier = Modifier,
    paneMode: TwoPaneMode = TwoPaneMode.TwoPane,
    pane1: @Composable TwoPaneScope.() -> Unit,
    pane2: @Composable TwoPaneScope.() -> Unit
)

TwoPaneLayout peut assigner des largeurs ou des hauteurs à ses enfants en fonction de leurs poids, qui sont fournis à l’aide du modificateur TwoPaneScope.weight. Quand aucun de ses enfants n’a de poids, les deux éléments sont disposés de manière égale pour prendre toute la zone d’affichage.

Les deux volets peuvent être horizontaux ou verticaux, en fonction de l’orientation de l’appareil, sauf si paneMode est configuré.

En cas d’exécution sur un appareil standard à un seul écran, un seul volet est visible. L’autre volet est superposé et la navigation est disponible pour basculer entre les deux volets.

Exemple d'utilisation :

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
        )
    }
)
  • Appareil double écran (Surface Duo)

    Capture d’écran d’un appareil Surface Duo

  • Appareil pliable

    Capture d’écran d’un appareil pliable

@Composable
fun navigateToPane1()

Passez de volet2 à volet1 en mode volet unique.

@Composable
fun navigateToPane2() 

Passez de volet1 à volet2 en mode volet unique.

Exemple d'utilisation :

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
                .clickable {
                    navigateToPane2()
                }
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
                .clickable {
                    navigateToPane1()
                }
        )
    }
)

Personnaliser deux volets

Il existe deux façons de personnaliser la disposition :

  • weight - Détermine comment mettre en page deux volets proportionnellement et comment mettre la priorité sur le volet unique. Le volet avec un poids plus élevé sera placé en priorité en mode écran unique.
  • paneMode - Détermine s’il faut montrer deux volets ou un seul en mode double écran horizontalement et verticalement.

Poids

Affectez des largeurs enfants et la priorité en mode volet unique en utilisant le modificateur TwoPaneScope.weight :

Exemple d'utilisation :

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan).weight(.3f)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta).weight(.7f)
        )
    }
)

Appareil écran large présentant les deux volets dimensionnés proportionnellement (3:7) :

capture d’écran de tablette

paneMode

Il existe trois valeurs paneMode qui contrôlent si les deux volets ont des vues distinctes ou si un seul volet est montré :

  • TwoPane - par défaut, montre deux volets lorsque l’application s’étend sur les tablettes ou appareils double écran et pliables.

  • VerticalSingle - montre un seul volet lorsque l’application s’étend sur une pliure ou une charnière verticale, ou sur des tablettes et des appareils écran large.

    capture d’écran de verticalSingle

  • HorizontalSingle - montre un seul volet lorsque l’application s’étend sur une pliure ou une charnière horizontale, ou sur des tablettes et des appareils écran large.

    capture d’écran du mode horizontal

Exemple d’utilisation :

TwoPaneLayout(
    paneMode = TwoPaneMode.HorizontalSingle,
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
        )
    }
)

Notes

Horizontal signifie que la largeur de la charnière/pliure est supérieure à la hauteur, haut/bas ; Vertical signifie que la hauteur de la charnière/pliure est supérieure à la largeur, gauche/droite

Ajouter à votre projet

  1. Veillez à disposer d’un référentiel mavenCentral() dans votre fichier build.gradle de niveau supérieur :

    allprojects {
        repositories {
            google()
            mavenCentral()
         }
    }
    
  2. Ajoutez des dépendances au fichier build.gradle au niveau module (la version actuelle peut être différente de ce qui est montré ici) :

    implementation "com.microsoft.device.dualscreen:twopanelayout:1.0.0-alpha06"
    
  3. Vérifiez également que compileSdkVersion et targetSdkVersion sont définis sur API 30 ou ultérieur dans le fichier compileSdkVersion au niveau du module :

    android { 
        compileSdkVersion 30
    
        defaultConfig { 
            targetSdkVersion 30 
        } 
        ... 
    }
    
  4. Générez la disposition avec TwoPaneLayout.

Pour plus de détails, reportez-vous à l’exemple TwoPaneLayout.