Présenter votre application aux nouveaux utilisateurs

Créez mieux avec Compose
Créez des interfaces utilisateur attrayantes avec un minimum de code à l'aide de Jetpack Compose pour l'OS Android TV.
<ph type="x-smartling-placeholder"></ph> Compose pour la télévision →

Pour montrer à un nouvel utilisateur comment exploiter au mieux votre application, présentez informations d'intégration au démarrage de l'application. Voici quelques exemples d'intégration informations:

  • Présenter des informations détaillées sur les canaux disponibles lorsqu'un utilisateur accède d'abord à une application de chaîne.
  • Attirez l'attention sur les fonctionnalités intéressantes de votre application.
  • Illustrer toutes les étapes requises ou recommandées que les utilisateurs doivent suivre lorsque l'application pour la première fois.

La bibliothèque androidx.leanback fournit Classe OnboardingSupportFragment pour présentant les informations des nouveaux utilisateurs. Ce guide explique comment utiliser le OnboardingSupportFragment classe à présenter des informations de présentation qui s'affichent lorsque l'application est lancée pour la première fois en temps réel.

OnboardingSupportFragment utilise l'UI TV bonnes pratiques pour présenter les informations d'une manière qui correspond aux styles d'UI TV et la navigation est facile sur les téléviseurs.

Figure 1 : Exemple OnboardingSupportFragment

OnboardingSupportFragment ne convient pas à tous les cas d'utilisation. N'utilisez pas OnboardingSupportFragment lorsque vous devez inclure Éléments d'interface utilisateur qui nécessitent une entrée utilisateur, tels que les boutons et les champs. N'utilisez pas non plus OnboardingSupportFragment pour les tâches que l'utilisateur effectuera. régulièrement. Enfin, si vous devez présenter une interface utilisateur multipage qui nécessite les entrées utilisateur, envisagez d'utiliser GuidedStepSupportFragment

Ajouter un OnboardingSupportFragment

Pour ajouter un OnboardingSupportFragment à votre application, implémentez une classe qui étend la classe OnboardingSupportFragment. Ajouter ce fragment en une activité, en utilisant le fichier XML de mise en page de l'activité ou de manière programmatique. Assurez-vous que l’activité ou utilise un thème dérivé de Theme_Leanback_Onboarding, comme décrit dans la section Personnaliser les thèmes.

Dans la méthode onCreate() de votre l'activité principale de votre application, appeler startActivity() avec un Intent qui pointe vers l'activité parent de votre OnboardingSupportFragment. Cela vous permet de vous assurer OnboardingSupportFragment apparaît comme dès que votre application démarre.

Pour vous assurer que OnboardingSupportFragment n'apparaît que la première fois que l'utilisateur démarre votre application, utilisez Objet SharedPreferences pour savoir si l'utilisateur a déjà consulté OnboardingSupportFragment Définir une valeur booléenne qui passe à "true" lorsque l'utilisateur a terminé de consulter OnboardingSupportFragment Chèque cette valeur dans le tableau de bord onCreate() et ne lancez que la méthode Activité du parent OnboardingSupportFragment si la valeur est "false".

L'exemple suivant montre un forçage de onCreate() qui recherche un SharedPreferences. Si elle n'est pas définie sur "true", les appels startActivity() pour afficher 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));
    }
}

Une fois que l'utilisateur a consulté OnboardingSupportFragment, marquer comme lu à l'aide de l'objet SharedPreferences. Pour ce faire, remplacez onFinishFragment() dans votre OnboardingSupportFragment et définissez votre SharedPreferences sur "true", comme illustré dans l'exemple suivant:

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

Ajouter des pages OnboardingSupportFragment

OnboardingSupportFragment affiche le contenu dans une série de pages classées dans l'ordre. Après avoir ajouté votre OnboardingSupportFragment, vous devez définir les pages d'accueil. Chaque page peut avoir un titre, une description plusieurs sous-vues pouvant contenir des images ou des animations.

Figure 2. OnboardingSupportFragment éléments de page.

La figure 2 montre un exemple de page avec des accroches indiquant que la page est personnalisable. éléments que votre OnboardingSupportFragment peut fournir. Les éléments de la page sont les suivants:

  1. Titre de la page.
  2. Description de la page.
  3. L'affichage du contenu de la page (dans ce cas, une simple coche verte dans une case grise) Cette vue est facultative. Utilisez cette vue pour illustrer les détails de la page. Par exemple, vous pouvez Incluez une capture d'écran qui met en évidence la fonctionnalité de l'application décrite sur la page.
  4. La vue d'arrière-plan de la page, dans ce cas un simple dégradé bleu. Cette vue s'affiche toujours derrière les autres vues de la page. Cette vue est facultative.
  5. Vue de premier plan de la page, dans ce cas un logo. Cette vue affiche toujours devant toutes les autres vues de la page. Cette vue est facultative.

Initialisez les informations de la page lorsque votre OnboardingSupportFragment est d'abord créé ou associées à l'activité parente, lorsque le système demande la page des informations lorsqu'il crée la vue du fragment. Vous pouvez initialiser la page dans le constructeur de votre classe ou dans un forçage onAttach()

Remplacez chacune des méthodes suivantes, qui fournissent des informations sur la page au système:

Remplacez chacune des méthodes suivantes pour fournir des sous-vues facultatives pour afficher des images ou des animations:

  • onCreateBackgroundView() renvoie un View que vous "create" pour servir de vue d'arrière-plan ou "null" si aucune vue d'arrière-plan n'est nécessaire.
  • onCreateContentView() renvoie un View que vous "create" pour servir de vue de contenu ou "null" si aucune vue de contenu n'est nécessaire.
  • onCreateForegroundView() renvoie un View que vous "create" pour servir de vue de premier plan ou "null" si aucune vue de premier plan n'est nécessaire.

Le système ajoute le View que vous avez créé à la page mise en page. L'exemple suivant remplace onCreateContentView() et renvoie un 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;
}

Écran "Ajouter un logo" initial

Votre OnboardingSupportFragment peut démarrer avec un logo facultatif qui présente votre application. Si vous souhaitez afficher un(e) Drawable comme écran de logo, appelez setLogoResourceId() par l'ID de votre Drawable dans le onCreate() de votre OnboardingSupportFragment. Le système apparaît en fondu et affiche brièvement Drawable, puis fait disparaître en fondu Drawable avant d'afficher la première page de votre OnboardingSupportFragment.

Si vous souhaitez fournir une animation personnalisée pour l'écran de votre logo, appeler setLogoResourceId(), remplacer onCreateLogoAnimation() et renvoyer un Animator. qui affiche votre animation personnalisée, comme illustré dans l'exemple suivant:

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

Personnaliser les animations de la page

Le système utilise les animations par défaut lors de l'affichage de la première page de votre OnboardingSupportFragment et lorsque l'utilisateur permet d'accéder à une autre page. Vous pouvez personnaliser ces animations en de remplacer les méthodes OnboardingSupportFragment

Pour personnaliser l'animation qui apparaît sur votre première page, ignorer onCreateEnterAnimation() et renvoyez un Animator. L'exemple suivant crée un Animator qui adapte la vue du contenu horizontalement:

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

Pour personnaliser l'animation utilisée lorsque l'utilisateur accède à une autre page, ignorer onPageChanged() Dans votre méthode onPageChanged(), créez des objets Animator. qui suppriment la page précédente et affichent la page suivante, ajoutez-les à une AnimatorSet, puis lancez la lecture du set. Les éléments suivants : utilise une animation de fondu en fondu pour supprimer la page précédente, met à jour de la vue du contenu, et utilise une animation de fondu pour afficher la page suivante:

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

Pour en savoir plus sur la façon de créer Animator objets et Objets AnimatorSet, voir <ph type="x-smartling-placeholder"></ph> Présentation de l'animation des propriétés

Personnaliser les thèmes

Tous les OnboardingSupportFragment doit utiliser soit la méthode Thème Theme_Leanback_Onboarding ou un thème qui hérite de Theme_Leanback_Onboarding. Définissez le paramètre thème de votre OnboardingSupportFragment en effectuant l'une des opérations suivantes:

  • Définissez l'activité parente de OnboardingSupportFragment pour utiliser la le thème souhaité. L'exemple suivant montre comment définir une activité à utiliser Theme_Leanback_Onboarding dans le fichier manifeste de l'application: 
    <activity
   android:name=".OnboardingActivity"
   android:enabled="true"
   android:exported="true"
   android:theme="@style/Theme.Leanback.Onboarding">
</activity>
  • Définissez le thème dans l'activité parent à l'aide de la LeanbackOnboardingTheme_onboardingTheme dans un thème d'activité personnalisé. Faire pointer cet attribut vers un autre thème personnalisé que seul le gestionnaire OnboardingSupportFragment des objets dans votre activité. Utilisez cette approche si votre activité utilise déjà un thème personnalisé et vous ne voulez pas l'appliquer OnboardingSupportFragment styles à d'autres vues dans l'activité.
  • Remplacement onProvideTheme() et renvoyer le thème souhaité. Utilisez cette approche si plusieurs activités utilisent OnboardingSupportFragment ou si l’activité parent ne peut pas utiliser le thème souhaité. L'exemple suivant remplace onProvideTheme() et renvoie Theme_Leanback_Onboarding:

    Kotlin

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

    Java

    @Override
public int onProvideTheme() {
   return R.style.Theme_Leanback_Onboarding;
}
Précédent
Utiliser les commandes de transport
Suivant
Ajouter une étape guidée