Multitasking con schede personalizzate parziali

Sebastian Benz

Per impostazione predefinita, le schede personalizzate vengono avviate come attività a schermo intero. Avvio in Chrome 107, puoi utilizzare le schede personalizzate parziali per specificare un'altezza di avvio diversa nelle verticale, per consentire agli utenti di svolgere più attività contemporaneamente interagendo con l'app la visualizzazione di contenuti web. Gli utenti possono espandere la scheda personalizzata a schermo intero trascinando il punto di manipolazione della barra degli strumenti e ripristina l'altezza di avvio iniziale trascinando verso il basso.

Scheda personalizzata parziale in un riquadro inferiore.

Per schermi di grandi dimensioni o dispositivi in modalità Orizzontale, a partire da Chrome 120, puoi specificare una larghezza massima di avvio per mostrare una scheda personalizzata parziale in un lato in un foglio di calcolo. Impostando un punto di interruzione, puoi decidere quando avviare un Premi Tab in un foglio inferiore o laterale.

Scheda personalizzata parziale in un foglio laterale.

di Gemini Advanced.

Punto chiave:

• Specificare l'altezza iniziale dell'attività non ha effetto se il browser predefinito non supporta le schede personalizzate parziali. In questo caso, l'intent extra verrà ignorato e la scheda personalizzata coprirà l'intera altezza di visualizzazione.
• Le proprietà CustomTabColorScheme.navigationBarColor e CustomTabColorScheme.navigationBarDividerColor non funzionano durante la creazione di un intent per una scheda personalizzata parziale. perché ereditano la combinazione di colori dell'app host per le proprietà dell'interfaccia utente riportate sopra. Prima di lanciare una scheda personalizzata, avrai la responsabilità di garantire la coerenza visiva di queste proprietà.

Prerequisito

Per poter utilizzare solo alcune delle schede personalizzate, devi:

• avviare una nuova sessione del browser utilizzando un CustomTabsServiceConnection e la passiamo all'intent o alle schede personalizzate

• avvia l'attività relativa alla scheda personalizzata utilizzando startActivityForResult()

Combina entrambi gli approcci se vuoi un avvio rapido nel caso in cui il servizio La connessione non è stata ancora stabilita.

Configurare il riquadro inferiore

Per trasformare una scheda personalizzata in una scheda personalizzata parziale, definisci l'altezza di avvio iniziale in pixel richiamando la classe CustomTabBuilder setInitialActivityHeightPx() . Per impostazione predefinita, la scheda personalizzata parziale è ridimensionabile, ma puoi passare ACTIVITY\_HEIGHT\_FIXED per disattivare questo comportamento:

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

Punto chiave:l'altezza minima parziale della scheda personalizzata è pari al 50% dell'altezza dello schermo. Se l'altezza dello schermo è impostata su un valore inferiore al 50% dell'altezza dello schermo, Chrome adatta automaticamente la scheda personalizzata al 50% dell'altezza dello schermo.

Configurazione del foglio laterale

Per configurare il comportamento del foglio laterale, definisci la larghezza di avvio iniziale in pixel utilizzando chiamata al numero del corso CustomTabBuilder setInitialActivityWidthPx() .

Per impostazione predefinita, la scheda personalizzata parziale è ridimensionabile, ma puoi passare ACTIVITY\_HEIGHT\_FIXED per disattivare questo comportamento:

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

La Scheda personalizzata si comporterà come un foglio laterale se la larghezza dello schermo è superiore a il valore del punto di interruzione impostato setActivitySideSheetBreakpointDp(). Se la larghezza dello schermo è superiore a x, la Scheda personalizzata si comporterà come un lato altrimenti si comporterà come un riquadro inferiore. Se non è presente alcun punto di interruzione specificato, imposta l'implementazione del browser come valore predefinito 840dp. Se il criterio x viene impostato su <600dp, l'implementazione del browser deve essere impostato su valore predefinito 600dp.

Lancia una scheda personalizzata parziale con una sessione esistente

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

Lancia una scheda personalizzata parziale tramite 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);
        }
    });
}

Passaggio successivo: scopri come misurare il coinvolgimento degli utenti nelle schede personalizzate.