Przedstaw swoją aplikację nowym użytkownikom

Twórz lepsze aplikacje dzięki Compose
Twórz piękne interfejsy użytkownika przy użyciu minimalnej ilości kodu dzięki Jetpack Compose na Androida TV.
Compose for TV →

Aby pokazać nowym użytkownikom, jak najlepiej korzystać z Twojej aplikacji, wyświetlaj informacje wprowadzające podczas jej uruchamiania. Oto kilka przykładów informacji wprowadzających:

  • Wyświetlaj szczegółowe informacje o tym, które kanały są dostępne, gdy użytkownik po raz pierwszy otwiera aplikację kanału.
  • Zwróć uwagę na najważniejsze funkcje aplikacji.
  • Zilustruj wymagane lub zalecane kroki, które użytkownicy powinni wykonać podczas pierwszego korzystania z aplikacji.

Biblioteka androidx.leanback udostępnia klasę OnboardingSupportFragment do wyświetlania informacji dla nowych użytkowników. Z tego przewodnika dowiesz się, jak używać klasy OnboardingSupportFragment do wyświetlania informacji wprowadzających, które pojawiają się przy pierwszym uruchomieniu aplikacji.

OnboardingSupportFragment korzysta z sprawdzonych metod projektowania interfejsu TV, aby wyświetlać informacje w sposób pasujący do stylów interfejsu TV i ułatwiający nawigację na urządzeniach TV.

Rysunek 1. Przykład OnboardingSupportFragment.

OnboardingSupportFragment nie jest odpowiedni do wszystkich przypadków użycia. Nie używaj OnboardingSupportFragment, gdy musisz uwzględnić elementy interfejsu, które wymagają danych wejściowych użytkownika, takie jak przyciski i pola. Nie używaj też OnboardingSupportFragment do zadań, które użytkownik będzie wykonywać regularnie. Jeśli musisz wyświetlić interfejs wielostronicowy, który wymaga danych wejściowych użytkownika, rozważ użycie GuidedStepSupportFragment.

Dodawanie OnboardingSupportFragment

Aby dodać OnboardingSupportFragment do aplikacji, zaimplementuj klasę, która rozszerza klasę OnboardingSupportFragment. Dodaj ten fragment do aktywności, używając układu XML aktywności lub programowo. Upewnij się, że aktywność lub fragment używa motywu pochodzącego od Theme_Leanback_Onboarding, jak opisano w sekcji Dostosowywanie motywów.

W metodzie onCreate() głównej aktywności aplikacji wywołaj startActivity() z Intent, który wskazuje aktywność nadrzędną OnboardingSupportFragment. Dzięki temu OnboardingSupportFragment pojawi się od razu po uruchomieniu aplikacji.

Aby mieć pewność, że OnboardingSupportFragment pojawi się tylko przy pierwszym uruchomieniu aplikacji przez użytkownika, użyj obiektu SharedPreferences, aby śledzić, czy użytkownik już widział OnboardingSupportFragment. Zdefiniuj wartość logiczną, która zmieni się na true, gdy użytkownik skończy oglądać OnboardingSupportFragment. Sprawdź tę wartość w metodzie onCreate() głównej aktywności i uruchom aktywność nadrzędną OnboardingSupportFragment tylko wtedy, gdy wartość jest fałszywa.

Poniższy przykład pokazuje zastąpienie onCreate(), które sprawdza wartość SharedPreferences i, jeśli nie jest ustawiona na true, wywołuje startActivity(), aby wyświetlić OnboardingSupportFragment:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    PreferenceManager.getDefaultSharedPreferences(this).apply {
        // Check if we need to display our OnboardingSupportFragment
        if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingSupportFragment yet, so show it
            startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java))
        }
    }
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SharedPreferences sharedPreferences =
            PreferenceManager.getDefaultSharedPreferences(this);
    // Check if we need to display our OnboardingSupportFragment
    if (!sharedPreferences.getBoolean(
            MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
        // The user hasn't seen the OnboardingSupportFragment yet, so show it
        startActivity(new Intent(this, OnboardingActivity.class));
    }
}

Gdy użytkownik wyświetli OnboardingSupportFragment, oznacz go jako wyświetlony za pomocą obiektu SharedPreferences. Aby to zrobić, zastąp onFinishFragment() w OnboardingSupportFragment i ustaw wartość SharedPreferences na true, jak pokazano w tym przykładzie:

Kotlin

override fun onFinishFragment() {
    super.onFinishFragment()
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
        putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true)
        apply()
    }
}

Java

@Override
protected void onFinishFragment() {
    super.onFinishFragment();
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    SharedPreferences.Editor sharedPreferencesEditor =
            PreferenceManager.getDefaultSharedPreferences(getContext()).edit();
    sharedPreferencesEditor.putBoolean(
            COMPLETED_ONBOARDING_PREF_NAME, true);
    sharedPreferencesEditor.apply();
}

Dodawanie stron OnboardingSupportFragment

OnboardingSupportFragment wyświetla treści w serii uporządkowanych stron. Po dodaniu OnboardingSupportFragment musisz zdefiniować strony wprowadzające. Każda strona może mieć tytuł, opis i kilka widoków podrzędnych, które mogą zawierać obrazy lub animacje.

Rysunek 2. Elementy strony OnboardingSupportFragment.

Rysunek 2 przedstawia przykładową stronę z objaśnieniami oznaczającymi konfigurowalne elementy strony, które może udostępniać OnboardingSupportFragment. Elementy strony to:

  1. Tytuł strony.
  2. Opis strony.
  3. Widok treści strony, w tym przypadku prosty zielony znacznik wyboru w szarym polu. Ten widok jest opcjonalny. Użyj tego widoku, aby zilustrować szczegóły strony. Możesz na przykład dodać zrzut ekranu, który wyróżnia funkcję aplikacji opisaną na stronie.
  4. Widok tła strony, w tym przypadku prosty niebieski gradient. Ten widok jest zawsze renderowany za innymi widokami na stronie. Ten widok jest opcjonalny.
  5. Widok pierwszego planu strony, w tym przypadku logo. Ten widok jest zawsze renderowany przed wszystkimi innymi widokami na stronie. Ten widok jest opcjonalny.

Zainicjuj informacje o stronie, gdy OnboardingSupportFragment zostanie utworzony lub dołączony do aktywności nadrzędnej, ponieważ system żąda informacji o stronie, gdy tworzy widok fragmentu. Informacje o stronie możesz zainicjować w konstruktorze klasy lub w zastąpieniu onAttach().

Zastąp każdą z tych metod, które przekazują informacje o stronie do systemu:

Zastąp każdą z tych metod, aby udostępnić opcjonalne widoki podrzędne do wyświetlania obrazów lub animacji:

  • onCreateBackgroundView() zwraca View który tworzysz jako widok tła, lub wartość null, jeśli nie jest potrzebny żaden widok tła.
  • onCreateContentView() zwraca View, który tworzysz jako widok treści, lub wartość null, jeśli nie jest potrzebny żaden widok treści.
  • onCreateForegroundView() zwraca View, który tworzysz jako widok pierwszego planu, lub wartość null, jeśli nie jest potrzebny żaden widok pierwszego planu.

System dodaje utworzony przez Ciebie View do układu strony. Ten przykład zastępuje onCreateContentView() i zwraca ImageView:

Kotlin

private lateinit var contentView: ImageView
...
override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? {
    return ImageView(context).apply {
        scaleType = ImageView.ScaleType.CENTER_INSIDE
        setImageResource(R.drawable.onboarding_content_view)
        setPadding(0, 32, 0, 32)
        contentView = this
    }
}

Java

private ImageView contentView;
...
@Override
protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
    contentView = new ImageView(getContext());
    contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    contentView.setImageResource(R.drawable.onboarding_content_view);
    contentView.setPadding(0, 32, 0, 32);
    return contentView;
}

Dodawanie początkowego ekranu z logo

Twój OnboardingSupportFragment może zaczynać się od opcjonalnego ekranu z logo, który przedstawia Twoją aplikację. Jeśli chcesz wyświetlić a Drawable jako ekran z logo, wywołaj setLogoResourceId() z identyfikatorem Drawable w metodzie onCreate() w OnboardingSupportFragment. System stopniowo wyświetla Drawable, a następnie stopniowo go ukrywa, zanim wyświetli pierwszą stronę OnboardingSupportFragment.Drawable

Jeśli chcesz dodać niestandardową animację ekranu z logo, zamiast wywoływać setLogoResourceId() zastąp onCreateLogoAnimation() i zwróć obiekt Animator, który renderuje niestandardową animację, jak pokazano w tym przykładzie:

Kotlin

public override fun onCreateLogoAnimation(): Animator =
        AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)

Java

@Override
public Animator onCreateLogoAnimation() {
    return AnimatorInflater.loadAnimator(getContext(),
            R.animator.onboarding_logo_screen_animation);
}

Dostosowywanie animacji stron

System używa domyślnych animacji podczas wyświetlania pierwszej strony OnboardingSupportFragment i gdy użytkownik przechodzi na inną stronę. Możesz dostosować te animacje, zastępując metody w OnboardingSupportFragment.

Aby dostosować animację, która pojawia się na pierwszej stronie, zastąp onCreateEnterAnimation() i zwróć Animator. Ten przykład tworzy Animator, który skaluje widok treści w poziomie:

Kotlin

override fun onCreateEnterAnimation(): Animator =
    ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f)
            .setDuration(ANIMATION_DURATION)

Java

@Override
protected Animator onCreateEnterAnimation() {
    Animator startAnimator = ObjectAnimator.ofFloat(contentView,
            View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION);
    return startAnimator;
}

Aby dostosować animację używaną, gdy użytkownik przechodzi na inną stronę, zastąp onPageChanged(). W metodzie onPageChanged() utwórz obiekty Animator które usuwają poprzednią stronę i wyświetlają następną, dodaj je do AnimatorSet, i odtwórz zestaw. Ten przykład używa animacji zanikania, aby usunąć poprzednią stronę, aktualizuje obraz widoku treści i używa animacji pojawiania się, aby wyświetlić następną stronę:

Kotlin

override fun onPageChanged(newPage: Int, previousPage: Int) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f)
            .setDuration(ANIMATION_DURATION)
            .apply {
                addListener(object : AnimatorListenerAdapter() {

                    override fun onAnimationEnd(animation: Animator) {
                        mContentView.setImageResource(pageImages[newPage])
                    }
                })
            }
    // Create a fade-in animation for nextPage
    val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
            .setDuration(ANIMATION_DURATION)
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet().apply {
        playSequentially(fadeOut, fadeIn)
        start()
    }
}

Java

@Override
protected void onPageChanged(final int newPage, int previousPage) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    Animator fadeOut = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION);
    fadeOut.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mContentView.setImageResource(pageImages[newPage]);
        }
    });
    // Create a fade-in animation for nextPage
    Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet set = new AnimatorSet();
    set.playSequentially(fadeOut, fadeIn);
    set.start();
}

Więcej informacji o tworzeniu Animator obiektów i AnimatorSet obiektów znajdziesz w artykule Omówienie animacji właściwości.

Dostosuj motywy

Każda OnboardingSupportFragment implementacja musi używać motywu Theme_Leanback_Onboarding lub motywu, który dziedziczy po Theme_Leanback_Onboarding. Ustaw motyw dla OnboardingSupportFragment, wykonując jedną z tych czynności:

  • Ustaw aktywność nadrzędną OnboardingSupportFragment, aby używała wybranego motywu. Ten przykład pokazuje, jak ustawić aktywność, aby używała Theme_Leanback_Onboarding w pliku manifestu aplikacji: 
    <activity
   android:name=".OnboardingActivity"
   android:enabled="true"
   android:exported="true"
   android:theme="@style/Theme.Leanback.Onboarding">
</activity>
  • Ustaw motyw w aktywności nadrzędnej, używając atrybutu LeanbackOnboardingTheme_onboardingTheme w niestandardowym motywie aktywności. Wskaż ten atrybut na inny motyw niestandardowy, którego używają tylko obiekty OnboardingSupportFragment w Twojej aktywności. Użyj tej metody, jeśli Twoja aktywność używa już motywu niestandardowego i nie chcesz stosować stylów OnboardingSupportFragment do innych widoków w aktywności.
  • Zastąp onProvideTheme() i zwróć wybrany motyw. Użyj tej metody, jeśli OnboardingSupportFragment jest używany w wielu aktywnościach lub jeśli aktywność nadrzędna nie może używać wybranego motywu. Ten przykład zastępuje onProvideTheme() i zwraca Theme_Leanback_Onboarding:

    Kotlin

    override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding

    Java

    @Override
public int onProvideTheme() {
   return R.style.Theme_Leanback_Onboarding;
}
Wstecz
Korzystanie z ustawień transportu
Dalej
Dodaj krok z przewodnikiem