Dostosowywanie interfejsu użytkownika

Sebastian Benz

Jedną z zalet kart niestandardowych jest to, że można je płynnie zintegrować z aplikacją. Z tej części przewodnika po kartach niestandardowych dowiesz się, jak zmienić wygląd i działanie takich kart, aby pasowały do Twojej aplikacji.

Ustaw kolor paska narzędzi

Tryb jasny

Tryb ciemny

Najpierw trzeba dostosować pasek adresu karty niestandardowej tak, aby pasował do motywu aplikacji. Poniższy fragment kodu zmienia domyślny kolor paska narzędzi, wywołując metodę setDefaultColorSchemeParams(). Jeśli aplikacja obsługuje też ciemny schemat kolorów, możesz go ustawić w .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …).

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

Pasek narzędzi ma teraz niestandardowe kolory tła i pierwszego planu.

Ważne: protokół karty niestandardowej nie obsługuje zmiany koloru paska stanu.

Skonfiguruj niestandardową animację wejścia i wyjścia

Następnie możesz ułatwić uruchamianie (i opuszczanie) karty niestandardowej w aplikacji, definiując niestandardowe animacje rozpoczęcia i zakończenia za pomocą funkcji setStartAnimation i setExitAnimation:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

Dalsze dostosowania: tytuł, autoukrywanie paska aplikacji i niestandardowa ikona zamknięcia

Jest jeszcze kilka innych rzeczy, które możesz zrobić, aby dostosować interfejs karty niestandardowej do swoich potrzeb.

• Ukryj pasek adresu URL podczas przewijania, aby dać użytkownikowi więcej miejsca na przeglądanie treści internetowych za pomocą setUrlBarHidingEnabled()(true).
• Wyświetlaj tytuł dokumentu zamiast adresu URL w elemencie setShowTitle()(true).
• Dostosuj przycisk zamykania do sposobu korzystania z aplikacji, np. wyświetlaj strzałkę wstecz zamiast domyślnej ikony X): setCloseButtonIcon()(myCustomCloseIcon).

Są one opcjonalne, ale mogą poprawić działanie kart niestandardowych w Twojej aplikacji.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Ustawianie niestandardowej strony odsyłającej

Możesz ustawić aplikację jako stronę odsyłającą podczas uruchamiania karty niestandardowej. Dzięki temu możesz na bieżąco informować witryny, skąd pochodzi ruch w ich witrynach.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

Następny artykuł: dowiedz się, jak dodać do karty niestandardowej działanie niestandardowe.