このページは Cloud Translation API によって翻訳されました。

部分的なカスタムタブによるマルチタスク

Sebastian Benz

デフォルトでは、カスタムタブはフルウィンドウアクティビティとして起動します。Chrome 107 以降では、部分カスタムタブを使用して、縦向きモードで起動時の高さを指定できるようになりました。これにより、ユーザーはウェブコンテンツを表示しながらアプリを操作してマルチタスクを行うことができます。ユーザーは、ツールバーのハンドルを上にドラッグしてカスタムタブを全画面表示に拡大し、ハンドルを下にドラッグして起動時の初期の高さに戻すことができます。

ボトムシートのタブの一部を示すスクリーンショット — ボトムシート内の部分カスタムタブ。

大画面または横向きモードのデバイスの場合、Chrome 120 以降では、サイドシートにカスタムタブの一部を表示する最大起動幅を指定できます。ブレークポイントを設定することで、部分的なカスタムタブをボトムシートまたはサイドシートにいつ起動するかを指定できます。

タブの一部を示すサイドシートのスクリーンショット — サイドシート内の部分的なカスタムタブ。

重要なポイント:

デフォルトのブラウザが部分カスタムタブをサポートしていない場合、初期アクティビティの高さを指定しても効果はありません。この場合、インテントエクストラは無視され、カスタムタブはディスプレイの高さ全体に表示されます。
部分カスタムタブのインテントを作成する場合、CustomTabColorScheme.navigationBarColor プロパティと CustomTabColorScheme.navigationBarDividerColor プロパティは機能しません。これは、上記のユーザーインターフェースプロパティのホストアプリのカラーパターンを継承するためです。カスタムタブをリリースする前に、これらのプロパティのビジュアルの整合性を確保する必要があります。

前提条件

部分的なカスタムタブを使用するには、次の要件を満たす必要があります。

CustomTabsServiceConnection を使用して新しいブラウザセッションを開始し、それをカスタムタブインテントに渡す
startActivityForResult() を使用してカスタムタブアクティビティを開始します。

サービス接続がまだ確立されていない場合に高速起動を行う場合は、両方のアプローチを組み合わせます。

ボトムシートの設定

カスタムタブを部分的なカスタムタブにするには、CustomTabBuilder クラスの setInitialActivityHeightPx() メソッドを呼び出して、最初の起動時の高さをピクセル単位で定義します。デフォルトでは、部分的なカスタムタブはサイズ変更が可能ですが、この動作を無効にするには ACTIVITY\_HEIGHT\_FIXED を渡します。

new CustomTabsBuilder().setInitialActivityHeightPx(
    400,
    ACTIVITY_HEIGHT_FIXED
);

サイドシートの設定

サイドシートの動作を設定するには、CustomTabBuilder クラスの setInitialActivityWidthPx() メソッドを呼び出して、最初の起動時の幅をピクセル単位で定義します。

デフォルトでは、部分カスタムタブはサイズ変更可能ですが、ACTIVITY\_HEIGHT\_FIXED を渡してこの動作を無効にできます。

  CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder(session)
        .setInitialActivityHeightPx(400)
        .setInitialActivityWidthPx(400);
        .setActivitySideSheetBreakpointDp(800);

画面の幅が setActivitySideSheetBreakpointDp() で設定されたブレークポイント値より大きい場合、カスタムタブはサイドシートとして動作します。画面の幅が x より大きい場合、カスタムタブはサイドシートとして動作します。それ以外の場合は、カスタムタブはボトムシートとして動作します。ブレークポイントが指定されていない場合は、ブラウザ実装がデフォルト値 840dp として設定するように設定します。x が <600dp に設定されている場合、ブラウザの実装ではデフォルトで 600dp に設定する必要があります。

既存のセッションで部分的なカスタムタブを起動する

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
   .setInitialActivityHeightPx(500)
    .setInitialActivityWidthPx(400);
    .setActivitySideSheetBreakpointDp(800);
   .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
   // ...
   .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

startActivityForResult を使用して部分的なカスタムタブを起動する

private ActivityResultLauncher<String> mCustomTabLauncher = registerForActivityResult(new ActivityResultContract<String, Integer>() {
    @Override
    public Integer parseResult(int statusCode, @Nullable Intent intent) {
        return statusCode;
    }

    @NonNull
    @Override
    public Intent createIntent(@NonNull Context context, String url) {
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder(customTabsSession)
                .setInitialActivityHeightPx(500)
                .setInitialActivityWidthPx(400);
                .setActivitySideSheetBreakpointDp(800);
                .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
                .setToolbarCornerRadiusDp(10);
        Intent customTabsIntent = builder.build().intent;
        customTabsIntent.setData(Uri.parse(url));
        return customTabsIntent;
    }
}, new ActivityResultCallback<Integer>() {
    @Override
    public void onActivityResult(Integer statusCode) {
       // ...
    }
});

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    Button selectButton = findViewById(R.id.select_button);
    selectButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View view) {
            mCustomTabLauncher.launch(customTabsIntent.intent);
        }
    });
}

次のステップ: カスタムタブでのユーザーエンゲージメントを測定する方法を確認しましょう。