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.
<ph type="x-smartling-placeholder"></ph> Für TV verfassen →

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.

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.

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:

  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 darzustellen. Zum Beispiel könnten Sie Fügen Sie einen Screenshot hinzu, 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. 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:

Überschreiben Sie jede der folgenden Methoden, um optionale Unteransichten bereitzustellen. zum Anzeigen von Bildern oder Animationen:

  • onCreateBackgroundView() gibt ein View zurück, das Sie create, um als Hintergrundansicht zu fungieren, oder null, wenn keine Hintergrundansicht benötigt wird.
  • onCreateContentView() gibt ein View zurück, das Sie create, um als Inhaltsansicht zu fungieren, oder null, wenn kein Inhaltsaufruf erforderlich ist.
  • onCreateForegroundView() gibt ein View 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 das OnboardingSupportFragment Objekte, die Sie in Ihrer Aktivität verwenden. Verwenden Sie diesen Ansatz, wenn in Ihrer Aktivität bereits ein benutzerdefiniertes Design erstellen und OnboardingSupportFragment 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äten OnboardingSupportFragment oder das gewünschte Design nicht für die übergeordnete Aktivität verwendet werden kann. Im folgenden Beispiel wird onProvideTheme() ü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;
}
Zurück
Steuerelemente für die Übertragung verwenden
Weiter
Interaktiven Schritt hinzufügen