自訂 UI

Sebastian Benz

「自訂分頁」的優點之一就是可以完美整合至您的應用程式。在「自訂分頁」指南的這一部分，您將瞭解如何配合您的應用程式變更「自訂分頁」的外觀和行為。

設定工具列顏色

使用自訂淺色配置的自訂分頁
淺色模式
使用自訂深色配置的自訂分頁
深色模式

首先，根據應用程式的主題自訂「自訂分頁」的網址列。下方的程式碼片段會呼叫 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();

設定自訂參照網址

您可以在啟動「Custom」分頁時將應用程式設為參照網址。這樣網站就能知道流量來源。

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

接下來：請參閱這篇文章，瞭解如何將自訂動作新增至「自訂」分頁中。