App Android Parte 1: Schermata iniziale con Frammenti/Kotlin: 5 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Ciao di nuovo, molto probabilmente hai del tempo "libero" a casa a causa del COVID19 e puoi tornare a controllare gli argomenti che volevi imparare in passato.

Lo sviluppo di app Android è sicuramente uno di questi per me e ho deciso alcune settimane fa di fare un secondo tentativo.

La programmazione in Kotlin riduce decisamente lo sforzo di codifica e aiuta a ottenere risultati in tempi abbastanza brevi. È davvero fantastico!

In questa serie di tutorial, ti spiegherò come sviluppare un Tennis Score Tracker. Questa App può essere utilizzata quando giochi con amici e/o familiari (puoi dare il tablet a tuo figlio e tenerlo occupato:)). Questa app si basa sul seguente esempio di Kotlin Counter.

Il tutorial ha le seguenti parti:

Parte 1: Splash Screen usando Frammenti (siamo qui ora)

Parte 2: Configurazione partita - Proprietà

Parte 3: tracker del punteggio della partita

L'idea principale è quella di dividere l'app in 3 schermate diverse, ognuna delle quali chiamerà quella successiva, una volta completata o quando l'utente preme il rispettivo pulsante.

In questa prima parte, spiegherò come creare una schermata di introduzione -> controlla il video qui sopra.

Forniture

Funzionalità Android utilizzate in questa parte:

• frammenti
• Animazione
• Vibrazione
• Media Player
• ascoltatori

Strumenti richiesti:

• Android Studio
• Kotlin 1.3.61
• Livello API 28

Risorse richieste

Un segnale acustico di file

Passaggio 1: progettazione dell'esperienza utente

Spieghiamo le caratteristiche della nostra schermata Intro.

1. vogliamo avere uno schermo intero in colore bianco
2. vogliamo avere lo schermo sempre in modalità orizzontale
3. vogliamo il colore del nostro logo-testo in grigio
4. vogliamo il colore della nostra palla nei toni del verde
5. vogliamo che il nostro logo-testo svanisca
6. vogliamo una pallina da tennis che si muove sullo schermo (palla che rimbalza)
7. vogliamo riprodurre un suono ogni volta che la palla tocca una superficie
8. vogliamo attivare una vibrazione del telefono quando viene riprodotto un suono
9. vogliamo che la durata dell'intro sia inferiore a 4 secondi.

Passaggio 2: Gestione frammenti e 3 schermate

Ricordiamo l'idea principale della nostra App, vogliamo avere 3 schermate (Intro, Proprietà e Match Score). Per questo useremo Fragments. Quindi abbiamo bisogno di 3 di loro uno per ogni schermo. Fare riferimento al primo frammento di codice.

Nella seconda possiamo trovare come chiamiamo il nostro primo frammento. Il frammento Splash è quello da utilizzare per la nostra Intro.

Passaggio 3: layout dell'app e della schermata introduttiva

• Per correggere la posizione dello schermo e ignorare qualsiasi rotazione del telefono, è necessario aggiungere il seguente codice Picture 1 in AndroidManifest.xml.
• Per rimuovere la barra delle azioni da tutte le schermate, è necessario aggiungere il seguente codice Picture 2 in styles.xml
• Per spingere a schermo intero in tutte le schermate, dobbiamo impostare alcuni flag come in Figura 3 in 2 diversi metodi. Oncreate() e onWindowFocusChanged.

Passaggio 4: definizione del logo e della sfera Syles

• abbiamo definito prima il nostro testo come grigio, questo viene fatto nel file styles.xml. Fare riferimento alla foto 1.
• abbiamo anche definito che la palla dovrebbe essere nei toni del verde. Per questo, creiamo ball.xml sotto la cartella drawable. Controlla la foto 2

Passaggio 5: descrizione dell'animazione

Spiegherò qui la logica e la sequenza dell'animazione. Penso che non abbia senso aggiungere frammenti di codice qui, è meglio che tu esamini il codice da solo.

L'idea dell'animazione è la seguente:

• Dopo aver creato il frammento, viene creato e avviato il logo di testo
• Una volta completata l'animazione del logo del testo, viene invocata la prima mossa parabolica della pallina da tennis
• Una volta completato il primo movimento parabolico, viene riprodotto un suono e il telefono vibra.. e viene richiamato il movimento parabolico successivo
• Una volta completato l'ultimo movimento parabolico ed eseguito il suono/vibrazione, arriviamo al punto di richiamare il nostro secondo schermo.

Nota: non ho creato una classe astratta per le animazioni, perché volevo mantenere il codice piatto… più facile da seguire almeno per me:)

Pubblicherò la seconda parte della serie nei prossimi giorni, seguimi se ti piace questa parte e in caso contrario, sarei felice di ricevere il tuo feedback.