Wenn Sie einem Erstnutzer zeigen möchten, wie er Ihre App optimal nutzen kann, präsentieren Sie beim Start der App zu informieren. Hier sind einige Beispiele für das Onboarding Informationen:
- Sie präsentieren detaillierte Informationen darüber, welche Kanäle verfügbar sind, wenn ein Nutzer auf eine Kanal-App zugreift.
- Machen Sie auf wichtige Funktionen Ihrer App aufmerksam.
- Erläutern Sie alle erforderlichen oder empfohlenen Schritte, die Nutzende ergreifen müssen, wenn die App zum ersten Mal verwenden.
Die androidx.leanback-Bibliothek enthält die
OnboardingSupportFragment
Kurs für
Informationen zu Erstnutzern
präsentiert werden. In diesem Leitfaden wird die Verwendung des
OnboardingSupportFragment
Kurs für Präsentation
einführende Informationen, die angezeigt werden, wenn die App zum ersten Mal
.
OnboardingSupportFragment
verwendet die TV-UI
Best Practices, um Informationen so zu präsentieren, dass sie zu den Stilen der TV-Benutzeroberfläche passen
und die Navigation auf Fernsehern ist einfach.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment.png?authuser=9&hl=de)
Abbildung 1: Beispiel
OnboardingSupportFragment
OnboardingSupportFragment
ist nicht für jeden Anwendungsfall geeignet.
Verwenden Sie OnboardingSupportFragment
nicht, wenn Sie Folgendes einbeziehen müssen:
UI-Elemente, die eine Nutzereingabe erfordern, wie Schaltflächen und Felder.
Außerdem sollten Sie OnboardingSupportFragment
nicht für Aufgaben verwenden, die der Nutzer erledigen wird
regelmäßig. Wenn Sie eine mehrseitige Benutzeroberfläche präsentieren müssen,
verwenden, sollten Sie eine
GuidedStepSupportFragment
OnboardingSupportFragment hinzufügen
So fügen Sie eine OnboardingSupportFragment
hinzu:
implementieren Sie eine Klasse,
die Klasse OnboardingSupportFragment
. Hinzufügen
dieses Fragments zu einer Aktivität, entweder mithilfe der Layout-XML der Aktivität oder
Programmatisch garantiert. Stellen Sie sicher, dass die Aktivität oder
Fragment ein Design aus
Theme_Leanback_Onboarding
,
enthalten, wie im Abschnitt Designs anpassen beschrieben.
In der Methode onCreate()
Ihres
App-Hauptaktivität, Anruf
startActivity()
mit einem Intent
, das auf
die Elternaktivität deines OnboardingSupportFragment
.
So sorgen Sie dafür,
OnboardingSupportFragment
erscheint als
sobald deine App gestartet wird.
Um sicherzustellen,
OnboardingSupportFragment
ist nur im
Startet der Nutzer deine App zum ersten Mal, verwende eine
SharedPreferences
-Objekt
um nachzuverfolgen, ob der Nutzer die
OnboardingSupportFragment
Booleschen Wert definieren
der sich in "true" ändert, wenn der Nutzer das
OnboardingSupportFragment
Prüfen
diesen Wert in der
onCreate()
und starten Sie nur den
OnboardingSupportFragment
Elternaktivität, wenn
ist der Wert „false“.
Das folgende Beispiel zeigt eine Überschreibung von onCreate()
, die nach einem
SharedPreferences
-Wert und, wenn er nicht auf "true" festgelegt ist, werden Aufrufe
startActivity()
, 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 die
OnboardingSupportFragment
, als gesehen markieren
mit dem SharedPreferences
-Objekt. Dazu überschreiben Sie
onFinishFragment()
in deinem OnboardingSupportFragment
und lege dein SharedPreferences
fest
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
Der Content wird in einer Reihe geordneter Seiten angezeigt. Nachdem Sie Ihre
OnboardingSupportFragment
, müssen Sie definieren
die Onboarding-Seiten. Jede Seite kann einen Titel, eine Beschreibung und
Unteransichten mit Bildern oder Animationen.
![](https://developer.android.com/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=9&hl=de)
Abbildung 2: OnboardingSupportFragment
Seitenelemente.
Abbildung 2 zeigt eine Beispielseite mit Zusatzinformationen, mit denen „Anpassbare Seite“ gekennzeichnet wird.
Elemente, die OnboardingSupportFragment
die wir bereitstellen können. 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 darzustellen. Zum Beispiel könnten Sie Fügen Sie einen Screenshot hinzu, 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. In dieser Ansicht werden immer vor allen anderen Ansichten auf der Seite platzieren. Diese Ansicht ist optional.
Initialisieren Sie die Seiteninformationen, wenn Ihr
OnboardingSupportFragment
wird zuerst erstellt
oder der übergeordneten Aktivität zugeordnet ist, wenn das System die Seite anfordert
wenn die Ansicht des Fragments erstellt wird. Sie können die Seite initialisieren
in Ihrem Klassenkonstruktor oder in einer Überschreibung von
onAttach()
Jede der folgenden Methoden, die Seiteninformationen bereitstellen, überschreiben an das System:
getPageCount()
gibt die Anzahl der Seiten in IhremOnboardingSupportFragment
.getPageTitle()
gibt den Titel für die angeforderte Seitennummer zurück.getPageDescription()
gibt die Beschreibung der angeforderten Seite zurück. Nummer.
Überschreiben Sie jede der folgenden Methoden, um optionale Unteransichten bereitzustellen. zum Anzeigen von Bildern oder Animationen:
onCreateBackgroundView()
gibt einView
zurück, das Sie create, um als Hintergrundansicht zu fungieren, oder null, wenn keine Hintergrundansicht benötigt wird.onCreateContentView()
gibt einView
zurück, das Sie create, um als Inhaltsansicht zu fungieren, oder null, wenn kein Inhaltsaufruf erforderlich ist.onCreateForegroundView()
gibt einView
zurück, das Sie create, um als Vordergrundansicht zu fungieren, oder null, wenn keine Vordergrundansicht erforderlich ist.
Das System fügt die von Ihnen erstellten View
der Seite hinzu
Layout. Das folgende Beispiel überschreibt
onCreateContentView()
und gibt ein
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; }
Anfänglichen Logobildschirm hinzufügen
Dein OnboardingSupportFragment
kann beginnen
mit einem optionalen Logobildschirm,
auf dem Ihre App vorgestellt wird. Wenn Sie
Drawable
wie Ihr Logobildschirm, wählen Sie
setLogoResourceId()
durch die ID Ihres Drawable
in: onCreate()
Ihrer OnboardingSupportFragment
.
Das System schaltet sich ein und zeigt kurz
Drawable
und blendet dann Drawable
aus
bevor die erste Seite von OnboardingSupportFragment
angezeigt wird.
Wenn Sie für Ihren Logobildschirm eine benutzerdefinierte Animation
setLogoResourceId()
wird aufgerufen, überschreiben
onCreateLogoAnimation()
und gibt Animator
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
Bei der Anzeige der ersten Seite Ihrer Anzeige verwendet das System Standardanimationen.
OnboardingSupportFragment
und wenn der Nutzer
navigiert zu einer anderen Seite. Sie können diese Animationen anpassen, indem Sie
die Methoden in Ihrem
OnboardingSupportFragment
So passen Sie die Animation für die erste Seite an:
überschreiben
onCreateEnterAnimation()
und gibt Animator
zurück.
Im folgenden Beispiel wird ein Animator
erstellt, der die Inhaltsansicht skaliert
horizontal:
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; }
Um die Animation beim Navigieren zu einer anderen Seite anzupassen,
überschreiben
onPageChanged()
Erstellen Sie in der Methode onPageChanged()
Animator
-Objekte
die die vorherige Seite entfernen und die nächste aufrufen, diese zu einem
AnimatorSet
und spielen Sie das Set ab. Die folgenden
zum Beispiel eine Ausblendungsanimation, mit der die vorherige Seite entfernt wird,
Inhaltsansichtsbild und verwendet eine Einblendanimation, um die nächste Seite anzuzeigen:
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
Animator
Objekte und
AnimatorSet
-Objekte, siehe
<ph type="x-smartling-placeholder"></ph>
Property-Animation – Übersicht
Designs anpassen
Beliebige OnboardingSupportFragment
muss entweder die Methode
Design „Theme_Leanback_Onboarding
“
oder ein Design, das von Theme_Leanback_Onboarding
übernommen wird. Legen Sie die
Design für Ihr OnboardingSupportFragment
, indem Sie einen der folgenden Schritte ausführen:
- Legen Sie die übergeordnete Aktivität von
OnboardingSupportFragment
fest, um die gewünschtes Design. Das folgende Beispiel zeigt, wie Sie eine Aktivität festlegen,Theme_Leanback_Onboarding
im App-Manifest:<activity android:name=".OnboardingActivity" android:enabled="true" android:exported="true" android:theme="@style/Theme.Leanback.Onboarding"> </activity>
-
Legen Sie das Design in der übergeordneten Aktivität mithilfe der
LeanbackOnboardingTheme_onboardingTheme
in einem benutzerdefinierten Aktivitätsdesign. Dieses Attribut auf ein anderes verweisen benutzerdefiniertes Design, das nur dasOnboardingSupportFragment
Objekte, die Sie in Ihrer Aktivität verwenden. Verwenden Sie diesen Ansatz, wenn in Ihrer Aktivität bereits ein benutzerdefiniertes Design erstellen undOnboardingSupportFragment
Stile in andere Ansichten in der Aktivität. - Überschreiben
onProvideTheme()
und geben Sie das gewünschte Design zurück. Verwenden Sie diesen Ansatz, wenn verwenden mehrere AktivitätenOnboardingSupportFragment
oder das gewünschte Design nicht für die übergeordnete Aktivität verwendet werden kann. Im folgenden Beispiel wirdonProvideTheme()
überschrieben und es wird Folgendes zurückgegeben:Theme_Leanback_Onboarding
:Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }