Android App Del 1: Stænkskærm ved hjælp af fragmenter/Kotlin: 5 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Hej igen, sandsynligvis har du noget "frit" tid derhjemme på grund af COVID19, og du kan gå tilbage for at tjekke emner, du tidligere ville lære.

Android App -udvikling er bestemt en af dem for mig, og jeg besluttede for et par uger siden at prøve igen.

Programmering i Kotlin reducerer helt sikkert kodningsindsatsen og hjælper med at opnå resultater på ganske kort tid. Det er virkelig fantastisk!

I denne tutorial -serie vil jeg forklare, hvordan man udvikler en Tennis Score Tracker. Denne app kan bruges, når du spiller med venner og/eller familie (du kan give tabletten til dit barn og holde ham/hende optaget:)). Denne app er baseret på følgende Kotlin Counter -eksempel.

Vejledningen har følgende dele:

Del 1: Splash Screen ved hjælp af fragmenter (vi er her nu)

Del 2: Matchkonfiguration - Egenskaber

Del 3: Match Score tracker

Hovedideen er at opdele appen i 3 forskellige skærme, hver af dem vil kalde den næste, når den er afsluttet, eller når brugeren trykker på den respektive knap.

I denne første del vil jeg forklare, hvordan man opretter en introskærm -> tjek video ovenfor.

Forbrugsvarer

Android -funktioner, der bruges i denne del:

• Fragmenter
• Animation
• Vibration
• Medie afspiller
• Lyttere

Påkrævede værktøjer:

• Android Studio
• Kotlin 1.3.61
• API -niveau 28

Nødvendige aktiver

En bip lydfil

Trin 1: Brugeroplevelsesdesign

Lad os forklare funktionerne på vores Intro -skærm.

1. vi vil have en fuld skærm i hvid farve
2. vi ønsker at have skærmen altid i liggende tilstand
3. vi vil have vores logo-tekst farve i gråt
4. vi vil have vores boldfarve i grønne toner
5. vi vil have vores logo-tekst til at falme ind
6. vi vil have en tennisbold, der bevæger sig i skærmen (hoppende bold)
7. vi vil spille en lyd hver gang bolden rører en overflade
8. vi ønsker at udløse en telefonvibration, når der afspilles en lyd
9. vi ønsker, at introduktionsvarigheden er mindre end 4 sekunder.

Trin 2: Fragment Manager og 3 skærme

Lad os huske hovedidéen med vores app, vi vil have 3 skærme (Intro, egenskaber og Match Score). Til dette vil vi bruge Fragmenter. Så vi har brug for 3 af dem en til hver skærm. Se det første kodestykke.

I den anden kan vi finde, hvordan vi kalder vores første fragment. Splash -fragmentet er det, der skal bruges til vores Intro.

Trin 3: App- og introduktionsskærmlayout

• For at fastsætte skærmens position og ignorere enhver rotation af telefonen, skal vi tilføje følgende kode Billede 1 i AndroidManifest.xml.
• For at fjerne Action Bar fra alle skærme skal vi tilføje følgende kode billede 2 i styles.xml
• For at skubbe fuld skærm i alle skærme skal vi indstille nogle flag som i Billede 3 til 2 forskellige metoder. Oncreate () og onWindowFocusChanged.

Trin 4: Definering af logo og kuglesyles

• vi definerede før vores tekst som grå, dette gøres under styles.xml -fil. Se billede 1.
• Vi definerede også, at bolden skulle være i grønne toner. Til dette opretter vi ball.xml under tegnbar mappe. Tjek billede 2

Trin 5: Beskrivelse af animation

Jeg vil her forklare logikken og rækkefølgen af animationen. Jeg synes, det ikke giver mening at tilføje kodeuddrag her, bedre du selv går igennem koden.

Idéen med animationen er som følger:

• Efter at fragmentet er oprettet, oprettes og startes tekstlogoet
• Når tekstlogo -animationen er afsluttet, påberåbes tennisboldens første paraboliske træk
• Når den første parabolske bevægelse er afsluttet, afspilles en lyd, og telefonen vibrerer..og næste paraboliske bevægelse aktiveres
• Når den sidste parabolske bevægelse er afsluttet, og lyd/vibration er udført, når vi det punkt, hvor vi kalder vores anden skærm.

Bemærk: Jeg lavede ikke en abstrakt klasse til animationer, fordi jeg ville beholde koden flad … lettere at følge i hvert fald for mig:)

Jeg vil sende anden del af serien i de næste dage, følg mig, hvis du kan lide denne del, og hvis ikke, ville jeg blive glad for at få din feedback.