UI のカスタマイズ

カスタムタブの利点の一つは、アプリにシームレスに統合できることです。カスタムタブガイドのこのパートでは、アプリに合わせてカスタムタブの外観と動作を変更する方法について説明します。

ツールバーの色を設定する

<ph type="x-smartling-placeholder">
</ph> カスタム ライト カラーパターンのカスタムタブ <ph type="x-smartling-placeholder">
</ph> ライトモード
をご覧ください。
<ph type="x-smartling-placeholder">
</ph> カスタムのダーク カラーパターンのカスタムタブ <ph type="x-smartling-placeholder">
</ph> ダークモード
をご覧ください。

まず、カスタムタブのアドレスバーをアプリのテーマに合わせてカスタマイズします。以下のスニペットでは、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();

ツールバーに、カスタムの背景色と前景色が表示されるようになりました。

開始と終了のカスタム アニメーションを設定する

次に、setStartAnimationsetExitAnimation を使用してカスタムの開始アニメーションと終了アニメーションを定義することで、アプリでのカスタムタブ エクスペリエンスの起動と終了をよりシームレスに行うことができます。

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 を調整するには、他にもいくつかの方法があります。

  • スクロール時に URL バーを非表示にして、setUrlBarHidingEnabled()(true) を使用してユーザーがより広いスペースでウェブ コンテンツを探索できるようにします。
  • setShowTitle()(true) で、URL の代わりにドキュメントのタイトルを表示する。
  • たとえば、デフォルトの 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()));

次のステップ: カスタムタブにカスタム アクションを追加する方法