Spisu treści:

Część aplikacji na Androida 1: Ekran powitalny wykorzystujący fragmenty/Kotlin: 5 kroków
Część aplikacji na Androida 1: Ekran powitalny wykorzystujący fragmenty/Kotlin: 5 kroków

Wideo: Część aplikacji na Androida 1: Ekran powitalny wykorzystujący fragmenty/Kotlin: 5 kroków

Wideo: Część aplikacji na Androida 1: Ekran powitalny wykorzystujący fragmenty/Kotlin: 5 kroków
Wideo: Tworzenia Aplikacji na Androida z JETPACK COMPOSE | Ostatnie Szlify cz.1 | ▶strefakursow.pl◀#android 2024, Lipiec
Anonim
Image
Image
Menedżer fragmentów i 3 ekrany
Menedżer fragmentów i 3 ekrany

Witam ponownie, najprawdopodobniej masz trochę „wolnego” czasu w domu z powodu COVID19 i możesz wrócić, aby sprawdzić tematy, których chciałeś się uczyć w przeszłości.

Tworzenie aplikacji na Androida jest dla mnie zdecydowanie jednym z nich i kilka tygodni temu zdecydowałem się spróbować jeszcze raz.

Programowanie w Kotlinie zdecydowanie zmniejsza wysiłek związany z kodowaniem i pomaga osiągnąć rezultaty w dość krótkim czasie. To jest naprawdę świetne!

W tej serii samouczków wyjaśnię, jak opracować narzędzie do śledzenia wyników tenisa. Ta aplikacja może być używana, gdy bawisz się z przyjaciółmi i/lub rodziną (możesz dać tablet dziecku i zapewnić mu zajęcie:)). Ta aplikacja jest oparta na następującym przykładzie licznika Kotlin.

Samouczek składa się z następujących części:

Część 1: Ekran powitalny za pomocą fragmentów (jesteśmy tutaj)

Część 2: Konfiguracja dopasowania - Właściwości

Część 3: Śledzenie wyników meczu

Główną ideą jest podzielenie aplikacji na 3 różne ekrany, z których każdy wywoła następny, po zakończeniu lub gdy użytkownik naciśnie odpowiedni przycisk.

W tej pierwszej części wyjaśnię, jak stworzyć ekran wprowadzający -> sprawdź wideo powyżej.

Kieszonkowe dzieci

Funkcje Androida użyte w tej części:

  • Paprochy
  • Animacja
  • Wibracja
  • Odtwarzacz multimedialny
  • Słuchacze

Wymagane narzędzia:

  • Studio Android
  • Kotlin 1.3.61
  • Poziom API 28

Wymagane zasoby

Plik dźwiękowy sygnału dźwiękowego

Krok 1: Projektowanie doświadczeń użytkownika

Wyjaśnijmy funkcje naszego ekranu wprowadzającego.

  1. chcemy mieć pełny ekran w kolorze białym
  2. chcemy, aby ekran był zawsze w trybie poziomym
  3. chcemy, aby nasze logo-tekst w kolorze szarym
  4. chcemy, aby kolor naszej piłki był w odcieniach zieleni
  5. chcemy, aby nasz tekst-logo wyblakł
  6. chcemy, aby piłka tenisowa poruszała się po ekranie (odbijając piłkę)
  7. chcemy odtwarzać dźwięk za każdym razem, gdy piłka dotknie powierzchni
  8. chcemy wywołać wibracje telefonu, gdy odtwarzany jest dźwięk
  9. chcemy, aby czas trwania wstępu był krótszy niż 4 sekundy.

Krok 2: Menedżer fragmentów i 3 ekrany

Menedżer fragmentów i 3 ekrany
Menedżer fragmentów i 3 ekrany

Przypomnijmy główną ideę naszej aplikacji, chcemy mieć 3 ekrany (Intro, Properties i Match Score). W tym celu użyjemy Fragmentów. Potrzebujemy więc 3 z nich, po jednym na każdy ekran. Zapoznaj się z pierwszym fragmentem kodu.

W drugim możemy znaleźć, jak nazywamy nasz pierwszy fragment. Fragment Splash jest tym, który zostanie użyty w naszym Intro.

Krok 3: Układ aplikacji i ekranu początkowego

Układ aplikacji i ekranu wprowadzającego
Układ aplikacji i ekranu wprowadzającego
Układ aplikacji i ekranu wprowadzającego
Układ aplikacji i ekranu wprowadzającego
Układ ekranu aplikacji i powitania
Układ ekranu aplikacji i powitania
  • Aby poprawić położenie ekranu i zignorować obrót telefonu, musimy dodać poniższy kod Picture 1 w AndroidManifest.xml.
  • Aby usunąć pasek akcji ze wszystkich ekranów, musimy dodać następujący kod Zdjęcie 2 w styles.xml
  • Aby wcisnąć pełny ekran na wszystkich ekranach, musimy ustawić kilka flag jak na Rysunku 3 na 2 różne sposoby. Oncreate() i onWindowFocusChanged.

Krok 4: Definiowanie logo i stylów kuli

Definiowanie logo i stylów kuli
Definiowanie logo i stylów kuli
Definiowanie logo i stylów kuli
Definiowanie logo i stylów kuli
  • zdefiniowaliśmy przed naszym tekstem jako szary, odbywa się to w pliku styles.xml. Patrz rys. 1.
  • zdefiniowaliśmy również, że piłka powinna być w zielonych odcieniach. W tym celu tworzymy ball.xml w folderze drawable. Sprawdź zdjęcie 2

Krok 5: Opis animacji

Wyjaśnię tutaj logikę i kolejność animacji. Myślę, że nie ma sensu dodawać tutaj fragmentów kodu, lepiej sam przejrzyj kod.

Idea animacji jest następująca:

  • Po utworzeniu fragmentu tworzone i uruchamiane jest logo tekstowe
  • Po zakończeniu animacji logo tekstowego wywoływany jest pierwszy paraboliczny ruch piłki tenisowej
  • Po zakończeniu pierwszego ruchu parabolicznego odtwarzany jest dźwięk, a telefon wibruje… i wywoływany jest kolejny ruch paraboliczny
  • Po zakończeniu ostatniego ruchu parabolicznego i wykonaniu dźwięku/wibracji dochodzimy do punktu wywołania naszego drugiego ekranu.

Uwaga: nie stworzyłem abstrakcyjnej klasy do animacji, ponieważ chciałem zachować płaski kod… łatwiejszy do naśladowania przynajmniej dla mnie:)

Drugą część serii opublikuję w ciągu najbliższych dni, śledźcie mnie, jeśli podoba wam się ta część, a jeśli nie, to chętnie zasięgnę Waszej opinii.

Zalecana: