Android App Deel 1: Splash Screen Met Fragments/Kotlin - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

Welkom terug, hoogstwaarschijnlijk heb je wat "vrije" tijd thuis vanwege COVID19 en kun je teruggaan om onderwerpen te bekijken die je in het verleden wilde leren.

Android App-ontwikkeling is er zeker een van voor mij en ik besloot een paar weken geleden om het nog een keer te proberen.

Programmeren in Kotlin vermindert zeker de moeite van het coderen en helpt om in vrij korte tijd resultaten te behalen. Het is echt geweldig!

In deze tutorialserie leg ik uit hoe je een Tennis Score Tracker ontwikkelt. Deze app kan worden gebruikt als je met vrienden en/of familie speelt (je kunt de tablet aan je kind geven en hem/haar bezig houden:)). Deze app is gebaseerd op het volgende voorbeeld van Kotlin Counter.

De tutorial heeft de volgende onderdelen:

Deel 1: Splash Screen met Fragments (we zijn er nu)

Deel 2: Match-configuratie - Eigenschappen

Deel 3: Matchscore-tracker

Het belangrijkste idee is om de app in 3 verschillende schermen te splitsen, elk van hen zal de volgende oproepen, eenmaal voltooid of wanneer de gebruiker op de respectieve knop drukt.

In dit eerste deel zal ik uitleggen hoe je een introscherm maakt -> check video hierboven.

Benodigdheden

Android-functies die in dit deel worden gebruikt:

• Fragmenten
• Animatie
• Trilling
• Mediaspeler
• Luisteraars

Benodigd gereedschap:

• Android Studio
• Kotlin 1.3.61
• API-niveau 28

Vereiste activa

Een piepgeluidsbestand

Stap 1: Ontwerp gebruikerservaring

Laten we de functies van ons Intro-scherm uitleggen.

1. we willen een volledig scherm in witte kleur
2. we willen het scherm altijd in de liggende modus hebben
3. we willen onze logo-tekstkleur in grijs
4. we willen onze balkleur in groene tinten
5. we willen dat onze logo-tekst vervaagt
6. we willen een tennisbal die in het scherm beweegt (stuiterende bal)
7. we willen een geluid spelen elke keer dat de bal een oppervlak raakt
8. we willen een telefoontrilling activeren wanneer een geluid wordt afgespeeld
9. we willen dat de intro-duur korter is dan 4s.

Stap 2: Fragment Manager en 3 schermen

Laten we ons het hoofdidee van onze app herinneren, we willen 3 schermen hebben (Intro, Eigenschappen en Match Score). Hiervoor gaan we fragmenten gebruiken. We hebben er dus 3 nodig, één voor elk scherm. Raadpleeg het eerste codefragment.

In de tweede kunnen we vinden hoe we ons eerste fragment noemen. Het Splash-fragment is het fragment dat we voor onze Intro gebruiken.

Stap 3: Indeling van app- en introductiescherm

• Om de positie van het scherm vast te stellen en elke rotatie van de telefoon te negeren, moeten we de volgende code Afbeelding 1 toevoegen in AndroidManifest.xml.
• Om Action Bar van alle schermen te verwijderen, moeten we de volgende code toevoegen Afbeelding 2 in styles.xml
• Om volledig scherm in alle schermen te krijgen, moeten we een aantal vlaggen instellen zoals in Afbeelding 3 op 2 verschillende methoden. Oncreate() en onWindowFocusChanged.

Stap 4: Logo en balstijlen definiëren

• we hebben voor onze tekst grijs gedefinieerd, dit wordt gedaan onder het bestand styles.xml. Zie foto 1.
• we hebben ook gedefinieerd dat de bal in groene tinten moet zijn. Hiervoor maken we ball.xml onder een tekenbare map. Controleer foto 2

Stap 5: Animatiebeschrijving

Ik zal hier de logica en volgorde van de animatie uitleggen. Ik denk dat het geen zin heeft om hier codefragmenten toe te voegen, je kunt beter zelf de code doornemen.

Het idee van de animatie is als volgt:

• Nadat het fragment is gemaakt, wordt het tekstlogo gemaakt en gestart
• Zodra de tekstlogo-animatie is voltooid, wordt de eerste parabolische beweging van de tennisbal aangeroepen
• Zodra de eerste parabolische beweging is voltooid, wordt er een geluid afgespeeld en de telefoon trilt..en de volgende parabolische beweging wordt opgeroepen
• Zodra de laatste parabolische beweging is voltooid en geluid/trilling is uitgevoerd, bereiken we het punt om ons tweede scherm op te roepen.

Opmerking: ik heb geen abstracte klasse voor animaties gemaakt, omdat ik de code plat wilde houden … gemakkelijker te volgen, althans voor mij:)

Ik zal het tweede deel van de serie in de komende dagen posten, volg me als je dit deel leuk vindt en zo niet, dan zou ik graag je feedback krijgen.