INHOUDSOPGAWE:

Android App Deel 1: Splash Screen Using Fragments/Kotlin: 5 Stappe
Android App Deel 1: Splash Screen Using Fragments/Kotlin: 5 Stappe

Video: Android App Deel 1: Splash Screen Using Fragments/Kotlin: 5 Stappe

Video: Android App Deel 1: Splash Screen Using Fragments/Kotlin: 5 Stappe
Video: Splash Screen in Android Studio using Kotlin | Latest 2023 API Method 2024, Julie
Anonim
Image
Image
Fragmentbestuurder en 3 skerms
Fragmentbestuurder en 3 skerms

Hallo weer, heel waarskynlik het u 'n 'vrye' tyd tuis as gevolg van COVID19, en u kan teruggaan na onderwerpe wat u in die verlede wou leer.

Die ontwikkeling van Android -programme is beslis een daarvan, en ek het 'n paar weke gelede besluit om 'n tweede keer te probeer.

Programmering in Kotlin verminder beslis die moeite van kodering en help om binne 'n kort tydjie resultate te behaal. Dit is regtig wonderlik!

In hierdie tutoriaalreeks sal ek verduidelik hoe om 'n Tennis Score Tracker te ontwikkel. Hierdie app kan gebruik word as u met vriende en/of familie speel (u kan die tablet vir u kind gee en hom/haar besig hou:)). Hierdie app is gebaseer op die volgende voorbeeld van Kotlin Counter.

Die tutoriaal bevat die volgende dele:

Deel 1: Splash Screen met fragmente (ons is nou hier)

Deel 2: Pas opstelling - Eienskappe

Deel 3: Match Score tracker

Die belangrikste idee is om die app in 3 verskillende skerms te verdeel, elkeen sal die volgende een noem, sodra dit voltooi is of as die gebruiker op die onderskeie knoppie druk.

In hierdie eerste deel sal ek verduidelik hoe u 'n introskerm kan skep -> kyk die video hierbo.

Voorrade

Android -funksies wat in hierdie deel gebruik word:

  • Fragmente
  • Animasie
  • Vibrasie
  • Media-speler
  • Luisteraars

Vereiste gereedskap:

  • Android Studio
  • Kotlin 1.3.61
  • API -vlak 28

Vereiste bates

'N Piepklanklêer

Stap 1: Ontwerp van gebruikerservaring

Kom ons verduidelik die funksies van ons Intro -skerm.

  1. ons wil 'n volledige skerm in wit kleur hê
  2. ons wil hê dat die skerm altyd in landskapmodus moet wees
  3. ons wil ons logo-teks kleur in grys hê
  4. ons wil ons bal kleur in groen kleure hê
  5. ons wil hê dat ons logo-teks vervaag
  6. ons wil hê dat 'n tennisbal in die skerm beweeg (bonsende bal)
  7. ons wil 'n klank speel elke keer as die bal 'n oppervlak raak
  8. ons wil 'n telefoonvibrasie veroorsaak wanneer 'n geluid gespeel word
  9. ons wil hê dat die inleidingsduur minder as 4 sekondes is.

Stap 2: Fragmentbestuurder en 3 skerms

Fragmentbestuurder en 3 skerms
Fragmentbestuurder en 3 skerms

Laat ons die hoofgedagte van ons app onthou, ons wil drie skerms hê (inleiding, eienskappe en ooreenstemmingsyfer). Hiervoor gaan ons fragmente gebruik. Ons benodig dus 3 van hulle een vir elke skerm. Verwys na die eerste kodefragment.

In die tweede een kan ons vind hoe ons ons eerste fragment noem. Die Splash -fragment is die een wat gebruik moet word vir ons Intro.

Stap 3: App- en intro -skermuitleg

Program- en inleidingskermuitleg
Program- en inleidingskermuitleg
Program- en inleidingskermuitleg
Program- en inleidingskermuitleg
Program- en inleidingskermuitleg
Program- en inleidingskermuitleg
  • Om die posisie van die skerm vas te stel en die draai van die telefoon te ignoreer, moet ons die volgende kode prent 1 by AndroidManifest.xml byvoeg.
  • Om die aksiebalk van alle skerms te verwyder, moet ons die volgende kode prent 2 by styles.xml byvoeg
  • Om die volle skerm in alle skerms te druk, moet ons 'n paar vlae soos in prent 3 op 2 verskillende metodes stel. Oncreate () en onWindowFocusChanged.

Stap 4: Definieer logo en balstande

Die definiëring van logo's en balsyles
Die definiëring van logo's en balsyles
Die definiëring van logo's en balsyles
Die definiëring van logo's en balsyles
  • Ons het voor ons teks as grys gedefinieer, dit word gedoen onder style.xml -lêer. Verwys na prent 1.
  • Ons het ook gedefinieer dat die bal in groen kleure moet wees. Hiervoor skep ons bal.xml onder 'n tekenbare gids. Kyk na foto 2

Stap 5: Animasiebeskrywing

Ek sal hier die logika en volgorde van die animasie verduidelik. Ek dink dit is nie sinvol om kodebrokkies hier by te voeg nie, beter as u self deur die kode gaan.

Die idee van die animasie is soos volg:

  • Nadat die fragment geskep is, word die tekslogo geskep en begin
  • Sodra die teks -logo -animasie voltooi is, word die eerste paraboliese beweging van die tennisbal aangeroep
  • Sodra die eerste paraboliese beweging voltooi is, word 'n geluid gespeel en die telefoon vibreer … en die volgende paraboliese beweging word aangeroep
  • Sodra die laaste paraboliese beweging voltooi is en klank/vibrasie uitgevoer is, bereik ons die punt om ons tweede skerm te bel.

Opmerking: ek het nie 'n abstrakte klas vir animasies geskep nie, want ek wou die kode plat hou … makliker om ten minste vir my te volg:)

Ek sal in die komende dae die tweede deel van die reeks plaas, volg my as u van hierdie deel hou, en indien nie, sal ek u terugvoer graag ontvang.

Aanbeveel: