Interaktiven Schritt hinzufügen

Besser lernen mit der Funktion „Schreiben“

Mit Jetpack Compose für Android TV OS lassen sich mit nur minimalem Code ansprechende UIs erstellen.

<ph type="x-smartling-placeholder"></ph> Für TV verfassen →

Ihre Anwendung enthält möglicherweise mehrstufige Aufgaben für Nutzer. Zum Beispiel muss Ihre App möglicherweise zusätzliche Inhalte kaufen, komplexe Konfigurationseinstellungen einrichten oder eine Entscheidung zu bestätigen. Für all diese Aufgaben müssen Nutzende durch eine oder mehrere geordnete oder Entscheidungen zu treffen.

Die androidx.leanback-Bibliothek enthält Klassen zur Implementierung mehrstufiger Nutzeraufgaben. Diese Seite wird erläutert, wie Sie die GuidedStepSupportFragment Klasse um Nutzende durch eine Reihe von Entscheidungen zur Ausführung einer Aufgabe zu führen. GuidedStepSupportFragment verwendet Best Practices für die TV-Benutzeroberfläche, um mehrstufige Aufgaben auf Fernsehern leicht verständlich zu machen und zu navigieren.

Details zu einem Schritt angeben

Ein GuidedStepSupportFragment steht für einen einzelnen Schritt in einer Reihe. von Schritten. Visuell bietet es eine Orientierungsansicht mit einem Liste möglicher Aktionen oder Entscheidungen für den Schritt.

Abbildung 1: Ein Beispiel für einen geführten Schritt.

Erweitern Sie für jeden Schritt der mehrstufigen Aufgabe GuidedStepSupportFragment und Kontextinformationen zu und die Aktionen, die Nutzende ausführen können. Überschreiben onCreateGuidance() und eine neue GuidanceStylist.Guidance mit Kontext Informationen wie Titel, Beschreibung und Symbol des Schritts, wie im folgenden Beispiel gezeigt:

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)
    )
}

@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);
}

Fügen Sie die abgeleitete GuidedStepSupportFragment-Klasse der gewünschten Klasse hinzu. indem Sie GuidedStepSupportFragment.add() in der onCreate()-Methode Ihrer Aktivität.

Wenn deine Aktivität nur GuidedStepSupportFragment enthält Objekte, GuidedStepSupportFragment.addAsRoot() verwenden statt add(), um die erste GuidedStepSupportFragment hinzuzufügen. Mit addAsRoot() sorgt dafür, dass der Nutzer die Zurück-Taste auf der Fernbedienung des Fernsehers drückt, wenn er beim Ansehen von Videos die Taste „Zurück“ drückt die erste GuidedStepSupportFragment, sowohl die GuidedStepSupportFragment und die übergeordnete Aktivität werden geschlossen.

Hinweis:Fügen Sie GuidedStepSupportFragment-Objekten programmatisch erstellen, nicht in Ihren Layout-XML-Dateien.

Nutzeraktionen erstellen und verarbeiten

Nutzeraktionen durch Überschreiben hinzufügen onCreateActions() Fügen Sie in der Überschreibung für jede eine neue GuidedAction hinzu. Aktionselement und geben Sie den Aktionsstring, eine Beschreibung und die ID an. Verwenden Sie GuidedAction.Builder, um neue Aktionen hinzuzufügen.

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())
    ...

@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());
...

Die Aktionen sind nicht auf eine einzeilige Auswahl beschränkt. Hier sind weitere Arten von Aktionen, die Sie erstellen können:

• Fügen Sie eine Informationslabelaktion hinzu, um zusätzliche Informationen zu den Auswahlmöglichkeiten der Nutzer bereitzustellen, indem Sie Folgendes festlegen: infoOnly(true) Wenn infoOnly „true“ ist, können Nutzer die Aktion nicht auswählen.
• Bearbeitbare Textaktion über die Einstellung hinzufügen editable(true) Wenn editable auf „true“ gesetzt ist, kann der Nutzer in einer ausgewählten Aktion Text über die Funktion oder eine verbundene Tastatur verwenden. Überschreiben onGuidedActionEditedAndProceed(), um den geänderten Text abzurufen, den der Nutzer eingegeben hat. Sie können auch onGuidedActionEditCanceled() überschreiben, um zu erfahren, wann der Nutzer Eingaben abbricht.
• Fügen Sie eine Reihe von Aktionen hinzu, die sich wie aktivierte Optionsfelder verhalten, indem Sie checkSetId() mit einem gemeinsamen ID-Wert, um Aktionen in einer Gruppe zu gruppieren. Alle Aktionen in derselben Liste mit derselben die Prüfsatz-ID als verknüpft gelten. Wenn Nutzende eine der Aktionen in diesem Satz auswählen, aktiviert und alle anderen Aktionen deaktiviert.
• Fügen Sie eine Aktion zur Datumsauswahl hinzu, indem Sie GuidedDatePickerAction.Builder anstelle von GuidedAction.Builder in onCreateActions(). Überschreiben onGuidedActionEditedAndProceed(), um den geänderten Datumswert abzurufen, den der Nutzer eingegeben hat.
• Fügen Sie eine Aktion hinzu, bei der Unteraktionen verwendet werden, damit Nutzer aus einer erweiterten Liste von Unteraktionen auswählen können Auswahlmöglichkeiten. Unteraktionen werden im Abschnitt Unteraktionen hinzufügen beschrieben.
• Fügen Sie eine Schaltflächenaktion hinzu, die rechts neben der Liste angezeigt wird und einfach zugänglich zu machen. Die Aktionen der Schaltflächen werden im Abschnitt Schaltfläche hinzufügen Aktionen.

Sie können auch einen visuellen Indikator hinzufügen, führt zu einem neuen Schritt, indem hasNext(true)

Informationen zu den verschiedenen Attributen, die Sie festlegen können, finden Sie in GuidedAction

Um auf Aktionen zu reagieren, überschreiben Sie onGuidedActionClicked() und verarbeiten Sie die übergebene GuidedAction. Identifizieren Sie die ausgewählte Aktion anhand GuidedAction.getId() wird untersucht.

Unteraktionen hinzufügen

Bei einigen Aktionen müssen Sie dem Nutzer möglicherweise zusätzliche Auswahlmöglichkeiten geben. A GuidedAction kann eine Liste von Unteraktionen, die als Menü mit untergeordneten Aktionen angezeigt werden.

Abbildung 2: Unteraktionen mit Schritt-für-Schritt-Anleitung.

Die Liste der Unteraktionen kann normale Aktionen oder Optionsfeldaktionen enthalten, aber keine Datumsauswahl oder bearbeitbare Textaktionen. Eine Unteraktion kann keine eigene Gruppe von Unteraktionen, da das System nicht mehr als eine Ebene von Unteraktionen unterstützt.

Wenn Sie Unteraktionen hinzufügen möchten, müssen Sie zuerst eine Liste mit GuidedAction-Objekte, die als Unteraktionen fungieren, wie im folgenden Beispiel gezeigt:

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

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());
...

Erstellen Sie in onCreateActions() eine oberste Ebene. GuidedAction, in dem die Liste der Unteraktionen bei Auswahl:

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

@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());
...
}

Reagieren Sie abschließend auf die ausgewählten Unteraktionen, indem Sie onSubGuidedActionClicked():

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
}

@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;
}

Schaltflächenaktionen hinzufügen

Wenn Ihr geführter Schritt viele Aktionen enthält, müssen die Nutzer möglicherweise durch die Liste scrollen um auf die am häufigsten verwendeten Aktionen zuzugreifen. Schaltflächenaktionen zum Trennen verwenden Aktionen aus der Liste aus. Schaltflächenaktionen werden neben in der Aufgabenliste und sind einfach zu navigieren.

Abbildung 3: Schritt-für-Schritt-Aktionen.

Schaltflächenaktionen werden wie normale Aktionen erstellt und gehandhabt, aber Sie erstellen Schaltflächenaktionen in onCreateButtonActions() statt onCreateActions(). Auf Schaltflächenaktionen in onGuidedActionClicked()

Verwenden Sie Schaltflächenaktionen für einfache Aktionen wie das Navigieren zwischen Schritten. Verwenden Sie die Aktion für die Datumsauswahl oder andere bearbeitbare Aktionen nicht als Schaltflächenaktionen. Außerdem dürfen Schaltflächenaktionen keine Unteraktionen enthalten.

Geführte Schritte zu einer geführten Sequenz gruppieren

Ein GuidedStepSupportFragment steht für einen einzelnen Schritt. Gruppieren Sie mehrere Schritte, um eine geordnete Abfolge von Schritten zu erstellen. GuidedStepSupportFragment Objekte zusammen mithilfe von Zum Hinzufügen GuidedStepSupportFragment.add() zum Fragmentstapel hinzu.

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

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

Wenn der Nutzer die Zurück-Taste auf der Fernbedienung drückt, zeigt das Gerät die vorherige GuidedStepSupportFragment für den Fragmentstapel. Wenn Sie eigene GuidedAction angeben, die zum vorherigen Schritt zurückkehren, können Sie das "Zurück"-Verhalten implementieren, indem Sie getFragmentManager().popBackStack(). Wenn Sie den Nutzer zu einem noch früheren Schritt in der Sequenz zurückführen müssen, verwenden Sie popBackStackToGuidedStepSupportFragment() , um zu einem bestimmten GuidedStepSupportFragment im Fragmentstack zurückzukehren.

Wenn der Nutzer den letzten Schritt in der Sequenz beendet hat, verwenden Sie finishGuidedStepSupportFragments(), um alle zu entfernen GuidedStepSupportFragment Instanzen aus dem aktuellen Stapel entfernen und zur ursprünglichen übergeordneten Aktivität zurückkehren. Wenn die erste GuidedStepSupportFragment wurde hinzugefügt mit addAsRoot(), Anrufen finishGuidedStepSupportFragments() schließt auch die übergeordnete Aktivität.

Schrittpräsentation anpassen

Die Klasse GuidedStepSupportFragment kann benutzerdefinierte Designs, die Präsentationsaspekte wie die Formatierung des Titeltexts oder Stufenübergänge steuern Animationen. Benutzerdefinierte Designs müssen von Theme_Leanback_GuidedStep und kann Folgendes bereitstellen: die Werte für Attribute überschreiben, die in GuidanceStylist und GuidedActionsStylist

So wenden Sie ein benutzerdefiniertes Design auf GuidedStepSupportFragment an: Führen Sie einen der folgenden Schritte aus:

• Wenden Sie das Design auf die übergeordnete Aktivität an, indem Sie für das Attribut android:theme das Attribut Aktivitätselement im Android-Manifest. Wenn Sie dieses Attribut festlegen, wird das Design auf alle untergeordneten angezeigt. Dies ist die einfachste Möglichkeit, ein benutzerdefiniertes Design anzuwenden, wenn die übergeordnete Aktivität nur GuidedStepSupportFragment-Objekte.
• Wenn Sie für Ihre Aktivität bereits ein benutzerdefiniertes Design verwenden und es nicht anwenden möchten GuidedStepSupportFragment Stile zu anderen Ansichten in der Aktivität, LeanbackGuidedStepTheme_guidedStepTheme hinzufügen vorhandenen benutzerdefinierten Aktivitätsthema. Dieses Attribut verweist auf das benutzerdefinierte Design, nur die GuidedStepSupportFragment-Objekte in Ihrem Aktivitätsnutzung.
• Wenn Sie GuidedStepSupportFragment-Objekte in unterschiedlichen Aktivitäten, die Teil derselben mehrstufigen Aufgabe sind und eine einheitliche visuelles Design für alle Schritte, überschreiben GuidedStepSupportFragment.onProvideTheme() und geben Sie Ihr benutzerdefiniertes Design zurück.

Weitere Informationen zum Hinzufügen von Stilen und Designs finden Sie unter Stile und Designs:

Die Klasse GuidedStepSupportFragment verwendet spezielle Stylist-Klassen, um auf Designattribute zuzugreifen und diese anzuwenden. In der Klasse GuidanceStylist werden Designinformationen verwendet. um die Darstellung der Navigationsansicht nach links zu steuern, während die Für den Kurs „GuidedActionsStylist“ werden Designinformationen verwendet um die Darstellung der richtigen Aktionen zu steuern.

Um den visuellen Stil Ihrer Schritte über die Designanpassung hinaus anzupassen, erstellen Sie Unterklassen. GuidanceStylist oder GuidedActionsStylist und geben Ihre abgeleitete Klasse in GuidedStepSupportFragment.onCreateGuidanceStylist() oder GuidedStepSupportFragment.onCreateActionsStylist(). Weitere Informationen dazu, was Sie in diesen abgeleiteten Klassen anpassen können, finden Sie in der Dokumentation zu GuidanceStylist und GuidedActionsStylist.