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 de ventana completa. A partir de Chrome 107, puedes usar Pestañas personalizadas parciales para especificar una altura de inicio diferente en el modo vertical, de modo que los usuarios puedan realizar varias tareas a la vez interactuando con tu app mientras miran contenido web. Para expandir la pestaña personalizada a pantalla completa, los usuarios deben arrastrar el control de la barra de herramientas hacia arriba y, para restablecer la altura de inicio inicial, deben arrastrar el control hacia abajo.

Pestaña personalizada parcial en una hoja inferior.

En el caso de 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. Si 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 de la actividad inicial no tendrá efecto si el navegador predeterminado no admite pestañas personalizadas parciales. En este caso, se ignorará el intent adicional y la pestaña personalizada abarcará toda la altura 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 lanzar una pestaña personalizada.

Requisitos

Para poder usar pestañas personalizadas parciales, debes hacer lo siguiente:

• Iniciar una nueva sesión del navegador con un CustomTabsServiceConnection y pasarla 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 del servicio.

Cómo configurar la hoja inferior

Para convertir una pestaña personalizada en una pestaña personalizada parcial, define la altura de inicio inicial en píxeles llamando al método setInitialActivityHeightPx() de la clase CustomTabBuilder. De forma predeterminada, el tamaño de la pestaña personalizada parcial se puede cambiar, pero puedes pasar ACTIVITY\_HEIGHT\_FIXED para inhabilitar este comportamiento:

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

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

Cómo configurar la hoja lateral

Para configurar el comportamiento de la hoja lateral, define el ancho de inicio inicial en píxeles llamando al método setInitialActivityWidthPx() de la clase CustomTabBuilder.

De forma predeterminada, el tamaño de la pestaña personalizada parcial se puede cambiar, 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 de 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 ningún punto de interrupción, configura la implementación del navegador para que establezca el valor predeterminado 840dp. Si x se establece en <600dp, la implementación del navegador debería establecerlo de forma predeterminada en 600dp.

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 para medir la participación de los usuarios en tus pestañas personalizadas.