Aplicació per a Android Part 1: pantalla de presentació amb fragments / Kotlin: 5 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

Hola de nou, molt probablement tingueu una estona "lliure" a casa a causa de COVID19 i podreu tornar a comprovar els temes que volíeu aprendre en el passat.

El desenvolupament d'aplicacions d'Android és definitivament un d'ells per a mi i vaig decidir fa unes setmanes provar-ho de nou.

La programació a Kotlin redueix definitivament l’esforç de codificació i ajuda a obtenir resultats en un temps bastant curt. És realment genial!

En aquesta sèrie de tutorial, explicaré com desenvolupar un Tennis Score Tracker. Aquesta aplicació es pot utilitzar quan jugueu amb amics i / o familiars (podeu donar la tauleta al vostre fill i mantenir-lo ocupat:)). Aquesta aplicació es basa en el següent exemple de Kotlin Counter.

El tutorial té les següents parts:

Primera part: pantalla de presentació mitjançant fragments (ja som aquí)

Part 2: Configuració de coincidències - Propietats

Part 3: seguidor de la puntuació del partit

La idea principal és dividir l’aplicació en 3 pantalles diferents, cadascuna d’elles trucarà a la següent, un cop finalitzada o quan l’usuari premi el botó corresponent.

En aquesta primera part, explicaré com crear una pantalla d'introducció -> comproveu el vídeo anterior.

Subministraments

Funcions d'Android que s'utilitzen en aquesta part:

• Fragments
• Animació
• Vibració
• Reproductor multimèdia
• Oients

Eines necessàries:

• Android Studio
• Kotlin 1.3.61
• API nivell 28

Actius necessaris

Un fitxer de so sonor

Pas 1: disseny de l'experiència d'usuari

Expliquem les funcions de la nostra pantalla d'introducció.

1. volem tenir una pantalla completa en color blanc
2. volem tenir la pantalla sempre en mode horitzontal
3. volem que el nostre color de text de logotip sigui gris
4. volem el color de la nostra bola en tons verds
5. volem que el text del logotip s’esvaeixi
6. volem que una pilota de tennis es mogui a la pantalla (pilota que rebota)
7. volem reproduir un so cada vegada que la pilota toca una superfície
8. volem activar la vibració del telèfon quan es reprodueix un so
9. volem que la durada de la introducció sigui inferior a 4 segons.

Pas 2: Gestor de fragments i 3 pantalles

Recordem la idea principal de la nostra aplicació, volem tenir 3 pantalles (Introducció, Propietats i Puntuació de coincidència). Per a això utilitzarem Fragments. Per tant, necessitem 3 d’ells un per a cada pantalla. Consulteu el primer fragment de codi.

En el segon, podem trobar com anomenem el nostre primer fragment. El fragment Splash és el que s’utilitzarà per a la nostra Introducció.

Pas 3: Disseny de la pantalla d'aplicacions i d'introducció

• Per tal de fixar la posició de la pantalla i ignorar qualsevol rotació del telèfon, hem d’afegir el següent codi Imatge 1 a AndroidManifest.xml.
• Per eliminar la barra d’acció de totes les pantalles, hem d’afegir el següent codi Imatge 2 a styles.xml
• Per prémer la pantalla completa a totes les pantalles, hem d’establir algunes marques com a la imatge 3 en 2 mètodes diferents. Oncreate () i onWindowFocusChanged.

Pas 4: definició del logotip i Ball Syles

• abans del nostre text hem definit com a gris, això es fa al fitxer styles.xml. Consulteu la imatge 1.
• també hem definit que la bola hauria de ser de tons verds. Per a això, creem ball.xml a la carpeta dibuixable. Consulteu la imatge 2

Pas 5: descripció de l'animació

Aquí explicaré la lògica i la seqüència de l'animació. Crec que no té sentit afegir fragments de codi aquí, millor que passeu el codi vosaltres mateixos.

La idea de l'animació és la següent:

• Després de crear el fragment, es crea i s'inicia el logotip del text
• Un cop finalitzada l'animació del logotip de text, s'invoca la primera jugada parabòlica de la pilota de tennis
• Un cop finalitzat el primer moviment parabòlic, es reprodueix un so i el telèfon vibra i s’invoca el següent moviment parabòlic
• Un cop finalitzat l’últim moviment parabòlic i executat el so / vibració, arribem al punt de trucar a la nostra segona pantalla.

Observació: no vaig crear una classe abstracta per a animacions, perquè volia mantenir el codi pla … més fàcil de seguir almenys per a mi:)

Publicaré la segona part de la sèrie en els pròxims dies, seguiu-me si us agrada aquesta part i, si no, m'agradaria rebre els vostres comentaris.