Par défaut, les onglets personnalisés sont lancés en tant qu'activité en plein écran. À partir de Chrome 107, vous pouvez utiliser des onglets personnalisés partiels pour spécifier une hauteur de lancement différente en mode Portrait. Ainsi, les utilisateurs peuvent effectuer plusieurs tâches en même temps en interagissant avec votre application tout en affichant du contenu Web. Les utilisateurs peuvent afficher l'onglet personnalisé en plein écran en faisant glisser la poignée de la barre d'outils vers le haut et restaurer la hauteur de lancement initiale en faisant glisser la poignée vers le bas.
Pour les grands écrans ou les appareils en mode Paysage, à partir de Chrome 120, vous pouvez spécifier une largeur de lancement maximale pour afficher un onglet personnalisé partiel dans une feuille latérale. En définissant un point d'arrêt, vous pouvez décider quand lancer un onglet personnalisé partiel dans une bottom sheet ou une side sheet.
Prérequis
Pour utiliser des onglets personnalisés partiels, vous devez:
démarrez une nouvelle session de navigateur à l'aide d'un
CustomTabsServiceConnection
et transmettez-le à l'intent Onglets personnalisés ouDémarrez l'activité de l'onglet personnalisé à l'aide de
startActivityForResult()
.
Combinez les deux approches si vous souhaitez un démarrage rapide au cas où la connexion au service n'aurait pas encore été établie.
Configurer la bottom sheet
Pour transformer un onglet personnalisé en onglet personnalisé partiel, définissez la hauteur de lancement initiale en pixels en appelant la méthode setInitialActivityHeightPx()
de la classe CustomTabBuilder
. Par défaut, l'onglet personnalisé partiel est redimensionnable, mais vous pouvez transmettre ACTIVITY\_HEIGHT\_FIXED
pour désactiver ce comportement:
new CustomTabsBuilder().setInitialActivityHeightPx(
400,
ACTIVITY_HEIGHT_FIXED
);
Configurer la side sheet
Pour configurer le comportement de la feuille latérale, définissez la largeur de lancement initiale en pixels en appelant la méthode setInitialActivityWidthPx()
de la classe CustomTabBuilder
.
Par défaut, l'onglet personnalisé partiel est redimensionnable, 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 par setActivitySideSheetBreakpointDp(). Si la largeur de l'écran est supérieure à x
, l'onglet personnalisé se comportera comme une feuille latérale. Dans le cas contraire, il se comportera comme une bottom sheet. Si aucun point d'arrêt n'est spécifié, la mise en œuvre 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 600dp
par défaut.
Lancer un onglet personnalisé partiel à partir d'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);
}
});
}
Prochainement: découvrez comment mesurer l'engagement utilisateur dans vos onglets personnalisés.