Neue Nutzer in Ihre App einführen

Besser lernen mit der Funktion „Schreiben“
Mit Jetpack Compose für Android TV OS lassen sich mit nur minimalem Code ansprechende UIs erstellen.

Wenn Sie einem Erstnutzer zeigen möchten, wie er Ihre Anwendung optimal nutzen kann, präsentieren Sie beim Start der Anwendung Onboarding-Informationen. Hier sind einige Beispiele für Onboarding-Informationen:

  • Hiermit können Sie detaillierte Informationen darüber präsentieren, welche Kanäle verfügbar sind, wenn ein Nutzer zum ersten Mal auf eine Kanal-App zugreift.
  • Machen Sie auf wichtige Funktionen Ihrer App aufmerksam.
  • Erläutern Sie alle erforderlichen oder empfohlenen Schritte, die Nutzer ausführen müssen, wenn sie die App zum ersten Mal verwenden.

Die androidx.leanback-Bibliothek stellt die OnboardingSupportFragment-Klasse für die Darstellung von Informationen zu Erstnutzern bereit. In diesem Leitfaden wird beschrieben, wie du mithilfe der Klasse OnboardingSupportFragment einführende Informationen präsentierst, die beim ersten Start der App angezeigt werden.

OnboardingSupportFragment nutzt Best Practices für die TV-UI, um Informationen so darzustellen, dass sie dem Stil der TV-UI entsprechen und auf Fernsehern einfach zu navigieren ist.

Abbildung 1: Ein Beispiel für OnboardingSupportFragment.

OnboardingSupportFragment ist nicht für jeden Anwendungsfall geeignet. Verwenden Sie OnboardingSupportFragment nicht, wenn Sie UI-Elemente wie Schaltflächen und Felder einbinden müssen, die eine Nutzereingabe erfordern. Außerdem sollten Sie OnboardingSupportFragment nicht für Aufgaben verwenden, die der Nutzer regelmäßig ausführt. Wenn Sie eine mehrseitige UI bereitstellen müssen, für die eine Nutzereingabe erforderlich ist, sollten Sie die Verwendung von GuidedStepSupportFragment in Betracht ziehen.

OnboardingSupportFragment hinzufügen

Wenn du deiner App ein OnboardingSupportFragment hinzufügen möchtest, musst du eine Klasse implementieren, die die Klasse OnboardingSupportFragment erweitert. Fügen Sie dieses Fragment einer Aktivität hinzu, entweder mithilfe der Layout-XML-Datei der Aktivität oder programmatisch. Achten Sie darauf, dass für die Aktivität oder das Fragment ein Design verwendet wird, das von Theme_Leanback_Onboarding abgeleitet ist, wie im Abschnitt Designs anpassen beschrieben.

Rufen Sie in der onCreate()-Methode der Hauptaktivität Ihrer App startActivity() mit einem Intent auf, das auf die übergeordnete Aktivität Ihrer OnboardingSupportFragment verweist. Dadurch wird OnboardingSupportFragment sofort nach dem Start der Anwendung angezeigt.

Damit OnboardingSupportFragment nur dann angezeigt wird, wenn der Nutzer deine App zum ersten Mal startet, verwende ein SharedPreferences-Objekt, um nachzuverfolgen, ob der Nutzer die OnboardingSupportFragment bereits aufgerufen hat. Definieren Sie einen booleschen Wert, der in „true“ geändert wird, wenn der Nutzer das OnboardingSupportFragment angesehen hat. Prüfen Sie diesen Wert in der onCreate()-Methode Ihrer Hauptaktivität und starten Sie die übergeordnete Aktivität OnboardingSupportFragment nur, wenn der Wert „false“ ist.

Das folgende Beispiel zeigt eine Überschreibung von onCreate(), die auf einen SharedPreferences-Wert prüft und startActivity() aufruft, um OnboardingSupportFragment anzuzeigen:

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

Nachdem der Nutzer das OnboardingSupportFragment aufgerufen hat, markiere es mit dem SharedPreferences-Objekt als angezeigt. Überschreiben Sie dazu onFinishFragment() in Ihrer OnboardingSupportFragment und setzen Sie den Wert SharedPreferences auf „true“, wie im folgenden Beispiel gezeigt:

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

OnboardingSupportFragment-Seiten hinzufügen

Ein OnboardingSupportFragment zeigt Inhalte in einer Reihe von geordneten Seiten an. Nachdem Sie OnboardingSupportFragment hinzugefügt haben, müssen Sie die Onboarding-Seiten definieren. Jede Seite kann einen Titel, eine Beschreibung und mehrere Unteransichten haben, die Bilder oder Animationen enthalten können.

Abbildung 2: OnboardingSupportFragment-Seitenelemente.

Abbildung 2 zeigt eine Beispielseite mit Zusatzinformationen, die anpassbare Seitenelemente kennzeichnen, die dein OnboardingSupportFragment bereitstellen kann. Die Seitenelemente sind:

  1. Der Seitentitel.
  2. Die Seitenbeschreibung.
  3. Die Ansicht des Seiteninhalts, in diesem Fall ein einfaches grünes Häkchen in einem grauen Kästchen. Diese Ansicht ist optional. Verwenden Sie diese Ansicht, um Seitendetails zu veranschaulichen. Sie können beispielsweise einen Screenshot hinzufügen, der die auf der Seite beschriebene App-Funktion hervorhebt.
  4. Die Hintergrundansicht der Seite, in diesem Fall ein einfacher blauer Farbverlauf Diese Ansicht wird immer hinter anderen Ansichten auf der Seite gerendert. Diese Ansicht ist optional.
  5. Die Ansicht im Vordergrund der Seite, in diesem Fall ein Logo. Diese Ansicht wird immer vor allen anderen Ansichten auf der Seite gerendert. Diese Ansicht ist optional.

Initialisieren Sie die Seiteninformationen, wenn die OnboardingSupportFragment zum ersten Mal erstellt oder an die übergeordnete Aktivität angehängt wird, da das System beim Erstellen der Fragmentansicht Seiteninformationen anfordert. Sie können Seiteninformationen in Ihrem Klassenkonstruktor oder in einer Überschreibung von onAttach() initialisieren.

Überschreiben Sie jede der folgenden Methoden, die dem System Seiteninformationen bereitstellen:

  • getPageCount() gibt die Anzahl der Seiten in der OnboardingSupportFragment zurück.
  • getPageTitle() gibt den Titel der angeforderten Seitennummer zurück.
  • getPageDescription() gibt die Beschreibung für die angeforderte Seitennummer zurück.

Überschreiben Sie jede der folgenden Methoden, um optionale Unteransichten zur Anzeige von Bildern oder Animationen bereitzustellen:

  • onCreateBackgroundView() gibt eine View zurück, die Sie als Hintergrundansicht erstellt haben, oder null, wenn keine Hintergrundansicht erforderlich ist.
  • onCreateContentView() gibt ein View zurück, das Sie als Inhaltsansicht erstellen, oder null, wenn keine Inhaltsansicht erforderlich ist.
  • onCreateForegroundView() gibt eine View zurück, die Sie als Vordergrundansicht erstellen. Wenn keine Vordergrundansicht erforderlich ist, wird null zurückgegeben.

Das von dir erstellte View wird dem Seitenlayout hinzugefügt. Im folgenden Beispiel wird onCreateContentView() überschrieben und ein ImageView zurückgegeben:

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

Anfänglichen Logobildschirm hinzufügen

OnboardingSupportFragment kann mit einem optionalen Logobildschirm beginnen, über den deine App vorgestellt wird. Wenn du eine Drawable als Logo verwenden möchtest, rufe setLogoResourceId() mit der ID deines Drawable in der onCreate()-Methode des OnboardingSupportFragment auf. Das System schaltet sich ein, zeigt kurz Drawable an und blendet dann Drawable aus, bevor die erste Seite von OnboardingSupportFragment angezeigt wird.

Wenn Sie eine benutzerdefinierte Animation für Ihren Logobildschirm bereitstellen möchten, statt setLogoResourceId() aufzurufen, überschreiben Sie onCreateLogoAnimation() und geben ein Animator-Objekt zurück, das Ihre benutzerdefinierte Animation rendert, wie im folgenden Beispiel gezeigt:

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

Seitenanimationen anpassen

Das System verwendet Standardanimationen, wenn die erste Seite von OnboardingSupportFragment angezeigt wird und der Nutzer eine andere Seite aufruft. Sie können diese Animationen anpassen, indem Sie Methoden in OnboardingSupportFragment überschreiben.

Wenn Sie die Animation, die auf der ersten Seite angezeigt wird, anpassen möchten, überschreiben Sie onCreateEnterAnimation() und geben Sie Animator zurück. Im folgenden Beispiel wird ein Animator erstellt, das die Inhaltsansicht horizontal skaliert:

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

Wenn Sie die Animation anpassen möchten, die beim Aufrufen einer anderen Seite verwendet wird, überschreiben Sie onPageChanged(). Erstellen Sie in der Methode onPageChanged() Animator-Objekte, die die vorherige Seite entfernen und die nächste Seite anzeigen. Fügen Sie diese Objekte einem AnimatorSet hinzu und spielen Sie den Satz ab. Im folgenden Beispiel wird eine Ausblendungsanimation verwendet, um die vorherige Seite zu entfernen, das Bild der Inhaltsansicht aktualisiert und eine Einblendungsanimation zum Anzeigen der nächsten Seite verwendet:

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

Weitere Informationen zum Erstellen von Animator- und AnimatorSet-Objekten finden Sie unter Property-Animation – Übersicht.

Designs anpassen

Bei jeder OnboardingSupportFragment-Implementierung muss entweder das Design Theme_Leanback_Onboarding oder ein Design verwendet werden, das von Theme_Leanback_Onboarding übernommen wird. Führe einen der folgenden Schritte aus, um das Design für OnboardingSupportFragment festzulegen:

  • Legen Sie die übergeordnete Aktivität von OnboardingSupportFragment so fest, dass das gewünschte Design verwendet wird. Das folgende Beispiel zeigt, wie eine Aktivität zur Verwendung von Theme_Leanback_Onboarding im App-Manifest festgelegt wird:
    <activity
       android:name=".OnboardingActivity"
       android:enabled="true"
       android:exported="true"
       android:theme="@style/Theme.Leanback.Onboarding">
    </activity>
    
  • Legen Sie das Thema mit dem Attribut LeanbackOnboardingTheme_onboardingTheme in einem benutzerdefinierten Aktivitätsthema in der übergeordneten Aktivität fest. Verweisen Sie dieses Attribut auf ein anderes benutzerdefiniertes Design, das nur die OnboardingSupportFragment-Objekte in Ihrer Aktivität verwenden. Verwenden Sie diesen Ansatz, wenn in Ihrer Aktivität bereits ein benutzerdefiniertes Design verwendet wird und Sie OnboardingSupportFragment-Stile nicht auf andere Ansichten in der Aktivität anwenden möchten.
  • Überschreiben Sie onProvideTheme() und geben Sie das gewünschte Design zurück. Verwenden Sie diesen Ansatz, wenn mehrere Aktivitäten Ihre OnboardingSupportFragment verwenden oder wenn die übergeordnete Aktivität nicht das gewünschte Thema verwenden kann. Im folgenden Beispiel wird onProvideTheme() überschrieben und Theme_Leanback_Onboarding zurückgegeben:

    Kotlin

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

    Java

    @Override
    public int onProvideTheme() {
       return R.style.Theme_Leanback_Onboarding;
    }