Présenter votre application aux nouveaux utilisateurs

Créez de meilleures applications avec Compose
Créez de superbes interfaces utilisateur avec un minimum de code à l'aide de Jetpack Compose pour Android TV OS.
Compose pour TV →

Pour montrer à un nouvel utilisateur comment tirer le meilleur parti de votre application, présentez des informations d'intégration au démarrage de l'application. Voici quelques exemples d'informations d'intégration :

  • Présentez des informations détaillées sur les chaînes disponibles lorsqu'un utilisateur accède à une application de chaîne pour la première fois.
  • Attirez l'attention sur les fonctionnalités importantes de votre application.
  • Illustrez les étapes obligatoires ou recommandées que les utilisateurs doivent suivre lorsqu'ils utilisent l'application pour la première fois.

La bibliothèque androidx.leanback fournit la OnboardingSupportFragment classe pour présenter des informations aux nouveaux utilisateurs. Ce guide explique comment utiliser la classe OnboardingSupportFragment pour présenter des informations d'introduction qui s'affichent lorsque l'application est lancée pour la première fois.

OnboardingSupportFragment utilise les bonnes pratiques de l'UI TV pour présenter les informations d'une manière qui correspond aux styles de l'UI TV et qui est facile à parcourir sur les appareils TV.

Figure 1. Exemple de OnboardingSupportFragment.

OnboardingSupportFragment ne convient pas à tous les cas d'utilisation. N'utilisez pas OnboardingSupportFragment lorsque vous devez inclure des éléments d'interface utilisateur qui nécessitent une saisie de l'utilisateur, tels que des boutons et des 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 une saisie de l'utilisateur, envisagez d'utiliser un GuidedStepSupportFragment.

Ajouter un OnboardingSupportFragment

Pour ajouter un OnboardingSupportFragment à votre application, implémentez une classe qui étend la OnboardingSupportFragment classe. Ajoutez ce fragment à une activité, soit à l'aide du code XML de mise en page de l'activité, soit par programmation. Assurez-vous que l'activité ou le fragment 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 l'activité principale de votre application, appelez startActivity() avec un Intent qui pointe vers l'activité parent de votre OnboardingSupportFragment. Cela permet de s'assurer que votre OnboardingSupportFragment s'affiche dès le démarrage de votre application.

Pour vous assurer que le OnboardingSupportFragment ne s'affiche que la première fois que l'utilisateur démarre votre application, utilisez un objet SharedPreferences pour savoir si l'utilisateur a déjà consulté le OnboardingSupportFragment. Définissez une valeur booléenne qui passe à "true" lorsque l'utilisateur a terminé de consulter le OnboardingSupportFragment. Vérifiez cette valeur dans la méthode onCreate() de votre activité principale et ne démarrez l'activité parent OnboardingSupportFragment que si la valeur est "false".

L'exemple suivant montre un remplacement de onCreate() qui recherche une valeur SharedPreferences et, si elle n'est pas définie sur "true", appelle startActivity() pour afficher le 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é le OnboardingSupportFragment, marquez-le comme consulté à l'aide de l'objet SharedPreferences. Pour ce faire, remplacez onFinishFragment() dans votre OnboardingSupportFragment et définissez votre valeur 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

Un OnboardingSupportFragment affiche le contenu dans une série de pages ordonnées. Une fois que vous avez ajouté votre OnboardingSupportFragment, vous devez définir les pages d'intégration. Chaque page peut avoir un titre, une description et plusieurs sous-vues pouvant contenir des images ou des animations.

Figure 2. Éléments de la page OnboardingSupportFragment.

La figure 2 montre un exemple de page avec des légendes marquant les éléments de page personnalisables 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. Vue 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 inclure une capture d'écran qui met en évidence la fonctionnalité de l'application décrite par la page.
  4. 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 s'affiche toujours devant toutes les autres vues de la page. Cette vue est facultative.

Initialisez les informations de la page lorsque votre OnboardingSupportFragment est créé ou associé à l'activité parent pour la première fois, car le système demande des informations sur la page lorsqu'il crée la vue du fragment. Vous pouvez initialiser les informations de la page dans le constructeur de votre classe ou dans un remplacement de 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 permettant d'afficher des images ou des animations :

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

Le système ajoute la View que vous créez à la 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;
}

Ajouter un écran de logo initial

Votre OnboardingSupportFragment peut commencer par un écran de logo facultatif qui présente votre application. Si vous souhaitez afficher un Drawable comme écran de logo, appelez setLogoResourceId() avec l'ID de votre Drawable dans la méthode onCreate() de votre OnboardingSupportFragment. Le système affiche progressivement le Drawable pendant un court instant, puis le fait disparaître avant d'afficher la première page de votre OnboardingSupportFragment.Drawable

Si vous souhaitez fournir une animation personnalisée pour votre écran de logo au lieu d'appeler setLogoResourceId(), remplacez onCreateLogoAnimation() et renvoyez un objet 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 page

Le système utilise des animations par défaut lorsqu'il affiche la première page de votre OnboardingSupportFragment et lorsque l'utilisateur accède à une autre page. Vous pouvez personnaliser ces animations en remplaçant des méthodes dans votre OnboardingSupportFragment.

Pour personnaliser l'animation qui s'affiche sur votre première page, remplacez onCreateEnterAnimation() et renvoyez un Animator. L'exemple suivant crée un Animator qui met à l'échelle la vue de 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, remplacez 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 à un AnimatorSet et lancez-le. L'exemple suivant utilise une animation de fondu sortant pour supprimer la page précédente, met à jour l'image de la vue de contenu et utilise une animation de fondu entrant 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 création d'objets Animator et d'objets AnimatorSet, consultez la présentation de l'animation de propriétés.

Personnaliser les thèmes

Toute OnboardingSupportFragment implémentation doit utiliser le thème Theme_Leanback_Onboarding ou un thème qui hérite de Theme_Leanback_Onboarding. Définissez le thème de votre OnboardingSupportFragment en procédant de l'une des manières suivantes :

  • Définissez l'activité parent du OnboardingSupportFragment pour qu'elle utilise le thème souhaité. L'exemple suivant montre comment définir une activité pour qu'elle utilise Theme_Leanback_Onboarding dans le fichier manifeste d'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 l'attribut LeanbackOnboardingTheme_onboardingTheme dans un thème d'activité personnalisé. Pointez cet attribut vers un autre thème personnalisé que seuls les objets OnboardingSupportFragment de votre activité utilisent. Utilisez cette approche si votre activité utilise déjà un thème personnalisé et que vous ne souhaitez pas appliquer les styles OnboardingSupportFragment à d'autres vues de l'activité.
  • Remplacez onProvideTheme() et renvoyez le thème souhaité. Utilisez cette approche si plusieurs activités utilisent votre 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