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
![Karta niestandardowa z niestandardowym schematem jasnych kolorów](https://developer.chrome.google.cn/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-ligh-a25471aaa0cb9.png?authuser=6&hl=pl)
![Karta niestandardowa z niestandardowym ciemnym schematem kolorów](https://developer.chrome.google.cn/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-dark-4673c50a2cf6c.png?authuser=6&hl=pl)
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.
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.