「自訂分頁」的優點之一,是能夠與應用程式完美整合。這部分在「自訂分頁」指南中,您將瞭解如何配合應用程式變更自訂分頁的外觀和行為。
設定工具列顏色
![採用自訂淺色色彩配置的自訂分頁](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-ligh-a25471aaa0cb9.png?authuser=19&hl=zh-tw)
![採用自訂深色色彩配置的自訂分頁](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-dark-4673c50a2cf6c.png?authuser=19&hl=zh-tw)
首先,請依應用程式主題自訂自訂分頁的網址列。下方程式碼片段藉由呼叫 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 和自訂關閉圖示
您可以採取其他做法,根據自身需求調整「自訂」分頁的使用者介面。
- 捲動時隱藏網址列,讓使用者有更多空間使用
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()));
下一步:瞭解如何在自訂分頁中加入自訂動作。