Aplicația Android Partea 1: Splash Screen folosind fragmente / Kotlin: 5 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:42

Buna din nou, cel mai probabil aveți ceva timp „liber” acasă datorită COVID19 și puteți reveni pentru a verifica subiectele pe care ați dorit să le învățați în trecut.

Dezvoltarea aplicațiilor Android este cu siguranță una dintre ele pentru mine și am decis acum câteva săptămâni să încerc oa doua încercare.

Programarea în Kotlin reduce cu siguranță efortul de codare și ajută la obținerea de rezultate într-un timp destul de scurt. Este cu adevărat grozav!

În această serie de tutoriale, voi explica cum să dezvolți un Tennis Score Tracker. Această aplicație poate fi utilizată atunci când vă jucați cu prietenii și / sau familia (puteți da tableta copilului dvs. și îl puteți ocupa:)). Această aplicație se bazează pe următorul exemplu Kotlin Counter.

Tutorialul are următoarele părți:

Partea 1: Splash Screen folosind fragmente (suntem aici acum)

Partea 2: Configurare potrivire - Proprietăți

Partea 3: Urmărirea scorului meciului

Ideea principală este să împărțiți aplicația în 3 ecrane diferite, fiecare dintre ele o va apela pe următoarea, odată finalizată sau când utilizatorul apasă butonul respectiv.

În această primă parte, voi explica cum să creați un ecran de introducere -> verificați videoclipul de mai sus.

Provizii

Funcții Android utilizate în această parte:

• Fragmente
• Animaţie
• Vibrații
• Media Player
• Ascultători

Instrumente necesare:

• Android Studio
• Kotlin 1.3.61
• API nivel 28

Active necesare

Un fișier sonor sonor

Pasul 1: Proiectarea experienței utilizatorului

Să explicăm caracteristicile ecranului nostru introductiv.

1. vrem să avem un ecran complet în culoare albă
2. vrem să avem ecranul întotdeauna în modul peisaj
3. vrem culoarea logo-textului nostru în gri
4. ne dorim culoarea mingii în tonuri de verde
5. vrem ca logo-ul nostru să dispară
6. vrem o minge de tenis care se mișcă pe ecran (minge care sări)
7. vrem să redăm un sunet de fiecare dată când mingea atinge o suprafață
8. vrem să declanșăm o vibrație a telefonului atunci când este redat un sunet
9. vrem ca durata introducerii să fie mai mică de 4 secunde.

Pasul 2: Manager de fragmente și 3 ecrane

Să ne reamintim ideea principală a aplicației noastre, vrem să avem 3 ecrane (Introducere, Proprietăți și Scor de potrivire). Pentru aceasta vom folosi Fragmente. Deci, avem nevoie de 3 dintre ele câte unul pentru fiecare ecran. Consultați primul fragment de cod.

În cel de-al doilea, putem găsi cum numim primul nostru fragment. Fragmentul Splash este cel care va fi folosit pentru introducerea noastră.

Pasul 3: Aspectarea ecranului pentru aplicații și introducere

• Pentru a stabili poziția ecranului și a ignora orice rotație a telefonului, trebuie să adăugăm următorul cod Imaginea 1 în AndroidManifest.xml.
• Pentru a elimina Bara de acțiuni de pe toate ecranele, trebuie să adăugăm următorul cod Imaginea 2 în styles.xml
• Pentru a împinge ecranul complet în toate ecranele, trebuie să setăm câteva stegulețe ca în imaginea 3 la 2 metode diferite. Oncreate () și onWindowFocusChanged.

Pasul 4: Definirea Logo-ului și Ball Syles

• am definit înainte de textul nostru ca fiind gri, acest lucru se face în fișierul styles.xml. Consultați imaginea 1.
• am definit, de asemenea, că mingea trebuie să fie în tonuri verzi. Pentru aceasta, creăm ball.xml în folderul desenabil. Verificați imaginea 2

Pasul 5: Descrierea animației

Voi explica aici logica și succesiunea animației. Cred că nu are sens să adăugați fragmente de cod aici, mai bine parcurgeți singur codul.

Ideea animației este următoarea:

• După crearea fragmentului, se creează și începe sigla textului
• Odată ce animația logo-ului text este finalizată, este invocată prima mișcare parabolică a mingii de tenis
• Odată ce prima mișcare parabolică este finalizată, un sunet este redat și telefonul vibrează..și următoarea mișcare parabolică este invocată
• Odată ce ultima mișcare parabolică este finalizată și sunetul / vibrațiile sunt executate, ajungem la punctul de a apela al doilea ecran.

Observație: Nu am creat o clasă abstractă pentru animații, pentru că am vrut să păstrez codul plat … mai ușor de urmat cel puțin pentru mine:)

Voi posta a doua parte a seriei în următoarele zile, urmează-mă dacă îți place această parte și dacă nu, aș fi bucuros să primesc feedback-ul tău.