手順ガイドを追加する

Compose でビルドを改善する
Android TV OS 用の Jetpack Compose を使用して、最小限のコードで美しい UI を作成します。
<ph type="x-smartling-placeholder"></ph> テレビ向け Compose →

アプリには、ユーザーが実行するマルチステップ タスクが含まれる場合があります。たとえば、アプリでの指示を ユーザーに追加コンテンツを購入したり、複雑な設定を行ったりする 決定を確定するだけですどのタスクでも、順序付けされた 1 つ以上のステップを 判断するのに役立ちます

androidx.leanback ライブラリは、マルチステップ ユーザータスクを実装するクラスを提供します。このページ kubectl コマンドを GuidedStepSupportFragment クラス タスクを完了するための一連の決定事項をガイドします。GuidedStepSupportFragment は、TV UI のベスト プラクティスを使用して、マルチステップのタスクを TV デバイスでわかりやすく操作できるようにしています。

ステップの詳細な説明を提供する

GuidedStepSupportFragment は一連のステップのうちの 1 つのステップを表す 構成されます。視覚的には、ガイダンス ビューが提供されます。 ステップで実行可能なアクションや決定のリスト。

図 1. ガイド付きステップの例

マルチステップ タスクの各ステップで、 GuidedStepSupportFragmentし、次のコンテキスト情報を提供 ユーザーが実施できるアクションを定義します。オーバーライド onCreateGuidance() 新しい コンテキストを含む GuidanceStylist.Guidance ステップのタイトル、説明、アイコンなどの情報がまとめられています。

Kotlin

override fun onCreateGuidance(savedInstanceState: Bundle?): GuidanceStylist.Guidance {
    return GuidanceStylist.Guidance(
            getString(R.string.guidedstep_first_title),
            getString(R.string.guidedstep_first_description),
            getString(R.string.guidedstep_first_breadcrumb),
            activity.getDrawable(R.drawable.guidedstep_main_icon_1)
    )
}

Java

@Override
public GuidanceStylist.Guidance onCreateGuidance(Bundle savedInstanceState) {
    String title = getString(R.string.guidedstep_first_title);
    String breadcrumb = getString(R.string.guidedstep_first_breadcrumb);
    String description = getString(R.string.guidedstep_first_description);
    Drawable icon = getActivity().getDrawable(R.drawable.guidedstep_main_icon_1);
    return new GuidanceStylist.Guidance(title, description, breadcrumb, icon);
}

必要な関数に GuidedStepSupportFragment サブクラスを追加します。 呼び出すことで、 GuidedStepSupportFragment.add() (アクティビティの onCreate() メソッド)

アクティビティに GuidedStepSupportFragment のみが含まれている場合 オブジェクト、GuidedStepSupportFragment.addAsRoot() を使用 最初の GuidedStepSupportFragment を追加します。add() の代わりに使用します。使用 addAsRoot() は、ユーザーが視聴中にテレビのリモコンの [戻る] ボタンを押した場合に確実に応答します。 最初の GuidedStepSupportFragment は、 GuidedStepSupportFragment と親アクティビティが閉じます。

注: プログラマティックに GuidedStepSupportFragment オブジェクトを使用する場合、 レイアウト XML ファイル内に配置する必要があります。

ユーザー アクションを作成して処理する

オーバーライドしてユーザー アクションを追加する onCreateActions()。 オーバーライドで、それぞれに新しい GuidedAction を追加します。 アクション アイテムを作成し、アクションの文字列、説明、ID を指定します。使用 GuidedAction.Builder: 新しいアクションを追加します。

Kotlin

override fun onCreateActions(actions: MutableList<GuidedAction>, savedInstanceState: Bundle?) {
    super.onCreateActions(actions, savedInstanceState)

    // Add "Continue" user action for this step
    actions.add(GuidedAction.Builder()
            .id(CONTINUE)
            .title(getString(R.string.guidedstep_continue))
            .description(getString(R.string.guidedstep_letsdoit))
            .hasNext(true)
            .build())
    ...

Java

@Override
public void onCreateActions(List<GuidedAction> actions, Bundle savedInstanceState) {
    // Add "Continue" user action for this step
    actions.add(new GuidedAction.Builder()
           .id(CONTINUE)
           .title(getString(R.string.guidedstep_continue))
           .description(getString(R.string.guidedstep_letsdoit))
           .hasNext(true)
           .build());
...

アクションは、単一行の選択だけではありません。このほかにも次のようなタイプの 次のアクションを作成できます。

  • 情報ラベル アクションを追加して、ユーザーの選択に関する追加情報を提供します。 infoOnly(true)infoOnly が true の場合、ユーザーはアクションを選択できません。
  • 編集可能なテキスト アクションを追加するには、 editable(true)editable が true の場合、ユーザーは キーボードから操作することもできます。オーバーライド onGuidedActionEditedAndProceed(): ユーザーが入力した修正済みテキストを取得します。onGuidedActionEditCanceled() をオーバーライドして、ユーザーが入力をキャンセルしたタイミングを把握することもできます。
  • チェックボックスを使用して、オンにできるラジオボタンのように動作するアクション セットを追加します。 checkSetId() 共通の ID 値を持つことで、アクションをセットにグループ化できます。同じリスト内のすべてのアクションが同じ チェックセット ID はリンクされているとみなされます。ユーザーがセット内のアクションの 1 つを選択すると、 他のアクションはすべてオフになります。
  • 日付選択アクションを追加する GuidedDatePickerAction.BuilderGuidedAction.BuilderonCreateActions())。オーバーライド onGuidedActionEditedAndProceed(): ユーザーが入力した変更済み日付の値を取得します。
  • サブアクションを使用するアクションを追加して、ユーザーが拡張されたリストから選択できるようにします。 選択します。サブアクションについては、サブアクションを追加するをご覧ください。
  • ボタン アクションを追加します。ボタン アクションはアクション リストの右側に表示され、簡単に追加できます。 アクセスできるようにします。ボタン アクションについては、[Add] ボタン アクションをご覧ください。

アクションを選択するための視覚的なインジケータを コンバージョンアクションを hasNext(true)

設定できる属性については、以下をご覧ください。 GuidedAction

アクションに応答するには、 onGuidedActionClicked() を実行し、渡された GuidedAction。選択したアクションを特定 GuidedAction.getId() を調べる。

サブアクションを追加する

アクションによっては、ユーザーに追加の選択肢を提供する必要がある場合もあります。 GuidedAction には、次のリストを指定できます。 子アクションのメニューとして表示されるサブアクションです。

図 2. ガイド付きステップのサブアクション

サブアクション リストには、通常のアクションまたはラジオボタン アクションを含めることができますが、 日付の選択や編集可能なテキストのアクションは使用できませんまた、サブアクションに独自の サポートしているからです。

サブアクションを追加するには、まず サブアクションとして機能する GuidedAction オブジェクト。次の例をご覧ください。

Kotlin

subActions.add(GuidedAction.Builder()
        .id(SUBACTION1)
        .title(getString(R.string.guidedstep_subaction1_title))
        .description(getString(R.string.guidedstep_subaction1_desc))
        .build())
...

Java

List<GuidedAction> subActions = new ArrayList<GuidedAction>();
subActions.add(new GuidedAction.Builder()
       .id(SUBACTION1)
       .title(getString(R.string.guidedstep_subaction1_title))
       .description(getString(R.string.guidedstep_subaction1_desc))
       .build());
...

onCreateActions() で、最上位レイヤを 次を表示する GuidedAction サブアクションのリストを表示します。

Kotlin

    ...
    actions.add(GuidedAction.Builder()
            .id(SUBACTIONS)
            .title(getString(R.string.guidedstep_subactions_title))
            .description(getString(R.string.guidedstep_subactions_desc))
            .subActions(subActions)
            .build())
    ...

Java

@Override
public void onCreateActions(List<GuidedAction> actions, Bundle savedInstanceState) {
...
    actions.add(new GuidedAction.Builder()
           .id(SUBACTIONS)
           .title(getString(R.string.guidedstep_subactions_title))
           .description(getString(R.string.guidedstep_subactions_desc))
           .subActions(subActions)
           .build());
...
}

最後に、オーバーライドを使用してサブアクションの選択に応答します。 onSubGuidedActionClicked():

Kotlin

override fun onSubGuidedActionClicked(action: GuidedAction): Boolean {
    // Check for which action was clicked and handle as needed
    when(action.id) {
        SUBACTION1 -> {
            // Subaction 1 selected
        }
    }
    // Return true to collapse the subactions menu or
    // false to keep the menu expanded
    return true
}

Java

@Override
public boolean onSubGuidedActionClicked(GuidedAction action) {
   // Check for which action was clicked and handle as needed
   if (action.getId() == SUBACTION1) {
       // Subaction 1 selected
   }
   // Return true to collapse the subactions menu or
   // false to keep the menu expanded
   return true;
}

ボタン アクションを追加する

ガイド付きの手順に多数のアクション リストがある場合は、リストをスクロールしなければならないことがあります よく使用するアクションにアクセスします。ボタン アクションを使用して よく使うアクションのリストを追加します。ボタン操作は横にある 簡単に移動できます

図 3. ガイド付きステップのボタン アクション

ボタン アクションは通常のアクションと同様に作成、処理されますが、 ボタン アクション onCreateButtonActions() onCreateActions() の代わりに表示されます。ボタン アクションへの応答 onGuidedActionClicked()

ボタン アクションは、ステップ間のナビゲーション アクションなどのシンプルなアクションに使用します。 日付選択アクションやその他の編集可能なアクションをボタン アクションとして使用しないでください。 また、ボタン アクションにサブアクションを含めることはできません。

複数のガイド付きステップをガイド付きシーケンスにグループ化する

GuidedStepSupportFragment 1 つのステップを表します順序付けされたステップを作成するには、複数のステップを GuidedStepSupportFragment オブジェクトをまとめて GuidedStepSupportFragment.add() を追加します フラグメント スタックに追加できます。

Kotlin

override fun onGuidedActionClicked(action: GuidedAction) {
    val fm = fragmentManager
    when(action.id) {
        CONTINUE -> GuidedStepSupportFragment.add(fm, SecondStepFragment())
    }
}

Java

@Override
public void onGuidedActionClicked(GuidedAction action) {
    FragmentManager fm = getFragmentManager();
    if (action.getId() == CONTINUE) {
       GuidedStepSupportFragment.add(fm, new SecondStepFragment());
    }
...

ユーザーがテレビのリモコンの [戻る] ボタンを押すと、前の フラグメント スタックに対する GuidedStepSupportFragment。もし 独自の GuidedAction を指定する 前のステップに戻る場合は、次の呼び出しによって「戻る」動作を実装できます。 getFragmentManager().popBackStack()。 ユーザーをシーケンスのさらに前のステップに戻す必要がある場合は、次のコマンドを使用します。 popBackStackToGuidedStepSupportFragment() フラグメント スタック内の特定の GuidedStepSupportFragment に戻すことができます。

ユーザーがシーケンスの最後のステップを終了したら、次のコマンドを使用します。 すべて削除するには finishGuidedStepSupportFragments()します GuidedStepSupportFragment 個のインスタンス 元の親アクティビティに戻ります。もし 最初の GuidedStepSupportFragment が追加されました addAsRoot() を使用し、 finishGuidedStepSupportFragments() は親アクティビティも終了します。

ステップの表示をカスタマイズする

GuidedStepSupportFragment クラスは、カスタム タイトル テキストの書式設定やステップの遷移など、表示方法を制御するテーマ 作成できます。カスタムテーマの継承先: Theme_Leanback_GuidedStep。提供可能 オーバーライドする機能が用意されています。 GuidanceStylistGuidedActionsStylist

GuidedStepSupportFragment にカスタムテーマを適用するには: 次のいずれかを行います。

  • 親アクティビティにテーマを適用するには、android:theme 属性を Android マニフェスト内のアクティビティ要素に追加します。この属性を設定すると、すべての子にテーマが適用されます ビューであり、親アクティビティに GuidedStepSupportFragment オブジェクト。
  • アクティビティですでにカスタムテーマを使用していて、適用したくない場合 アクティビティ内の他のビューに GuidedStepSupportFragment スタイルを適用し、 LeanbackGuidedStepTheme_guidedStepThemeを追加 属性を既存のカスタム アクティビティ テーマに追加します。この属性は、作成したカスタムテーマを GuidedStepSupportFragment オブジェクトのみ 記録します。
  • GuidedStepSupportFragment オブジェクトを複数の異なる環境で使用する場合、 複数のステップからなる同じタスクの一部であり、一貫した すべてのステップにおけるビジュアル テーマのオーバーライド GuidedStepSupportFragment.onProvideTheme() を実行し、カスタムテーマを返します。

スタイルとテーマを追加する方法について詳しくは、 スタイルとテーマ

GuidedStepSupportFragment クラスは特別な テーマ属性にアクセスして適用するためのスタイリスト クラスGuidanceStylist クラスはテーマ情報を使用する 左のガイダンス ビューの表示をコントロールし、 GuidedActionsStylist クラスがテーマ情報を使用する 適切なアクション ビューの表示をコントロールできます。

テーマのカスタマイズで提供される内容を超えてステップのビジュアル スタイルをカスタマイズするには、サブクラスで GuidanceStylist または GuidedActionsStylist を呼び出し、サブクラスを GuidedStepSupportFragment.onCreateGuidanceStylist() または GuidedStepSupportFragment.onCreateActionsStylist()。 これらのサブクラスでカスタマイズできる内容について詳しくは、 GuidanceStylistGuidedActionsStylist