Application Android Partie 1 : écran de démarrage utilisant des fragments/Kotlin : 5 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Rebonjour, vous avez très probablement du temps "libre" à la maison en raison de COVID19 et vous pouvez revenir en arrière pour vérifier les sujets que vous vouliez apprendre dans le passé.

Le développement d'applications Android est définitivement l'un d'entre eux pour moi et j'ai décidé il y a quelques semaines de faire un deuxième essai.

La programmation en Kotlin réduit définitivement l'effort de codage et aide à obtenir des résultats en assez peu de temps. C'est vraiment super !

Dans cette série de tutoriels, je vais vous expliquer comment développer un Tennis Score Tracker. Cette application peut être utilisée lorsque vous jouez avec des amis et/ou de la famille (vous pouvez donner la tablette à votre enfant et l'occuper:)). Cette application est basée sur l'exemple de compteur Kotlin suivant.

Le didacticiel comprend les parties suivantes:

Partie 1: Écran de démarrage utilisant des fragments (nous sommes ici maintenant)

Partie 2: Configuration de la correspondance – Propriétés

Partie 3: Suivi des scores de match

L'idée principale est de diviser l'application en 3 écrans différents, chacun d'eux appellera le suivant, une fois terminé ou lorsque l'utilisateur appuie sur le bouton respectif.

Dans cette première partie, je vais vous expliquer comment créer un écran d'introduction -> regardez la vidéo ci-dessus.

Fournitures

Fonctionnalités Android utilisées dans cette partie:

• Fragment
• Animation
• Vibration
• Lecteur multimédia
• Les auditeurs

Outils requis:

• Android Studio
• Kotlin 1.3.61
• API niveau 28

Actifs requis

Un fichier sonore de bip

Étape 1: Conception de l'expérience utilisateur

Expliquons les caractéristiques de notre écran d'introduction.

1. nous voulons avoir un plein écran en couleur blanche
2. nous voulons avoir l'écran toujours en mode paysage
3. nous voulons la couleur de notre logo-texte en gris
4. nous voulons la couleur de notre boule dans des tons de vert
5. nous voulons que notre logo-texte s'estompe
6. on veut une balle de tennis qui bouge dans l'écran (balle rebondissante)
7. nous voulons jouer un son à chaque fois que la balle touche une surface
8. nous voulons déclencher une vibration du téléphone lorsqu'un son est joué
9. nous voulons que la durée de l'intro soit inférieure à 4s.

Étape 2: Gestionnaire de fragments et 3 écrans

Rappelons l'idée principale de notre App, nous voulons avoir 3 écrans (Intro, Propriétés et Match Score). Pour cela, nous allons utiliser des fragments. Nous en avons donc besoin de 3 pour chaque écran. Reportez-vous au premier extrait de code.

Dans le second, nous pouvons trouver comment nous appelons notre premier fragment. Le fragment Splash est celui à utiliser pour notre Intro.

Étape 3: Disposition de l'application et de l'écran d'introduction

• Afin de corriger la position de l'écran et d'ignorer toute rotation du téléphone, nous devons ajouter le code suivant Image 1 dans AndroidManifest.xml.
• Afin de supprimer Action Bar de tous les écrans, nous devons ajouter le code suivant Image 2 dans styles.xml
• Afin de pousser le plein écran dans tous les écrans, nous devons définir des indicateurs comme dans l'image 3 à 2 méthodes différentes. Oncreate() et onWindowFocusChanged.

Étape 4: Définir les logos et les balles

• nous avons défini avant notre texte comme gris, cela se fait sous le fichier styles.xml. Référez-vous à l'image 1.
• nous avons également défini que la balle doit être dans des tons verts. Pour cela, nous créons ball.xml sous le dossier drawable. Vérifiez la photo 2

Étape 5: Description de l'animation

Je vais expliquer ici la logique et la séquence de l'animation. Je pense que cela n'a pas de sens d'ajouter des extraits de code ici, il vaut mieux que vous parcouriez le code vous-même.

L'idée de l'animation est la suivante:

• Une fois le fragment créé, le logo texte est créé et démarré
• Une fois l'animation du logo texte terminée, le premier mouvement parabolique de la balle de tennis est invoqué
• Une fois le premier mouvement parabolique terminé, un son est joué et le téléphone vibre..et le prochain mouvement parabolique est invoqué
• Une fois le dernier mouvement parabolique terminé et le son/vibration exécuté, nous atteignons le point d'appeler notre deuxième écran.

Remarque: je n'ai pas créé de classe abstraite pour les animations, car je voulais garder le code plat… plus facile à suivre au moins pour moi:)

Je posterai la deuxième partie de la série dans les prochains jours, suivez-moi si vous aimez cette partie et sinon, je serais heureux d'avoir vos retours.