Création d’écrans d’intégration pour les applications Android

introduction

Il ne faut pas un génie pour comprendre qu’une application qui fait en sorte que les nouveaux utilisateurs se sentent les bienvenus et à l’aise est susceptible de jouir de beaucoup plus de popularité qu’une application qui les laisse perdus et confus. En conséquence, de nombreux développeurs essaient ces jours-ci de faire en sorte que leurs utilisateurs aient une bonne expérience d’intégration.

Si vous développez une application innovante dont les fonctionnalités et les utilisations peuvent ne pas être évidentes pour les nouveaux utilisateurs, vous devriez envisager d’ajouter quelques écrans d’intégration à votre application. Dans ce didacticiel, je vais vous montrer un moyen simple de créer et d’ajouter rapidement de tels écrans à votre application Android.

1. Ajouter des dépendances Gradle

Tout d’abord, ajoutez le Bibliothèque de conception de matériaux comme un compile dépendance à la build.gradle dossier du app module afin que vous puissiez utiliser les éléments d’interface utilisateur d’Android L dans les anciennes versions d’Android.

Ensuite, ajoutez un compile dépendance pour SmartTabLayout
, une bibliothèque qui offre un élément de bande de titre personnalisé pour le ViewPager composant.

Nous utiliserons également des classes appartenant à la bibliothèque Android Support v4. Cependant, vous n’avez pas à l’ajouter manuellement, car Android Studio l’ajoute par défaut.

2. Définissez la disposition de l’intégration Activity

L’intégration Activity sera responsable de l’affichage de tous les écrans d’intégration. Par conséquent, ce Activity aura les widgets suivants:

  • UNE ViewPager instance qui permet aux utilisateurs d’utiliser le geste de balayage pour passer d’un écran d’intégration à l’autre.
  • UNE ButtonFlat étiqueté Sauter, ce qui permet aux utilisateurs impatients de sauter le processus d’intégration.
  • UNE ButtonFlat étiqueté Prochain, qui amène l’utilisateur à l’écran d’accueil suivant.
  • UNE SmartTabLayout qui sert d’indicateur de page pour le ViewPager composant.

Après avoir placé ces widgets dans un RelativeLayout et en les positionnant, le code dans le fichier XML de mise en page de l’intégration Activity devrait ressembler à ceci:

N’hésitez pas à modifier la mise en page en fonction de vos préférences. J’appellerai ce fichier de mise en page activity_onboarding.xml.

3. Définissez les dispositions des écrans d’intégration

Pour ce didacticiel, vous allez créer trois écrans d’intégration. Pour simplifier le tutoriel, les écrans n’auront que deux TextView widgets. Dans une vraie application, vous devez également vous efforcer de garder les écrans d’intégration aussi simples que possible pour éviter que les nouveaux utilisateurs ne soient submergé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:

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 devez changer le text propriété de chacun TextView widget afin que chaque écran d’intégration soit unique.

4. Créez un Fragment pour chaque écran d’intégration

Créez une nouvelle classe Java et nommez-la OnboardingFragment1.java. Faites-en une sous-classe de Fragment et remplacer son onCreateView méthode. Ensuite, appelez le inflate méthode pour créer un View en utilisant la mise en page que nous avons définie dans onboarding_screen1.xml et renvoyer le View. Votre classe devrait ressembler à ceci:

le Fragment pour 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.

5. Créez l’intégration Activity

Créez une nouvelle classe Java et nommez-la OnboardingActivity.java. Faites-en une sous-classe de FragmentActivity et remplacer son onCreate méthode.

Ensuite, déclarez un ViewPager, une SmartTabLayout, et deux ButtonFlat widgets en tant que variables membres de la classe.

dans le onCreate méthode, appel setContentView pour afficher la mise en page définie dans activity_onboarding.xml et utilisez le findViewById méthode pour initialiser les variables membres.

Vous devez maintenant créer un FragmentStatePagerAdapter que le ViewPager peut utiliser pour afficher les écrans d’intégration. 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érera automatiquement du code pour les méthodes abstraites comme indiqué ci-dessous.

dans le getCount méthode, renvoie le nombre d’écrans d’intégration.

Ajouter un switch déclaration à la getItem méthode pour renvoyer la bonne Fragment basé sur la valeur de position.

Toujours dans le onCreate méthode, associez la FragmentStatePagerAdapter avec le ViewPager en appelant le setAdapter méthode.

Maintenant que le ViewPager est prêt, pointez le SmartTabLayout à lui en appelant le setViewPager méthode.

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 de View.OnClickListener classe à elle.

Dans le gestionnaire du skip bouton, appelez une méthode nommée finitionOnboarding. Nous implémenterons cette méthode à l’étape suivante.

Dans le gestionnaire du next bouton, utilisez setCurrentItem de même que getCurrentItem pour passer à l’écran d’accueil suivant. Également si getCurrentItem renvoie le dernier écran d’intégration, appelle une méthode nommée finitionOnboarding. Nous implémenterons cette méthode dans un instant.

Le code des gestionnaires des boutons devrait ressembler à ceci:

Vous souhaiterez peut-être apporter quelques modifications à la disposition de l’intégration Activity, comme la suppression du skip et changer le libellé du next bouton pour Terminé lorsque l’utilisateur atteint le dernier écran d’intégration. Vous pouvez le faire en ajoutant un SimpleOnPageChangeListener à la SmartTabLayout et outrepasser son onPageSelected méthode.

6. Fin de l’expérience d’intégration

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 finitionOnboarding méthode (c’est le nom que nous avons utilisé à l’étape précédente).

dans le finishOnboarding méthode, obtenez une référence à la SharedPreferences objet de l’application et définissez un boolean pour la clé onboarding_complete à true en utilisant le putBoolean méthode. Nous utiliserons cette clé à l’étape suivante pour nous assurer que les utilisateurs ne voient les écrans d’intégration que s’ils n’ont pas terminé le processus d’intégration.

Ensuite, créez un nouveau Intent et appelez le startActivity méthode pour lancer le principal Activity (la Activity qui est censé s’ouvrir lorsque l’utilisateur clique sur l’icône de l’application).

Enfin, appelez finish fermer OnboardingActivity. C’est ce que la mise en œuvre du finishOnboarding La méthode devrait ressembler à:

7. Démarrage de l’intégration Activity

L’intégration Activity devrait démarrer 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 pour détecter les nouveaux utilisateurs et lancer OnboardingActivity dans le onCreate méthode principale de votre application Activity.

En vérifiant si le SharedPreferences l’objet a une clé appelée onboarding_complete dont la valeur est true, vous pouvez déterminer si l’utilisateur a terminé le processus d’intégration. Si la valeur de la clé est false, fermez le principal Activity immédiatement et créez un nouveau Intent lancer OnboardingActivity. Jetez un œil au bloc de code suivant pour mieux comprendre ce concept.

8.Mettre à jour le manifeste de l’application

Si vous ne l’avez pas déjà fait, déclarez OnboardingActivity dans le manifeste de l’application.

9. Compilez et exécutez

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’intégration au lieu de l’écran principal Activity.

Conclusion

Dans ce didacticiel, 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 doit être utilisée.

Pour une expérience utilisateur optimale, le processus d’intégration doit être aussi court que possible et l’utilisateur doit pouvoir l’ignorer à tout moment.

En relation :  Les détectives de Reddit ont décodé Black Mirror: Bandersnatch
Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.