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

Sebastian Benz

デフォルトでは、カスタムタブはフルウィンドウ アクティビティとして起動します。Chrome で始める 107 では、部分的なカスタムタブを使用して、起動時に異なる起動の高さを指定できます。 ポートレート モードにすると、ユーザーはアプリを操作しながらマルチタスクを行うことができます。 ウェブ コンテンツの表示。ドラッグしてカスタムタブを全画面表示にできる ツールバーで起動時のの高さを元に戻したり、 抑えることができます。

<ph type="x-smartling-placeholder">
</ph> ボトムシートのタブの一部を示すスクリーンショット ボトムシートの一部のカスタムタブ。

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

<ph type="x-smartling-placeholder">
</ph> タブの一部を示すサイドシートのスクリーンショット
サイドシート内のカスタムタブの一部。
で確認できます。

前提条件

カスタムタブを部分的に使用できるようにするには、以下を行う必要があります。

サービスで迅速な起動が必要な場合は、両方のアプローチを組み合わせます。 まだ確立されていません。

ボトムシートの設定

カスタムタブを部分的なカスタムタブにするには、初期起動の高さを定義します 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);
        }
    });
}

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