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.
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.
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:
- 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 Incluez une capture d'écran qui met en évidence la fonctionnalité de l'application décrite sur 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 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:
getPageCount()
renvoie le nombre de pages de votreOnboardingSupportFragment
getPageTitle()
renvoie le titre du numéro de page demandé.getPageDescription()
renvoie la description de la page demandée numéro.
Remplacez chacune des méthodes suivantes pour fournir des sous-vues facultatives pour afficher des images ou des animations:
onCreateBackgroundView()
renvoie unView
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 unView
que vous "create" pour servir de vue de contenu ou "null" si aucune vue de contenu n'est nécessaire.onCreateForegroundView()
renvoie unView
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é à 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 la
LeanbackOnboardingTheme_onboardingTheme
dans un thème d'activité personnalisé. Faire pointer cet attribut vers un autre thème personnalisé que seul le gestionnaireOnboardingSupportFragment
des objets dans votre activité. Utilisez cette approche si votre activité utilise déjà un thème personnalisé et vous ne voulez pas l'appliquerOnboardingSupportFragment
styles à d'autres vues dans l'activité. - Remplacement
onProvideTheme()
et renvoyer le thème souhaité. Utilisez cette approche si plusieurs activités utilisentOnboardingSupportFragment
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; }