Multitâche avec les onglets personnalisés partiels

Sebastian Benz

Par défaut, les onglets personnalisés sont lancés en mode plein écran. Démarrage dans Chrome 107, vous pouvez utiliser des onglets personnalisés partiels pour spécifier une hauteur de lancement différente dans mode Portrait afin que les utilisateurs puissent effectuer plusieurs tâches à la fois en interagissant avec votre application l'affichage de contenus Web. Les utilisateurs peuvent développer l'onglet personnalisé en plein écran en le faisant glisser la barre d'outils vers le haut et restaurez la hauteur de lancement initiale en faisant glisser vers le bas.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;une bottom sheet d&#39;un onglet partiel
Onglet personnalisé partiel dans une bottom sheet.

Pour les grands écrans ou les appareils en mode Paysage, à partir de Chrome 120, vous Vous pouvez spécifier une largeur maximale de lancement pour afficher un onglet personnalisé partiel sur un côté. feuille. En définissant un point d'arrêt, vous pouvez décider quand lancer une partie personnalisée Appuyez sur la touche de tabulation dans une bottom sheet ou une feuille latérale.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran d&#39;une feuille latérale avec un onglet partiel
Onglet personnalisé partiel dans une feuille latérale.

Conditions préalables

Pour utiliser une partie des onglets personnalisés, vous devez:

Combinez les deux approches si vous souhaitez un démarrage rapide au cas où le service la connexion n'a pas encore été établie.

Configurer la bottom sheet

Pour transformer un onglet personnalisé en un onglet personnalisé partiel, définissez la hauteur de lancement initiale en pixels en appelant la classe CustomTabBuilder setInitialActivityHeightPx() . Par défaut, l'onglet personnalisé partiel peut être redimensionné, mais vous pouvez transmettre ACTIVITY\_HEIGHT\_FIXED pour désactiver ce comportement:

new CustomTabsBuilder().setInitialActivityHeightPx(
    400,
    ACTIVITY_HEIGHT_FIXED
);

Configurer la feuille latérale

Pour configurer le comportement de la feuille latérale, définissez la largeur de lancement initiale en pixels par appeler la classe CustomTabBuilder setInitialActivityWidthPx() .

Par défaut, l'onglet personnalisé partiel peut être redimensionné, mais vous pouvez transmettre ACTIVITY\_HEIGHT\_FIXED pour désactiver ce comportement:

  CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
        .setInitialActivityHeightPx(400)
        .setInitialActivityWidthPx(400);
        .setActivitySideSheetBreakpointDp(800);

L'onglet personnalisé se comportera comme une feuille latérale si la largeur de l'écran est supérieure à la valeur du point d'arrêt définie setActivitySideSheetBreakpointDp(). Si la largeur de l'écran est supérieure à x, l'onglet personnalisé se comportera comme un côté . Dans le cas contraire, elle se comporte comme une bottom sheet. Si aucun point d'arrêt n'est l'implémentation du navigateur doit être définie sur la valeur par défaut 840dp. Si x est défini sur <600dp, l'implémentation du navigateur doit utiliser par défaut la valeur suivante : 600dp

Lancer un onglet personnalisé partiel avec une session existante

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
   .setInitialActivityHeightPx(500)
    .setInitialActivityWidthPx(400);
    .setActivitySideSheetBreakpointDp(800);
   .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
   // ...
   .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

Lancer un onglet personnalisé partiel via startActivityForResult

private ActivityResultLauncher<String> mCustomTabLauncher = registerForActivityResult(new ActivityResultContract<String, Integer>() {
    @Override
    public Integer parseResult(int statusCode, @Nullable Intent intent) {
        return statusCode;
    }

    @NonNull
    @Override
    public Intent createIntent(@NonNull Context context, String url) {
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(customTabsSession)
                .setInitialActivityHeightPx(500)
                .setInitialActivityWidthPx(400);
                .setActivitySideSheetBreakpointDp(800);
                .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
                .setToolbarCornerRadiusDp(10);
        Intent customTabsIntent = builder.build().intent;
        customTabsIntent.setData(Uri.parse(url));
        return customTabsIntent;
    }
}, new ActivityResultCallback<Integer>() {
    @Override
    public void onActivityResult(Integer statusCode) {
       // ...
    }
});

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    Button selectButton = findViewById(R.id.select_button);
    selectButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            mCustomTabLauncher.launch(customTabsIntent.intent);
        }
    });
}

À suivre: découvrez comment mesurer l'engagement utilisateur dans vos onglets personnalisés.