Wielozadaniowość dzięki częściowym kartom niestandardowym

Sebastian Benz

Domyślnie karty niestandardowe otwierają się w pełnym oknie. Począwszy od Chrome 107 możesz używać częściowych kart niestandardowych, aby określić inną wysokość okna podczas uruchamiania w trybie poziomym, dzięki czemu użytkownicy mogą wykonywać wiele zadań jednocześnie, korzystając z aplikacji podczas przeglądania treści w internecie. Użytkownicy mogą rozwinąć kartę niestandardową na pełny ekran, przeciągając uchwyt paska narzędzi w górę, i przywrócić początkową wysokość okna, przeciągając uchwyt w dół.

Częściowa karta niestandardowa na dolnym panelu.

Począwszy od Chrome 120 możesz określić maksymalną szerokość uruchomienia, aby wyświetlać niepełną kartę niestandardową na karcie bocznej na dużych ekranach lub urządzeniach w orientacji poziomej. Ustawiając punkt przerwy, możesz określić, kiedy uruchomić częściową kartę niestandardową na dolnym lub bocznym panelu.

Częściowa karta niestandardowa na panelu bocznym.

Najważniejszy punkt:

• Jeśli przeglądarka domyślna nie obsługuje częściowych kart niestandardowych, określenie początkowej wysokości aktywności nie będzie miało żadnego wpływu. W takim przypadku dodatkowy parametr intencji zostanie zignorowany, a karta niestandardowa zajmie całą wysokość ekranu.
• Właściwości CustomTabColorScheme.navigationBarColor i CustomTabColorScheme.navigationBarDividerColor nie działają podczas tworzenia intencji dla częściowej karty niestandardowej. Dzieje się tak, ponieważ dziedziczą schemat kolorów aplikacji hosta w przypadku powyższych właściwości interfejsu użytkownika. Zanim uruchomisz kartę niestandardową, musisz zadbać o jej spójność wizualną.

Warunek wstępny

Aby móc korzystać z częściowych kart niestandardowych:

• rozpoczniesz nową sesję przeglądarki za pomocą CustomTabsServiceConnectioni przekażesz ją do intencjonalnej karty niestandardowej.

• uruchomić aktywność karty niestandardowej za pomocą startActivityForResult().

Jeśli chcesz, aby aplikacja szybko się uruchamiała, gdy połączenie z usługą nie zostało jeszcze nawiązane, połącz oba podejścia.

Konfigurowanie planszy dolnej

Aby z karty niestandardowej zrobić kartę niestandardową częściowej, zdefiniuj początkową wysokość inicjacji w pikselach, wywołując metodę CustomTabBuilder klasy setInitialActivityHeightPx(). Domyślnie rozmiar karty niestandardowej częściowej można zmieniać, ale możesz przekazać parametr ACTIVITY\_HEIGHT\_FIXED, aby wyłączyć tę funkcję:

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

Ważne: minimalna wysokość częściowej karty niestandardowej to 50% wysokości ekranu. Jeśli wysokość ekranu jest ustawiona na wartość mniejszą niż 50% wysokości ekranu, Chrome automatycznie dostosuje kartę niestandardową do 50% wysokości ekranu.

Konfigurowanie panelu bocznego

Aby skonfigurować zachowanie panelu bocznego, określ początkową szerokość podczas uruchamiania w pikselach, wywołując metodę CustomTabBuilder klasy setInitialActivityWidthPx().

Domyślnie rozmiar karty niestandardowej częściowej można zmieniać, ale możesz przekazać parametr ACTIVITY\_HEIGHT\_FIXED, aby wyłączyć tę funkcję:

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

Karta niestandardowa będzie działać jak panel boczny, jeśli szerokość ekranu jest większa niż wartość punktu kontrolnego ustawiona przez funkcję setActivitySideSheetBreakpointDp(). Jeśli szerokość ekranu jest większa niż x, karta niestandardowa będzie działać jak panel boczny, w przeciwnym razie będzie działać jak panel dolny. Jeśli nie określono punktu przerwania, implementacja przeglądarki powinna ustawić jako wartość domyślną 840dp. Jeśli x ma wartość <600dp, implementacja przeglądarki powinna domyślnie ustawić wartość 600dp.

Uruchamianie częściowej karty niestandardowej w ramach istniejącej sesji

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

Uruchamianie częściowej karty niestandardowej za pomocą 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);
        }
    });
}

Kolejny krok: dowiedz się, jak mierzyć zaangażowanie użytkowników w kartach niestandardowych.