Obsah:

Aplikácia pre Android, časť 1: Úvodná obrazovka s použitím fragmentov/Kotlin: 5 krokov
Aplikácia pre Android, časť 1: Úvodná obrazovka s použitím fragmentov/Kotlin: 5 krokov

Video: Aplikácia pre Android, časť 1: Úvodná obrazovka s použitím fragmentov/Kotlin: 5 krokov

Video: Aplikácia pre Android, časť 1: Úvodná obrazovka s použitím fragmentov/Kotlin: 5 krokov
Video: ANDROID jak rozdělit obrazovku, jak použít dvě aplikace v ANDROID najednou, ICT TOTI 2024, November
Anonim
Image
Image
Správca fragmentov a 3 obrazovky
Správca fragmentov a 3 obrazovky

Ahoj zas, pravdepodobne máte kvôli COVID19 nejaký „voľný“čas doma a môžete sa vrátiť späť k témam, ktoré ste sa chceli v minulosti naučiť.

Vývoj aplikácií pre Android je pre mňa určite jedným z nich a pred niekoľkými týždňami som sa rozhodol skúsiť druhý pokus.

Programovanie v Kotline rozhodne znižuje náročnosť na kódovanie a pomáha dosiahnuť výsledky v pomerne krátkom čase. Je to naozaj skvelé!

V tejto sérii tutoriálov vám vysvetlím, ako vyvinúť nástroj Tracker Score Tracker. Túto aplikáciu je možné použiť, keď hráte s priateľmi a/alebo rodinou (tablet môžete dať svojmu dieťaťu a zamestnať ho:)). Táto aplikácia je založená na nasledujúcom príklade Kotlin Counter.

Tutoriál má nasledujúce časti:

Časť 1: Úvodná obrazovka pomocou fragmentov (teraz sme tu)

Časť 2: Konfigurácia zápasu - vlastnosti

Časť 3: Sledovač skóre zápasov

Hlavnou myšlienkou je rozdeliť aplikáciu na 3 rôzne obrazovky, z ktorých každá z nich zavolá ďalšiu, keď je dokončená alebo keď používateľ stlačí príslušné tlačidlo.

V tejto prvej časti vysvetlím, ako vytvoriť úvodnú obrazovku -> skontrolujte video vyššie.

Zásoby

Funkcie systému Android použité v tejto časti:

  • Fragmenty
  • Animácia
  • Vibrácie
  • Mediálny prehrávač
  • Poslucháči

Požadované nástroje:

  • Android Studio
  • Kotlin 1.3.61
  • Úroveň API 28

Požadovaný majetok

Zvukový súbor s pípnutím

Krok 1: Dizajn používateľskej skúsenosti

Vysvetlíme funkcie našej úvodnej obrazovky.

  1. chceme mať celú obrazovku v bielej farbe
  2. chceme mať obrazovku vždy v režime na šírku
  3. chceme, aby bola farba textu nášho loga sivá
  4. chceme, aby naša farba gule bola v zelených tónoch
  5. chceme, aby sa náš text s logom postupne prebúdzal
  6. Chceme, aby sa tenisová loptička pohybovala na obrazovke (odrážajúca sa lopta)
  7. Chceme zahrať zvuk zakaždým, keď sa lopta dotkne povrchu
  8. pri spustení zvuku chceme spustiť vibrácie telefónu
  9. chceme, aby úvodné trvanie bolo kratšie ako 4 s.

Krok 2: Fragment Manager a 3 obrazovky

Správca fragmentov a 3 obrazovky
Správca fragmentov a 3 obrazovky

Pripomeňme si hlavnú myšlienku našej aplikácie, chceme mať 3 obrazovky (úvod, vlastnosti a skóre zápasu). Na tento účel použijeme fragmenty. Potrebujeme teda 3 z nich pre každú obrazovku. Pozrite si prvý útržok kódu.

V druhom z nich môžeme nájsť, ako nazývame náš prvý fragment. Fragment Splash je ten, ktorý sa má použiť v našom úvode.

Krok 3: Rozloženie obrazovky aplikácie a úvodnej obrazovky

Rozloženie obrazovky aplikácie a intro
Rozloženie obrazovky aplikácie a intro
Rozloženie obrazovky aplikácie a intro
Rozloženie obrazovky aplikácie a intro
Rozloženie obrazovky aplikácie a intro
Rozloženie obrazovky aplikácie a intro
  • Aby sme opravili polohu obrazovky a ignorovali akékoľvek otáčanie telefónu, musíme do AndroidManifest.xml pridať nasledujúci kód Obrázok 1.
  • Aby sme mohli odstrániť panel akcií zo všetkých obrazoviek, musíme do štýlov.xml pridať nasledujúci kód Obrázok 2
  • Aby bolo možné tlačiť na celú obrazovku na všetkých obrazovkách, musíme nastaviť niektoré vlajky ako na obrázku 3 na 2 rôzne metódy. Oncreate () a onWindowFocusChanged.

Krok 4: Definovanie loga a guľôčkových sylov

Definovanie loga a guľôčkových syl
Definovanie loga a guľôčkových syl
Definovanie loga a guľôčkových syl
Definovanie loga a guľôčkových syl
  • definovali sme pred naším textom ako sivú, to sa robí v súbore styles.xml. Pozrite si obrázok 1.
  • definovali sme tiež, že lopta by mala byť v zelených tónoch. Na tento účel vytvoríme súbor ball.xml pod nakresleným priečinkom. Skontrolujte obrázok 2

Krok 5: Popis animácie

Vysvetlím tu logiku a postupnosť animácie. Myslím si, že nemá zmysel sem pridávať útržky kódu, pretože lepšie je prejsť kódom sami.

Myšlienka animácie je nasledovná:

  • Po vytvorení fragmentu sa vytvorí a spustí textové logo
  • Akonáhle je animácia loga textu dokončená, vyvolá sa prvý parabolický pohyb tenisovej loptičky
  • Akonáhle je prvý parabolický pohyb dokončený, zaznie zvuk a telefón zavibruje … a spustí sa ďalší parabolický pohyb
  • Akonáhle je dokončený posledný parabolický pohyb a je vykonaný zvuk/vibrácie, dosiahneme bod, ktorý zavolá našu druhú obrazovku.

Poznámka: Nevytvoril som abstraktnú triedu pre animácie, pretože som chcel zachovať plochý kód … jednoduchšie ho sledovať, aspoň pre mňa:)

Druhú časť série zverejním v najbližších dňoch, sledujte ma, ak sa vám táto časť páči, a ak nie, budem rada, ak mi pošlete spätnú väzbu.

Odporúča: