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ść, przeciągając uchwyt w dół.

Częściowa karta niestandardowa na dolnym panelu.

Począwszy od Chrome 120 możesz na dużych ekranach lub urządzeniach w orientacji poziomej określić maksymalną szerokość uruchamiania, aby wyświetlać tylko część karty niestandardowej na karcie bocznej. 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 dla 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 zamiaru kart niestandardowych lub

• 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 te podejścia.

Konfigurowanie panelu dolnego

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ść okna 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ć jako 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ć jako panel boczny, w przeciwnym razie będzie działać jako 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.