Pour montrer à un nouvel utilisateur comment exploiter au mieux votre application, présentez des informations d'intégration au démarrage de l'application. Voici quelques exemples d'informations d'intégration:
- Présenter des informations détaillées sur les canaux disponibles lorsqu'un utilisateur accède pour la première fois à une application de canal de distribution.
- Attirez l'attention sur les fonctionnalités intéressantes 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 classe OnboardingSupportFragment
pour présenter les 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 d'UI TV pour présenter les informations d'une manière qui correspond aux styles d'UI TV et qui facilite la navigation sur les téléviseurs.
![](https://developer.android.google.cn/static/images/training/tv/playback/onboarding-fragment.png?authuser=7&hl=fr)
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 entrée 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 UI de plusieurs pages nécessitant une entrée utilisateur, envisagez d'utiliser un GuidedStepSupportFragment
.
Ajouter un OnboardingSupportFragment
Pour ajouter un OnboardingSupportFragment
à votre application, implémentez une classe qui étend la classe OnboardingSupportFragment
. Ajoutez ce fragment à une activité, soit à l'aide du fichier 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é parente de votre OnboardingSupportFragment
.
Cela permet de garantir que votre OnboardingSupportFragment
s'affiche dès le démarrage de votre application.
Pour vous assurer que OnboardingSupportFragment
n'apparaît que la première fois que l'utilisateur démarre votre application, utilisez un objet SharedPreferences
pour savoir si l'utilisateur a déjà vu OnboardingSupportFragment
. Définissez une valeur booléenne qui passe à "true" lorsque l'utilisateur a terminé d'afficher OnboardingSupportFragment
. Vérifiez cette valeur dans la méthode onCreate()
de votre activité principale et ne démarrez l'activité parente OnboardingSupportFragment
que si la valeur est "false".
L'exemple suivant montre un forçage de onCreate()
qui recherche une valeur SharedPreferences
et, si elle n'est pas définie sur "true", appelle 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 vu la OnboardingSupportFragment
, marquez-la comme consultée à l'aide de l'objet SharedPreferences
. Pour ce faire, remplacez onFinishFragment()
dans votre OnboardingSupportFragment
et définissez la 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
Une OnboardingSupportFragment
affiche le contenu dans une série de pages ordonnées. Après avoir 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.
![](https://developer.android.google.cn/static/images/training/tv/playback/onboarding-fragment-diagram.png?authuser=7&hl=fr)
Figure 2. OnboardingSupportFragment
.
La figure 2 montre un exemple de page avec des accroches indiquant les éléments de page personnalisables que votre OnboardingSupportFragment
peut fournir. Les éléments de la page sont les suivants:
- Titre de la page.
- Description de la page.
- 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 inclure une capture d'écran qui met en évidence la fonctionnalité de l'application décrite par la page.
- 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.
- 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 page lorsque votre OnboardingSupportFragment
est créée pour la première fois ou associée à l'activité parente, car le système demande des informations de page lorsqu'il crée la vue du fragment. Vous pouvez initialiser les informations de la page dans votre constructeur de classe ou dans un forçage de onAttach()
.
Remplacez chacune des méthodes suivantes, qui fournissent des informations de page au système:
getPageCount()
renvoie le nombre de pages dans votreOnboardingSupportFragment
.getPageTitle()
renvoie le titre du numéro de page demandé.getPageDescription()
renvoie la description du numéro de page demandé.
Remplacez chacune des méthodes suivantes pour fournir des sous-vues facultatives permettant d'afficher des images ou des animations:
onCreateBackgroundView()
renvoie unView
que vous créez pour agir en tant que vue d'arrière-plan ou la valeur "null" si aucune vue en arrière-plan n'est nécessaire.onCreateContentView()
renvoie unView
que vous créez pour agir en tant que vue de contenu ou la valeur null si aucune vue de contenu n'est nécessaire.onCreateForegroundView()
renvoie unView
que vous créez pour agir en tant que vue de premier plan ou la valeur null si aucune vue de premier plan n'est nécessaire.
Le système ajoute l'élément View
que vous créez à la mise en page de la 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 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 apparaît et affiche brièvement le Drawable
, puis disparaît 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, 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 la page
Le système utilise des animations par défaut lors de l'affichage de la première page de votre OnboardingSupportFragment
et lorsque l'utilisateur accède à une autre page. Vous pouvez personnaliser ces animations en remplaçant les méthodes dans votre OnboardingSupportFragment
.
Pour personnaliser l'animation qui s'affiche sur votre première page, remplacez onCreateEnterAnimation()
et renvoyez une Animator
.
L'exemple suivant crée un Animator
qui redimensionne 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 lisez l'ensemble. L'exemple suivant utilise une animation de fondu à la fermeture pour supprimer la page précédente, met à jour l'image de la vue de contenu et utilise une animation de fondu à l'ouverture 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 page
Présentation des animations des propriétés.
Personnaliser les thèmes
Toute implémentation de OnboardingSupportFragment
doit utiliser le thème Theme_Leanback_Onboarding
ou un thème héritant de Theme_Leanback_Onboarding
. Définissez le thème de votre OnboardingSupportFragment
en effectuant l'une des opérations suivantes:
- Définissez l'activité parente de
OnboardingSupportFragment
pour utiliser le thème souhaité. L'exemple suivant montre comment définir une activité pour utiliserTheme_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 l'attribut
LeanbackOnboardingTheme_onboardingTheme
dans un thème d'activité personnalisé. Faites pointer cet attribut vers un autre thème personnalisé que seuls les objetsOnboardingSupportFragment
de votre activité utilisent. Utilisez cette approche si votre activité utilise déjà un thème personnalisé et que vous ne souhaitez pas appliquer de stylesOnboardingSupportFragment
à d'autres vues de l'activité. - Remplacez
onProvideTheme()
et renvoyez le thème souhaité. Utilisez cette approche si plusieurs activités utilisent votreOnboardingSupportFragment
ou si l'activité parent ne peut pas utiliser le thème souhaité. L'exemple suivant remplaceonProvideTheme()
et renvoieTheme_Leanback_Onboarding
:Kotlin
override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
Java
@Override public int onProvideTheme() { return R.style.Theme_Leanback_Onboarding; }