De forma predeterminada, las pestañas personalizadas se inician como una actividad en ventana completa. A partir de Chrome 107, puedes usar pestañas personalizadas parciales para especificar una altura de inicio diferente en modo retrato, de modo que los usuarios puedan realizar varias tareas a la vez interactuando con tu app mientras ven contenido web. Para expandir la pestaña personalizada a pantalla completa, los usuarios deben arrastrar el controlador de la barra de herramientas hacia arriba y restablecer la altura inicial de inicio arrastrando el controlador hacia abajo.
![Captura de pantalla de una pestaña parcial de una hoja inferior](https://developer.chrome.com/static/docs/android/custom-tabs/guide-partial-custom-tabs/image/example-partial-tab-ff19cab6a28dd.png?authuser=5&hl=es)
Para pantallas grandes o dispositivos en modo horizontal, a partir de Chrome 120, puedes especificar un ancho de inicio máximo para mostrar una pestaña personalizada parcial en una hoja lateral. Cuando estableces un punto de interrupción, puedes decidir cuándo iniciar una pestaña personalizada parcial en una hoja inferior o lateral.
![Captura de pantalla de una pestaña parcial de una hoja lateral](https://developer.chrome.com/static/docs/android/custom-tabs/guide-partial-custom-tabs/image/example-partial-tab-sidesheet.jpg?authuser=5&hl=es)
Requisitos
Para poder usar pestañas personalizadas parciales, necesitas:
Inicia una nueva sesión del navegador con un
CustomTabsServiceConnection
y pásala al intent de pestañas personalizadas.Inicia la actividad de la pestaña personalizada con
startActivityForResult()
.
Combina ambos enfoques si deseas un inicio rápido en caso de que aún no se haya establecido la conexión de servicio.
Configura la hoja inferior
Para convertir una pestaña personalizada en una pestaña personalizada parcial, define la altura inicial de inicio en píxeles llamando al método setInitialActivityHeightPx()
de la clase CustomTabBuilder
. De forma predeterminada, se puede cambiar el tamaño de la pestaña personalizada parcial, pero puedes pasar ACTIVITY\_HEIGHT\_FIXED
para inhabilitar este comportamiento:
new CustomTabsBuilder().setInitialActivityHeightPx(
400,
ACTIVITY_HEIGHT_FIXED
);
Configura la hoja lateral
Para configurar el comportamiento de la hoja lateral, define el ancho de lanzamiento inicial en píxeles con una llamada al método setInitialActivityWidthPx()
de la clase CustomTabBuilder
.
De forma predeterminada, se puede cambiar el tamaño de la pestaña personalizada parcial, pero puedes pasar ACTIVITY\_HEIGHT\_FIXED
para inhabilitar este comportamiento:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
.setInitialActivityHeightPx(400)
.setInitialActivityWidthPx(400);
.setActivitySideSheetBreakpointDp(800);
La pestaña personalizada se comportará como una hoja lateral si el ancho de la pantalla es mayor que el valor del punto de interrupción establecido por setActivitySideSheetBreakpointDp(). Si el ancho de la pantalla es superior a x
, la pestaña personalizada se comportará como una hoja lateral; de lo contrario, se comportará como una hoja inferior. Si no se especifica un punto de interrupción, establece que la implementación del navegador se debe establecer como el valor predeterminado 840dp
.
Si x
se configura como <600dp
, la implementación del navegador debe establecerse como 600dp
de forma predeterminada.
Cómo iniciar una pestaña personalizada parcial con una sesión existente
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))
Cómo iniciar una pestaña personalizada parcial a través de 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);
}
});
}
A continuación, obtén información sobre cómo medir la participación de los usuarios en tus pestañas personalizadas.