デフォルトでは、カスタムタブはフル ウィンドウ アクティビティとして起動します。Chrome 107 以降では、部分的なカスタムタブを使用して、縦向きモードで異なる起動の高さを指定できます。これにより、ユーザーはウェブ コンテンツを表示しながらアプリを操作してマルチタスクを行うことができます。ユーザーは、ツールバーのハンドルを上にドラッグしてカスタムタブを全画面表示にし、ハンドルを下にドラッグして初期起動の高さに戻すことができます。
大画面または横表示モードのデバイスの場合、Chrome 120 以降では、起動時の最大幅を指定して、サイドシートにカスタムタブの一部を表示できます。ブレークポイントを設定すると、ボトムシートまたはサイドシートで部分的なカスタムタブを起動するタイミングを指定できます。
前提条件
部分的なカスタムタブを使用するには、以下を行う必要があります。
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);
}
});
}
次のステップ: カスタムタブでユーザー エンゲージメントを測定する