Share
Ce que vous allez créerCela ne prend pas un génie de comprendre qu'une application qui permet aux nouveaux utilisateurs de se sentir bienvenus et à l'aise jouira probablement d'une popularité beaucoup plus grande que celle qui les laissera perdus et confus. En conséquence, de nombreux développeurs tentent actuellement de s'assurer que leurs utilisateurs bénéficient d'une bonne expérience d'intégration..
Si vous développez une application innovante dont les fonctionnalités et les utilisations risquent de ne pas être évidentes pour les nouveaux utilisateurs, vous devez envisager d'ajouter quelques écrans d'intégration à votre application. Dans ce tutoriel, je vais vous montrer un moyen simple de créer et d'ajouter rapidement de tels écrans à votre application Android..
Tout d’abord, ajoutez la bibliothèque de conception de matériel en tant que compiler dépendance à la build.gradle fichier du app module afin que vous puissiez utiliser les éléments de l'interface utilisateur d'Android L dans les anciennes versions d'Android.
java compile 'com.github.navasmdc: MaterialDesign: 1.5@aar'
Ensuite, ajoutez un compiler dépendance pour SmartTabLayout, une bibliothèque qui propose un élément de bande de titre personnalisé pour le ViewPager composant.
java compile 'com.ogaclejapan.smarttablayout: bibliothèque: 1.2.1@aar'
Nous utiliserons également des classes appartenant à la bibliothèque Android Support v4. Cependant, vous n'avez pas besoin de l'ajouter manuellement, car Android Studio l'ajoute par défaut..
Accentsconagua
Activité L'embarquement Activité sera responsable de l'affichage de tous les écrans d'accueil. Par conséquent, cette Activité aura les widgets suivants:
ViewPager exemple qui permet aux utilisateurs d’utiliser le geste de balayage pour passer d’un écran d’introduction à l’autre.ButtonFlat étiqueté Sauter, qui permet aux utilisateurs impatients de sauter le processus d'intégration.ButtonFlat étiqueté Suivant, qui amène l'utilisateur à l'écran d'accueil suivant.SmartTabLayout qui sert d'indicateur de page pour la ViewPager composant.Après avoir placé ces widgets dans un Disposition relative et en les plaçant, le code dans le fichier XML de mise en page de l’intégration Activité devrait ressembler à ceci:
"xml
"
N'hésitez pas à modifier la mise en page pour correspondre à vos préférences. Je vais appeler ce fichier de mise en page activity_onboarding.xml.
Pour ce didacticiel, vous allez créer trois écrans d’intégration. Pour que le tutoriel reste simple, les écrans n’auront que deux Affichage widgets. Dans une application réelle, vous devez également vous efforcer de garder les écrans d’intégration aussi simples que possible pour éviter que les nouveaux utilisateurs ne soient débordés lorsqu’ils ouvrent votre application pour la première fois..
Le fichier XML de mise en page du premier écran est nommé onboarding_screen1.xml et a le contenu suivant:
"xml
"
Utilisez le même XML dans les fichiers de mise en page des deux autres écrans et nommez-les. onboarding_screen2.xml et onboarding_screen3.xml. Bien sûr, vous devriez changer le texte propriété de chacun Affichage widget pour que chaque écran d'accueil soit unique.
Fragment pour chaque écran d'intégrationCréez une nouvelle classe Java et nommez-la. OnboardingFragment1.java. Faites-en une sous-classe de Fragment et remplacer sa onCreateView méthode. Ensuite, appelez le gonfler méthode pour créer un Vue en utilisant la mise en page que nous avons définie dans onboarding_screen1.xml et retourner le Vue. Votre classe devrait ressembler à ceci:
"java public class OnboardingFragment1 étend le fragment
@Nullable @Override public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, Bundle s) return inflater.inflate (R.layout.onboarding_screen1, conteneur, false); "
le Fragment car votre premier écran d’intégration est maintenant prêt. Suivez le même processus pour créer deux autres Fragment sous-classes, OnboardingFragment2.java et OnboardingFragment3.java, qui utilisent les dispositions définies dans onboarding_screen2.xml et onboarding_screen3.xml respectivement.
Activité Créez une nouvelle classe Java et nommez-la. OnboardingActivity.java. Faites-en une sous-classe de FragmentActivité et remplacer sa onCreate méthode.
"java public class OnboardingActivity étend FragmentActivity
@Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); "
Ensuite, déclarer un ViewPager, une SmartTabLayout, et deux ButtonFlat des widgets en tant que variables membres de la classe.
téléavertisseur java privé ViewPager; indicateur privé SmartTabLayout; privé ButtonFlat sauter; privé ButtonFlat next;
dans le onCreate méthode, appel setContentView pour afficher la mise en page définie dans activity_onboarding.xml et utiliser le findViewById méthode pour initialiser les variables membres.
"java setContentView (R.layout.activity_onboarding);
pager = (ViewPager) findViewById (R.id.pager); indicateur = (SmartTabLayout) findViewById (R.id.indicator); skip = (ButtonFlat) findViewById (R.id.skip); next = (ButtonFlat) findViewById (R.id.next); "
Vous devez maintenant créer un FragmentStatePagerAdapter que le ViewPager peut utiliser pour afficher les écrans d’accueil. Créer une nouvelle variable de type FragmentStatePagerAdapter et nommez-le adaptateur. Initialisez-le en passant le résultat du getSupportFragmentManager méthode à son constructeur. Comme il s'agit d'une classe abstraite, Android Studio génère automatiquement du code pour les méthodes abstraites, comme indiqué ci-dessous..
"java FragmentStatePagerAdapter adapter = new FragmentStatePagerAdapter (getSupportFragmentManager ()) @Override public Fragment getItem (int position)
@Override public int getCount () ; "
dans le getCount méthode, retourne le nombre d'écrans d'accueil.
java @Override public int getCount () return 3;
Ajouter un commutateur déclaration à la obtenir l'article méthode pour retourner le correct Fragment basé sur la valeur de position.
java @Override public Fragment getItem (int position) switch (position) cas 0: retourne le nouveau OnboardingFragment1 (); cas 1: retourne le nouveau OnboardingFragment2 (); cas 2: retourne le nouveau OnboardingFragment3 (); défaut: return null;
Toujours dans le onCreate méthode, associez le FragmentStatePagerAdapter avec le ViewPager en appelant le setAdapter méthode.
java pager.setAdapter (adaptateur);
Maintenant que le ViewPager est prêt, pointez le SmartTabLayout en appelant le setViewPager méthode.
indicateur Java.setViewPager (pager);
Il est maintenant temps d’ajouter des gestionnaires de clics au ButtonFlat widgets. Vous pouvez le faire en utilisant le setOnClickListener méthode, en passant une nouvelle instance du View.OnClickListener classe à elle.
Dans le handler du sauter bouton, appelle une méthode nommée Finir la planche. Nous allons implémenter cette méthode à l'étape suivante.
Dans le handler du suivant bouton, utiliser setCurrentItem de même que getCurrentItem pour passer à l'écran d'accueil suivant. Également si getCurrentItem retourne le dernier écran d'intégration, appelle une méthode nommée Finir la planche. Nous allons implémenter cette méthode dans un instant.
Le code pour les gestionnaires des boutons devrait ressembler à ceci:
"java skip.setOnClickListener (nouvelle View.OnClickListener () @Override public void onClick (Voir v) finishOnboarding (););
next.setOnClickListener (new View.OnClickListener () @Override public void onClick (View v) if (pager.getCurrentItem () == 2) // Le dernier écran terminéOnboarding (); else pager.setCurrentItem (pager .getCurrentItem () + 1, true);); "
Vous voudrez peut-être apporter quelques modifications à la disposition de l’intégration. Activité, comme enlever le sauter bouton et changer l'étiquette du suivant bouton pour Terminé lorsque l'utilisateur atteint le dernier écran d'intégration. Vous pouvez le faire en ajoutant un SimpleOnPageChangeListener au SmartTabLayout et dépassant son onPageSelected méthode.
java indicateur.setOnPageChangeListener (nouveau ViewPager.SimpleOnPageChangeListener () @Override public void onPageSelected (int position) if (position == 2) skip.setVisibility (View.GONE); next.setText ("Done"); sinon skip.setVisibility (View.VISIBLE); next.setText ("Next"););
Lorsque l'utilisateur a vu tous les écrans d'intégration, ou a choisi de les ignorer, vous devez mettre fin à l'expérience d'intégration en appelant le Finir la planche méthode (c'est le nom que nous avons utilisé à l'étape précédente).
dans le Finir la planche méthode, obtenir une référence à la Préférences partagées objet de l'application et définir un booléen pour la clé onboarding_complete à vrai en utilisant le putBoolean méthode. Nous utiliserons cette clé à l'étape suivante pour nous assurer que les utilisateurs voient les écrans d'intégration uniquement s'ils n'ont pas terminé le processus d'intégration..
Ensuite, créez un nouveau Intention et appelez le startActivity méthode pour lancer la principale Activité (la Activité qui est censé s'ouvrir lorsque l'utilisateur clique sur l'icône de l'application).
Enfin, appelez terminer fermer OnboardingActivity. Le est ce que la mise en œuvre de la Finir la planche méthode devrait ressembler à:
"java private void finishOnboarding () // Obtient les préférences partagées SharedPreferences preferences = getSharedPreferences (“ my_preferences ”, MODE_PRIVATE);
// Définissez onboarding_complete sur true preferences.edit () .putBoolean ("onboarding_complete", true) .apply (); // Lance l'activité principale, appelée Intention MainActivity principale = new Intent (this, MainActivity.class); startActivity (principal); // Ferme la OnboardingActivity finish (); " Activité L'embarquement Activité devrait commencer le plus tôt possible si un utilisateur qui n'a pas terminé le processus d'intégration ouvre l'application. Cela signifie que vous allez ajouter le code permettant de détecter de nouveaux utilisateurs et de lancer OnboardingActivity dans le onCreate méthode de la principale de votre application Activité.
En vérifiant si le Préférences partagées l'objet a une clé appelée onboarding_complete dont la valeur est vrai, vous pouvez déterminer si l'utilisateur a terminé le processus d'intégration. Si la valeur de la clé est faux, fermer la principale Activité immédiatement et créer un nouveau Intention lancer OnboardingActivity. Regardez le bloc de code suivant pour mieux comprendre ce concept.
"java // Obtenir les préférences partagées SharedPreferences preferences = getSharedPreferences (“ my_preferences ”, MODE_PRIVATE);
// Vérifie si onboarding_complete est false si (! Preferences.getBoolean (“onboarding_complete”, false)) Démarrer l'activité d'activité onboarding onenting onboarding = nouvelle intention (on, onboardingActivity.class); startActivity (intégration);
// Ferme l'activité principale finish (); revenir; "
Si vous ne l'avez pas déjà fait, déclarez OnboardingActivity dans le manifeste de l'application.
"xml
"
Vous pouvez maintenant compiler votre application et l'exécuter sur un appareil Android. Comme ce sera votre première course, vous devriez voir les écrans d’accueil au lieu des écrans principaux. Activité.
Dans ce tutoriel, vous avez appris à créer des écrans d'intégration simples et à les ajouter à votre application Android. Utilisez ces écrans pour répondre de manière très succincte à des questions, telles que ce que votre application peut faire et quand elle devrait être utilisée..
Pour une expérience utilisateur optimale, le processus d'intégration doit être aussi bref que possible et l'utilisateur doit pouvoir le ignorer à tout moment..
