Cómo realizar varias tareas a la vez con pestañas personalizadas parciales

Sebastian Benz

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.

Pestaña personalizada parcial en una hoja inferior.

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.

Pestaña personalizada parcial en una hoja lateral.

Punto clave:

• Especificar la altura inicial de la actividad no tendrá ningún efecto si el navegador predeterminado no admite pestañas personalizadas parciales. En este caso, el intent adicional se ignorará y la pestaña personalizada abarcará la altura completa de la pantalla.
• Las propiedades CustomTabColorScheme.navigationBarColor y CustomTabColorScheme.navigationBarDividerColor no funcionan cuando se compila un intent para una pestaña personalizada parcial. Esto se debe a que heredan el esquema de colores de la app host para las propiedades de la interfaz de usuario anteriores. Serás responsable de garantizar la coherencia visual de estas propiedades antes de iniciar una pestaña personalizada.

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
);

Punto clave: La altura mínima parcial de la pestaña personalizada es el 50% de la altura de la pantalla. Si la altura de la pantalla se establece en un valor inferior al 50% de la altura de la pantalla, Chrome ajustará automáticamente la pestaña Personalizar en un 50% de la altura de la pantalla.

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.