Dodaj krok z przewodnikiem

Ulepszaj dzięki funkcji tworzenia wiadomości

Dzięki Jetpack Compose na system operacyjny Android TV możesz tworzyć atrakcyjne interfejsy użytkownika przy użyciu minimalnej ilości pisania.

Tworzenie wiadomości do telewizora → .

Aplikacja może zawierać zadania wieloetapowe dla użytkowników. Aplikacja może na przykład wymagać instrukcji przez zakup dodatkowych treści, skonfigurowanie złożonego ustawienia konfiguracji lub po prostu potwierdzenie decyzji. Wszystkie te zadania wymagają przedstawienia użytkownikom co najmniej jednego uporządkowanego kroków lub decyzji.

Biblioteka androidx.leanback zawiera klasy do implementowania wieloetapowych zadań użytkownika. Ta strona objaśnia sposoby korzystania z GuidedStepSupportFragment zajęcia Pomaga użytkownikowi podjąć decyzję o wykonaniu zadania. GuidedStepSupportFragment korzysta ze sprawdzonych metod korzystania z interfejsu TV, aby ułatwić zrozumienie wieloetapowych zadań i nawigację na urządzeniach telewizyjnych.

Podaj szczegóły kroku

GuidedStepSupportFragment oznacza pojedynczy krok w serii kroków. Zawiera on widok wskazówek z listę możliwych działań lub decyzji w danym kroku.

Rysunek 1. Przykładowy przewodnik.

W przypadku każdego kroku zadania wieloetapowego wydłuż GuidedStepSupportFragment i podaj informacje kontekstowe na temat: czynności, jakie może wykonać użytkownik. Zastąp onCreateGuidance() i zwrócić nowy, GuidanceStylist.Guidance z kontekstem takie jak tytuł, opis i ikona kroku, jak w tym przykładzie:

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

Dodaj podklasę GuidedStepSupportFragment do wybranej klasy aktywność przez połączenie GuidedStepSupportFragment.add() w metodzie onCreate() Twojej aktywności.

Jeśli aktywność zawiera tylko GuidedStepSupportFragment obiektów, użyj funkcji GuidedStepSupportFragment.addAsRoot() zamiast add(), aby dodać pierwsze GuidedStepSupportFragment. Zastosowanie addAsRoot() pomaga zagwarantować, że użytkownik naciśnie przycisk Wstecz na pilocie telewizora podczas oglądania pierwszy GuidedStepSupportFragment, zarówno GuidedStepSupportFragment i aktywność rodzica zostaną zamknięte.

Uwaga: dodaj GuidedStepSupportFragment obiektów automatycznie, a nie w plikach XML układu.

Tworzenie i obsługa działań użytkowników

Dodaj działania użytkowników przez zastąpienie onCreateActions() W zastępstwie dodaj nową wartość GuidedAction do każdej z nich działania oraz podaj ciąg znaków działania, opis i identyfikator. Używaj GuidedAction.Builder, aby dodać nowe działania.

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

Działania nie są ograniczone do pojedynczych wierszy. Oto dodatkowe typy działania, które możesz utworzyć:

• Dodaj działanie etykiety informacyjnej, aby wyświetlać dodatkowe informacje o wyborze użytkownika poprzez ustawienie infoOnly(true) Jeśli zasada infoOnly ma wartość Prawda, użytkownicy nie mogą wybrać działania.
• Dodawanie działania tekstowego z możliwością edytowania przez ustawienie editable(true) Jeśli editable ma wartość prawda, użytkownik może wpisywać tekst w wybranym działaniu za pomocą pilota lub podłączonej klawiatury. Zastąp onGuidedActionEditedAndProceed(), aby pobrać zmodyfikowany tekst wpisany przez użytkownika. Możesz też zastąpić parametr onGuidedActionEditCanceled(), aby otrzymywać informacje o tym, że użytkownik anuluje dane wejściowe.
• Dodaj zestaw działań, które działają jak przyciski opcji możliwych do zaznaczenia, za pomocą polecenia checkSetId() o wspólnej wartości identyfikatora, aby pogrupować działania w zbiór. Wszystkie działania na tej samej liście z taką samą są uznawane za połączone. Gdy użytkownik wybierze jedno z działań w tym zestawie, czynność zostanie zaznaczona, a pozostałe działania zostaną odznaczone.
• Dodaj działanie selektora daty za pomocą GuidedDatePickerAction.Builder zamiast GuidedAction.Builder w: onCreateActions(). Zastąp onGuidedActionEditedAndProceed(), aby pobrać wartość daty zmodyfikowania podanej przez użytkownika.
• Dodaj działanie używające poddziałań, aby umożliwić użytkownikowi wybranie produktu z rozszerzonej listy opcje wyboru. Działania podrzędne są opisane w sekcji Dodaj działania podrzędne.
• Dodaj działanie przycisku, które jest widoczne po prawej stronie listy działań. i łatwo dostępnych rozwiązań. Działania przycisku są opisane po kliknięciu przycisku Dodaj czynności.

Możesz też dodać wizualną wskazówkę, że wybranie działania prowadzi do nowego kroku: hasNext(true)

Opis wszystkich atrybutów, które można ustawić, znajdziesz w artykule GuidedAction

Aby reagować na działania, zastąp onGuidedActionClicked() i przetwórz przekazane dane GuidedAction Określ wybrane działanie przez sprawdzam: GuidedAction.getId().

Dodaj działania podrzędne

Niektóre działania mogą wymagać udostępnienia użytkownikowi dodatkowego zestawu opcji. O GuidedAction może określić listę działania, które wyświetlają się jako menu z działaniami podrzędnymi.

Rysunek 2. Poddziałania z instrukcjami krok po kroku.

Lista działań podrzędnych może zawierać zwykłe działania lub opcje, ale a nie selektora daty ani edytowalnych działań związanych z tekstem. Ponadto poddziałanie nie może mieć własnego zestaw poddziałań, ponieważ system obsługuje tylko jeden poziom poddziałań.

Aby dodać działania podrzędne, najpierw utwórz i wypełnij listę Obiekty GuidedAction, które działają jako działania podrzędne, jak w tym przykładzie:

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

Utwórz w usłudze onCreateActions() organizację najwyższego poziomu GuidedAction, w której wyświetla się lista wybranych działań podrzędnych:

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

Na koniec zareaguj na wybory poddziałania, zastępując 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;
}

Dodaj działania przycisku

Jeśli krok z przewodnikiem zawiera obszerną listę działań, użytkownicy mogą być zmuszeni do jej przewinięcia. aby uzyskać dostęp do najczęściej używanych działań. Użyj działania przycisków, aby rozdzielić często używane działania z listy. Obok pozycji listę działań i łatwe w nawigacji.

Rysunek 3. Działania przycisku z instrukcjami krok po kroku.

Działania związane z przyciskami są tworzone i obsługiwane tak jak zwykłe działania, ale Ty tworzysz działania przycisku w onCreateButtonActions() zamiast onCreateActions(). Reaguj na działania przycisków w: onGuidedActionClicked()

Używaj przycisków do prostych działań, np. do przechodzenia między krokami. Jako działania przycisku nie używaj działania selektora daty ani innych działań, które można edytować. Pamiętaj też, że przycisk nie może zawierać działań podrzędnych.

Grupuj kroki z instrukcjami w sekwencję z instrukcjami

GuidedStepSupportFragment to jeden krok. Aby utworzyć uporządkowaną sekwencję kroków, pogrupuj wiele GuidedStepSupportFragment obiektów razem za pomocą GuidedStepSupportFragment.add() do dodania kolejny krok w sekwencji do stosu fragmentów.

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

Jeśli użytkownik naciśnie przycisk Wstecz na pilocie telewizora, na urządzeniu wyświetli się poprzedni GuidedStepSupportFragment w stosie fragmentów. Jeśli wpisz własny GuidedAction, który do poprzedniego kroku, możesz zaimplementować działanie Wstecz, wywołując getFragmentManager().popBackStack() Jeśli chcesz przywrócić użytkownika do jeszcze wcześniejszego kroku sekwencji, użyj funkcji popBackStackToGuidedStepSupportFragment() aby wrócić do określonego elementu GuidedStepSupportFragment w stosie fragmentów.

Gdy użytkownik zakończy ostatni krok w sekwencji, użyj ciągu finishGuidedStepSupportFragments(), aby usunąć wszystkie GuidedStepSupportFragment instancja od bieżącego stosu i powróci do pierwotnej aktywności nadrzędnej. Jeśli dodano pierwsze pole GuidedStepSupportFragment używając konta addAsRoot(), dzwoni finishGuidedStepSupportFragments() zamyka też aktywność nadrzędną.

Dostosuj prezentację kroku

Klasa GuidedStepSupportFragment może używać opcji niestandardowych motywy, które kontrolują aspekty prezentacji, takie jak formatowanie tekstu tytułu czy przejście krokowe; ani animacji. Motywy niestandardowe muszą dziedziczyć z: Theme_Leanback_GuidedStep i może podać zastępowanie wartości dla atrybutów zdefiniowanych w GuidanceStylist i GuidedActionsStylist

Aby zastosować motyw niestandardowy do urządzenia GuidedStepSupportFragment, wykonaj jedną z tych czynności:

• Zastosuj motyw do aktywności nadrzędnej, ustawiając atrybut android:theme na działania w pliku manifestu Androida. Ustawienie tego atrybutu powoduje zastosowanie motywu do wszystkich elementów podrzędnych i jest najprostszym sposobem na zastosowanie motywu niestandardowego, jeśli aktywność nadrzędna zawiera tylko GuidedStepSupportFragment obiekty.
• Jeśli Twoja aktywność korzysta już z motywu niestandardowego i nie chcesz go stosować GuidedStepSupportFragment stylów do innych widoków w aktywności, dodaj LeanbackGuidedStepTheme_guidedStepTheme do istniejącego niestandardowego motywu aktywności. Ten atrybut wskazuje motyw niestandardowy, który tylko obiekty GuidedStepSupportFragment w aktywności użytkowników.
• Jeśli używasz GuidedStepSupportFragment obiektów w różnych czynności, które są częścią tego samego ogólnego zadania wieloetapowego i chcą korzystać motyw wizualny we wszystkich krokach, zastąpić GuidedStepSupportFragment.onProvideTheme() i zwróć motyw niestandardowy.

Więcej informacji o dodawaniu stylów i motywów znajdziesz w artykule Style i motywy.

Klasa GuidedStepSupportFragment używa specjalnych stylowych klas, aby uzyskać dostęp do atrybutów motywów i je stosować. Klasa GuidanceStylist używa informacji o motywie. aby sterować prezentacją widoku wskazówek po lewej stronie, a Klasa GuidedActionsStylist używa informacji o motywie w celu kontrolowania wyświetlania właściwego widoku działań.

Aby dostosować styl wizualny kroków poza możliwości dostosowania motywu, podklasa GuidanceStylist lub GuidedActionsStylist i zwróć podklasę w GuidedStepSupportFragment.onCreateGuidanceStylist() lub GuidedStepSupportFragment.onCreateActionsStylist() Szczegółowe informacje o tym, co możesz dostosować w tych podklasach, znajdziesz w dokumentacji GuidanceStylist i GuidedActionsStylist