Obsah:

Aplikace pro Android Část 1: Úvodní obrazovka pomocí fragmentů/Kotlin: 5 kroků
Aplikace pro Android Část 1: Úvodní obrazovka pomocí fragmentů/Kotlin: 5 kroků

Video: Aplikace pro Android Část 1: Úvodní obrazovka pomocí fragmentů/Kotlin: 5 kroků

Video: Aplikace pro Android Část 1: Úvodní obrazovka pomocí fragmentů/Kotlin: 5 kroků
Video: Hacked Jacuzzi, JDK 18, Kotlin 1.7.0, ECMAScript 2022 a nové produkty Amazonu [MJC News #10] 2024, Červenec
Anonim
Image
Image
Fragment Manager a 3 obrazovky
Fragment Manager a 3 obrazovky

Ahoj znovu, s největší pravděpodobností máte doma nějaký „volný“čas kvůli COVID19 a můžete se vrátit a zkontrolovat témata, která jste se chtěli v minulosti naučit.

Vývoj aplikací pro Android je pro mě rozhodně jedním z nich a před několika týdny jsem se rozhodl zkusit to znovu.

Programování v Kotlin rozhodně snižuje úsilí o kódování a pomáhá dosahovat výsledků v poměrně krátké době. Je to opravdu skvělé!

V této sérii tutoriálů vysvětlím, jak vyvinout Tracker Tennis Score Tracker. Tuto aplikaci lze použít, když hrajete s přáteli a/nebo rodinou (tablet můžete dát svému dítěti a zaměstnat ho:)). Tato aplikace je založena na následujícím příkladu Kotlin Counter.

Výukový program má následující části:

Část 1: Úvodní obrazovka pomocí fragmentů (teď jsme tady)

Část 2: Konfigurace shody - vlastnosti

Část 3: Match Score tracker

Hlavní myšlenkou je rozdělit aplikaci na 3 různé obrazovky, z nichž každá zavolá další, jakmile bude dokončena nebo když uživatel stiskne příslušné tlačítko.

V této první části vysvětlím, jak vytvořit úvodní obrazovku -> zkontrolovat video výše.

Zásoby

Funkce Android použité v této části:

  • Fragmenty
  • Animace
  • Vibrace
  • Přehrávač médií
  • Posluchači

Požadované nástroje:

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

Povinná aktiva

Zvukový soubor pípnutí

Krok 1: Design uživatelské zkušenosti

Pojďme si vysvětlit funkce naší úvodní obrazovky.

  1. chceme mít celou obrazovku v bílé barvě
  2. chceme mít obrazovku vždy v režimu na šířku
  3. chceme, aby naše barva textu loga byla šedá
  4. chceme, aby naše barva koule byla v zelených tónech
  5. chceme, aby text našeho loga zeslábl
  6. chceme, aby se tenisový míček pohyboval na obrazovce (skákací míč)
  7. chceme hrát zvuk pokaždé, když se míč dotkne povrchu
  8. chceme při přehrávání zvuku spustit vibrace telefonu
  9. chceme, aby úvodní doba byla kratší než 4 s.

Krok 2: Fragment Manager a 3 obrazovky

Fragment Manager a 3 obrazovky
Fragment Manager a 3 obrazovky

Připomeňme si hlavní myšlenku naší aplikace, chceme mít 3 obrazovky (úvod, vlastnosti a skóre shody). K tomu použijeme Fragmenty. Potřebujeme tedy 3 z nich pro každou obrazovku. Viz první fragment kódu.

Ve druhém můžeme zjistit, jak nazýváme náš první fragment. Fragment Splash je ten, který bude použit pro naše intro.

Krok 3: Rozložení obrazovky aplikace a úvodní obrazovky

Rozložení obrazovky aplikace a intro
Rozložení obrazovky aplikace a intro
Rozložení obrazovky aplikace a intro
Rozložení obrazovky aplikace a intro
Rozložení obrazovky aplikace a intro
Rozložení obrazovky aplikace a intro
  • Abychom mohli opravit polohu obrazovky a ignorovat jakékoli otáčení telefonu, musíme do AndroidManifest.xml přidat následující kód Picture 1.
  • Aby bylo možné odstranit panel akcí ze všech obrazovek, musíme přidat následující kód Picture 2 do styles.xml
  • Abychom mohli přesunout celou obrazovku na všechny obrazovky, musíme nastavit některé příznaky jako na obrázku 3 na 2 různé metody. Oncreate () a onWindowFocusChanged.

Krok 4: Definování loga a koule Syles

Definování loga a koule Syles
Definování loga a koule Syles
Definování loga a koule Syles
Definování loga a koule Syles
  • definovali jsme před naším textem jako šedou, to se provádí v souboru styles.xml. Viz obrázek 1.
  • definovali jsme také, že míč by měl být v zelených tónech. Za tímto účelem vytvoříme ball.xml pod nakreslenou složkou. Zkontrolujte obrázek 2

Krok 5: Popis animace

Vysvětlím zde logiku a posloupnost animace. Myslím, že nemá smysl přidávat sem fragmenty kódu, lépe si kód projděte sami.

Myšlenka animace je následující:

  • Po vytvoření fragmentu se vytvoří a spustí textové logo
  • Jakmile je animace loga textu dokončena, vyvolá se první parabolický tah tenisového míčku
  • Jakmile je první parabolický pohyb dokončen, zazní zvuk a telefon zavibruje … a vyvolá se další parabolický pohyb
  • Jakmile je dokončen poslední parabolický pohyb a je proveden zvuk/vibrace, dosáhneme bodu, který zavolá naše druhá obrazovka.

Poznámka: Nevytvářel jsem abstraktní třídu pro animace, protože jsem chtěl zachovat plochý kód … snazší sledovat alespoň pro mě:)

Druhý díl série zveřejním v následujících dnech, sledujte mě, pokud se vám tento díl líbí, a pokud ne, budu rád za vaši zpětnou vazbu.

Doporučuje: