Przedstaw swoją aplikację nowym użytkownikom

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 → .

Aby pokazać nowemu użytkownikowi, jak może maksymalnie wykorzystać możliwości aplikacji, zamieść prezentację podczas uruchamiania aplikacji. Oto kilka przykładów informacje:

  • Gdy użytkownik pokazuje użytkownikowi, które kanały są dostępne, pierwszy raz otwiera aplikację kanału.
  • Zwróć uwagę na najważniejsze funkcje aplikacji.
  • Opisz wymagane lub zalecane kroki, które użytkownicy powinni wykonać, za pierwszym razem.

Biblioteka androidx.leanback udostępnia funkcje OnboardingSupportFragment zajęcia dla w ramach prezentacji informacje o użytkowniku po raz pierwszy. W tym przewodniku opisujemy, jak korzystać z OnboardingSupportFragment zajęcia do wyświetlenia informacje wprowadzające dla użytkowników, które są wyświetlane przy pierwszym uruchomieniu aplikacji. obecnie się znajdujesz.

Aplikacja OnboardingSupportFragment korzysta z interfejsu telewizora sprawdzone metody prezentowania informacji w sposób dopasowany do stylów interfejsu telewizora i jest łatwa w obsłudze na telewizorach.

Rysunek 1. Przykład OnboardingSupportFragment

Element OnboardingSupportFragment nie jest odpowiedni w każdym przypadku użycia. Nie używaj OnboardingSupportFragment, gdy musisz dodać elementy interfejsu, które wymagają danych wejściowych użytkownika, takie jak przyciski i pola; Nie używaj też nazwy OnboardingSupportFragment do zadań, które ten użytkownik będzie wykonywać regularnie. Jeśli musisz zaprezentować wielostronicowy interfejs użytkownika, który wymaga użytkowników, rozważ użycie GuidedStepSupportFragment

Dodaj fragment OnboardingSupportFragment

Aby dodać: OnboardingSupportFragment do aplikacji, zaimplementuj klasę, która rozszerza klasy OnboardingSupportFragment. Dodaj ten fragment do aktywności, korzystając z kodu XML układu aktywności lub automatycznie. Upewnij się, że aktywność lub Ten fragment korzysta z motywu opartego na Theme_Leanback_Onboarding, jak opisano w sekcji Dostosowywanie motywów.

W metodzie onCreate() Twojego główną aktywność w aplikacji, połączenie startActivity() z Intent wskazującym aktywność rodzica OnboardingSupportFragment Dzięki temu Twoje reklamy OnboardingSupportFragment jest wyświetlany jako zaraz po uruchomieniu aplikacji.

Aby zapewnić, że OnboardingSupportFragment wyświetla się tylko w przy pierwszym uruchomieniu aplikacji przez użytkownika, użyj atrybutu SharedPreferences obiekt śledzić, czy użytkownik już wyświetlił OnboardingSupportFragment Zdefiniuj wartość logiczną wartość, która zmienia się na true, gdy użytkownik obejrzy OnboardingSupportFragment Sprawdź tę wartość w głównych aktywnościach onCreate() i rozpocznij tylko OnboardingSupportFragment aktywność rodzica, jeśli wartość to false (fałsz).

Poniższy przykład pokazuje zastąpienie reguły onCreate(), które sprawdza, czy SharedPreferences ma wartość, a jeśli nie jest ustawiona na „true” (prawda), 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 je jako wyświetlone przy użyciu obiektu SharedPreferences. Aby to zrobić, zastąp onFinishFragment() w: OnboardingSupportFragment i ustaw SharedPreferences jak 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();
}

Dodaj strony OnboardingSupportFragment

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

Rysunek 2. OnboardingSupportFragment elementów strony.

Ilustracja 2 przedstawia przykładową stronę z objaśnieniami oznaczającymi stronę możliwą do dostosowania elementy, które OnboardingSupportFragment co może dostarczyć. Elementy strony to:

  1. Tytuł strony.
  2. Opis strony.
  3. Widok zawartości strony, w tym przypadku prosty zielony znacznik wyboru w szarym polu. Ten widok jest opcjonalny. Użyj tego widoku do zilustrowania szczegółów strony. Możesz na przykład: dołączyć zrzut ekranu przedstawiający funkcję aplikacji
  4. Widok tła strony, w tym przypadku prosty niebieski gradient. Ten widok zawsze jest wyświetlana za innymi widokami na stronie. Ten widok jest opcjonalny.
  5. Widok na pierwszym planie strony, w tym przypadku logo. Ten widok zawsze renderuje przed wszystkimi innymi widokami na stronie. Ten widok jest opcjonalny.

Inicjuj informacje o stronie, gdy Pierwsze utworzenie: OnboardingSupportFragment lub dołączone do aktywności nadrzędnej, zgodnie z żądaniami systemu informacji podczas tworzenia widoku fragmentu. Możesz zainicjować stronę w konstruktorze klas lub w zastąpieniu onAttach()

Zastąp każdą z poniższych metod, które dostarczają informacje o stronie do systemu:

Zastąp każdą z poniższych metod, aby wyświetlić opcjonalne widoki podrzędne w celu wyświetlenia obrazów lub animacji:

  • onCreateBackgroundView() zwraca wartość View, create, aby działać jako widok tła, lub wartość null, jeśli nie jest potrzebny widok tła.
  • onCreateContentView() zwraca wartość View, create, aby działać jako wyświetlenie treści, lub wartość null, jeśli nie jest potrzebne żadne wyświetlenie treści.
  • onCreateForegroundView() zwraca wartość View, create, aby działać jako widok na pierwszym planie, lub wartość null, jeśli nie jest potrzebny żaden widok na pierwszym planie.

System doda do strony utworzone przez Ciebie View układ. Poniższy przykładowy zastąpi 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;
}

Dodaj początkowy ekran z logo

OnboardingSupportFragment może się uruchomić z opcjonalnym ekranem z logo przedstawiającym aplikację. Jeśli chcesz wyświetlać Drawable jako ekran z logo, setLogoResourceId() z identyfikatorem Twojego urządzenia Drawable w: onCreate() metody OnboardingSupportFragment. System naświetli się i na chwilę wyświetli Drawable, a następnie przyciemnia się o Drawable przed wyświetleniem pierwszej strony OnboardingSupportFragment.

Jeśli chcesz stworzyć niestandardową animację na ekranie z logo, zamiast wywołuję setLogoResourceId(), zastąp onCreateLogoAnimation() i zwróć Animator który renderuje niestandardową animację, jak 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);
}

Dostosuj animacje na stronie

System stosuje domyślne animacje przy wyświetlaniu pierwszej strony Twojej witryny OnboardingSupportFragment, a gdy użytkownik powoduje przejście na inną stronę. Możesz dostosować te animacje, zastępowania metod w OnboardingSupportFragment

Aby dostosować animację wyświetlaną na pierwszej stronie: zastąpić onCreateEnterAnimation() i zwraca Animator. Ten przykład pozwala utworzyć obiekt 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ąpić onPageChanged() W metodzie onPageChanged() utwórz obiekty Animator usuwających poprzednią stronę i wyświetlających następną stronę, dodaj je do sekcji AnimatorSet i zagrać set. Poniżej wykorzystuje animację zanikania w celu usunięcia poprzedniej strony, aktualizuje i wykorzystuje animację zanikania do wyświetlenia następnej strony:

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, patrz Omówienie animacji obiektu.

Dostosuj motywy

Dowolny OnboardingSupportFragment musi używać funkcji Motyw Theme_Leanback_Onboarding lub motyw, który dziedziczy z elementu Theme_Leanback_Onboarding. Ustaw parametr motyw urządzenia OnboardingSupportFragment, wykonując jedną z tych czynności:

  • Ustaw aktywność rodzica OnboardingSupportFragment tak, aby używała wybranego motywu. Przykład poniżej pokazuje, jak skonfigurować aktywność Theme_Leanback_Onboarding w pliku manifestu aplikacji: 
    <activity
   android:name=".OnboardingActivity"
   android:enabled="true"
   android:exported="true"
   android:theme="@style/Theme.Leanback.Onboarding">
</activity>
  • Aby ustawić motyw w aktywności rodzica, użyj parametru LeanbackOnboardingTheme_onboardingTheme w niestandardowym temacie aktywności. Przypisz ten atrybut do innego motyw niestandardowy, który tylko OnboardingSupportFragment używane obiekty w aktywności. Zastosuj tę metodę, jeśli Twoja aktywność motyw niestandardowy i nie chcesz go stosować OnboardingSupportFragment stylów do innego wyświetleń w ramach aktywności.
  • Zastąp onProvideTheme() i zwróć wybrany motyw. Zastosuj tę metodę, jeśli: wiele aktywności wymaga OnboardingSupportFragment lub jeśli aktywność rodzica nie może użyć wybranego motywu. Poniższy 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