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.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment.png?authuser=6&hl=de)
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.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=6&hl=de)
Abbildung 2: OnboardingSupportFragment
-Seitenelemente.
Abbildung 2 zeigt eine Beispielseite mit Zusatzinformationen, die anpassbare Seitenelemente kennzeichnen, die dein OnboardingSupportFragment
bereitstellen kann. Die Seitenelemente sind:
- Der Seitentitel.
- Die Seitenbeschreibung.
- 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.
- 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.
- 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 derOnboardingSupportFragment
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 eineView
zurück, die Sie als Hintergrundansicht erstellt haben, oder null, wenn keine Hintergrundansicht erforderlich ist.onCreateContentView()
gibt einView
zurück, das Sie als Inhaltsansicht erstellen, oder null, wenn keine Inhaltsansicht erforderlich ist.onCreateForegroundView()
gibt eineView
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 vonTheme_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 dieOnboardingSupportFragment
-Objekte in Ihrer Aktivität verwenden. Verwenden Sie diesen Ansatz, wenn in Ihrer Aktivität bereits ein benutzerdefiniertes Design verwendet wird und SieOnboardingSupportFragment
-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 IhreOnboardingSupportFragment
verwenden oder wenn die übergeordnete Aktivität nicht das gewünschte Thema verwenden kann. Im folgenden Beispiel wirdonProvideTheme()
überschrieben undTheme_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; }