Custom Tabs 的優點之一,就是可以與應用程式完美整合。在 Custom Tabs 指南的這一部分,您將瞭解如何變更 Custom Tabs 的外觀和行為,以配合應用程式。
設定工具列的顏色
首先,請自訂自訂分頁的網址列,讓其與應用程式主題一致。以下程式碼片段會呼叫 setDefaultColorSchemeParams()
,變更預設的工具列顏色。如果您的應用程式也支援深色系色彩配置,請透過 .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();
工具列現在有自訂背景和前景顏色。
設定自訂進入和退出動畫
接下來,您可以使用 setStartAnimation
和 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();
進一步自訂:標題、自動隱藏 AppBar 和自訂關閉圖示
您可以採取其他幾種做法,根據需求調整自訂分頁的 UI。
- 捲動時隱藏網址列,讓使用者有更多空間使用
setUrlBarHidingEnabled()(true)
探索網頁內容。 - 透過
setShowTitle()(true)
顯示文件標題,而非網址。 - 自訂關閉按鈕,以符合應用程式中的使用者流程,例如顯示返回箭頭,而非預設的
X
圖示:setCloseButtonIcon()(myCustomCloseIcon)
。
這些都是選用項目,但可改善應用程式中的自訂分頁體驗。
Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setUrlBarHidingEnabled(true)
.setShowTitle(true)
.setCloseButtonIcon(toBitmap(myCustomCloseIcon))
.build();
設定自訂參照網址
您可以在啟動自訂分頁時,將應用程式設為參照來源。這樣一來,您就能讓網站瞭解流量來源。
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
接下來,瞭解如何在自訂分頁中新增自訂動作。