Crea un'app interattiva con lancio del dado

In questo codelab, creerai un'app Android Dice Roller in cui gli utenti possono fare clic su una Button nell'app per lanciare un dado. Il risultato del rullo verrà mostrato sullo schermo in un TextView.

Utilizzerai l'Editor di layout in Android Studio per creare il layout dell'app, quindi scriverai il codice Kotlin per indicare cosa succede quando viene fatto clic su Button.

Prerequisiti

• Come creare ed eseguire un'app "Hello World" in Android Studio.
• Familiarità con l'utilizzo di TextViews e ImageViews in un'app.
• Come modificare gli attributi di un TextView nell'editor di layout.
• Come estrarre il testo in una risorsa stringa per semplificare la traduzione della tua app e il riutilizzo delle stringhe.
• Nozioni di base sulla programmazione Kotlin insegnate nei precedenti codelab.

Obiettivi didattici

• Come aggiungere Button a un'app Android.
• Come aggiungere un comportamento quando un Button viene toccato nell'app.
• Come aprire e modificare il codice Activity di un'app.
• Come visualizzare un messaggio Toast.
• Come aggiornare i contenuti di un TextView mentre l'app è in esecuzione.

Cosa devi creare

• Un'app Android Dice Roller con un Button per lanciare un dado e aggiornare il testo sullo schermo con il risultato del tiro.

Cosa serve

• Un computer su cui è installato Android Studio.

Ecco come sarà l'app dopo aver completato questo codelab.

Creare un progetto Attività vuota

1. Se hai già un progetto aperto in Android Studio, vai a File > New > New Project... per aprire la schermata Crea nuovo progetto.
2. In Create New Project (Crea nuovo progetto), crea un nuovo progetto Kotlin utilizzando il modello Empty Activity (Attività vuota).
3. Chiama l'app "Dice Roller", con un livello API minimo di 19 (KitKat).

Importante: se non hai familiarità con la creazione di un nuovo progetto in Android Studio, consulta l'articolo Creare ed eseguire la tua prima app per Android per i dettagli.

4. Esegui la nuova app e dovrebbe essere simile a questa.
   

Aprire l'Editor layout

1. Nella finestra Progetto, fai doppio clic su activity_main.xml (app > res > layout > activity_main.xml) per aprirla. Dovresti vedere l'Editor layout, con solo il simbolo "Hello World" TextView al centro dell'app.
   

Successivamente, aggiungerai Button alla tua app. Button è un elemento dell'interfaccia utente (UI) di Android che l'utente può toccare per eseguire un'azione.

In questa attività aggiungi una Button sotto "Hello World" TextView. TextView e Button si trovano all'interno di un ConstraintLayout, che è un tipo di ViewGroup.

Quando Views in un ViewGroup, Views sono considerati minori del genitore ViewGroup. Nel caso della tua app, TextView e Button sarebbero considerati figli dell'elemento principale, ConstraintLayout.

Procedi con l'aggiunta di un elemento Button come elemento secondario di ConstraintLayout esistente nella tua app.

Nota: come in un albero di famiglia, in una gerarchia di visualizzazione, le viste principali possono essere a loro volta secondarie e le viste secondarie possono essere figli ad altri figli.

Aggiungi un pulsante al layout

1. Trascina una Button dalla Tavolozza nella visualizzazione Design, posizionandola sotto "Hello World". TextView.
   
2. Sotto la Tavolozza nella struttura dei componenti, verifica che Button e TextView siano elencati sotto ConstraintLayout (come elementi secondari di ConstraintLayout).
3. Noterai un errore che indica che Button non è vincolato. Poiché Button si trova all'interno di un ConstraintLayout, devi impostare vincoli verticali e orizzontali per posizionarlo.

Posiziona il pulsante

In questo passaggio devi aggiungere un vincolo verticale dalla parte superiore di Button alla fine di TextView. L'elemento Button verrà posizionato al di sotto di TextView.

1. Nella vista Design, sul bordo superiore del Button, tieni premuto il cerchio bianco con un bordo blu. Trascina il puntatore, seguito da una freccia. Rilascia quando raggiungi il bordo inferiore di"Hello World"TextView. Viene così stabilito un vincolo di layout e Button diventa immediatamente inferiore al valore di TextView.
   
2. Controlla gli attributi sul lato destro dell'Editor di layout.
3. Nel widget Vincolo, è presente un nuovo vincolo di layout impostato nella parte inferiore di TextView, Top → BottomOf textView (0dp). (0dp) indica un margine di 0. Hai anche un errore quando mancano dei vincoli orizzontali.
   
4. Aggiungi un vincolo orizzontale dal lato sinistro di Button al lato sinistro di ConstraintLayout principale.
5. Ripeti la procedura sul lato destro, collegando il bordo destro di Button al bordo destro di ConstraintLayout. Il risultato dovrebbe essere simile al seguente:

6. Con l'elemento Button ancora selezionato, il widget Vincolo dovrebbe avere il seguente aspetto. Sono stati aggiunti due vincoli aggiuntivi: Start → StartOf parent (0dp) e End → EndOf parent (0dp). Ciò significa che Button è centrato orizzontalmente nell'elemento principale, ConstraintLayout.
   

7. Esegui l'app. Dovrebbe essere simile allo screenshot di seguito. Puoi fare clic sulla Button, ma non fa ancora nulla. Andiamo avanti!

Modificare il testo del pulsante

Stai per apportare un paio di modifiche all'interfaccia utente nell'editor di layout.

Anziché fare in modo che l'etichetta Button venga visualizzata come "Pulsante", cambiala in qualcosa che indichi cosa farà il pulsante: "Roll".

1. Nell'Editor di layout, con Button selezionato, vai ad Attributi, modifica il testo in Roll e premi il tasto Enter (Return su Mac).

2. Nella struttura dei componenti, accanto al Button viene visualizzato un triangolo di avviso arancione. Se passi il mouse sopra il triangolo, viene visualizzato un messaggio. Android Studio ha rilevato una stringa hardcoded ("Roll") nel codice dell'app e suggerisce di utilizzare una risorsa stringa.

A causa di una stringa hardcoded, l'app diventa più difficile da tradurre in altre lingue ed è più difficile riutilizzare le stringhe in diverse parti dell'app. Per fortuna, Android Studio offre una correzione automatica.

3. Nella struttura dei componenti, fai clic sul triangolo arancione.

Viene visualizzato il messaggio di avviso completo.

4. Nella parte inferiore del messaggio, in Correzione suggerita, fai clic sul pulsante Correggi. Potrebbe essere necessario scorrere verso il basso.
5. Si apre la finestra di dialogo Estrai risorse. Per estrarre una stringa significa prendere il testo "Roll" e creare una risorsa stringa denominata roll in strings.xml (app > res > values > string.xml). I valori predefiniti sono corretti, quindi fai clic su OK.

6. Tieni presente che in Attributi, l'attributo text per Button ora dice @string/roll, riferito alla risorsa appena creata.
   

Nella visualizzazione Design, Button dovrebbe comunque contenere il testo Roll.

Definizione dello stile TextView

Il testo "Hello World!" è piuttosto piccolo e il messaggio non è pertinente per la tua app. In questo passaggio dovrai sostituire il piccolo messaggio "Hello, World!" con un numero per mostrare il valore implementato e ingrandire il carattere, in modo che sia più facile da vedere.

1. Nell'Editor di progettazione, seleziona TextView in modo che gli attributi vengano visualizzati nella finestra Attributi.
2. Modifica il valore textSize di TextView in 36sp, in modo che sia grande e facile da leggere. Potresti dover scorrere per trovare textSize.

3. Cancella l'attributo text di TextView. Non devi mostrare nulla nel TextView finché l'utente non tira i dadi.

Tuttavia, è molto utile vedere il testo in TextView quando modifichi il layout e il codice della tua app. A questo scopo, puoi aggiungere al testo TextView visibile soltanto per l'anteprima del layout, ma non quando l'app è in esecuzione.

.

4. Seleziona la TextView nell'albero dei componenti.
5. In Attributi comuni, trova l'attributo text e un altro attributo text con l'icona dello strumento. L'attributo text mostra ciò che viene mostrato all'utente quando l'app è in esecuzione. L'attributo text con un'icona dello strumento è l'attributo "tools text" riservato a te come sviluppatore.
6. Imposta il testo degli strumenti su"1"in TextView (per simulare un tiro di dadi di 1). Il pulsante "1" viene visualizzato soltanto nell'Editor di progettazione di Android Studio, ma non quando esegui l'app su un dispositivo o un emulatore effettivo.

Tieni presente che questo testo viene visualizzato solo dagli sviluppatori di app, pertanto non è necessario crearne una stringa.

7. Controlla l'app nell'anteprima. Viene visualizzato il messaggio "1".

8. Esegui la tua app. Ecco come appare quando viene eseguita su un emulatore. "1" non viene visualizzato. Questo è il comportamento corretto.

Ottimo, hai finito di modificare il layout!

Hai un'app con un pulsante, ma se tocchi il pulsante, non succede nulla. Per modificarlo, devi scrivere del codice Kotlin che lancia i dadi e aggiorna lo schermo quando il pulsante viene toccato.

Per apportare questa modifica devi capire meglio come è strutturata un'app Android.

Un elemento Activity fornisce la finestra in cui l'app disegna la propria interfaccia utente. In genere, un Activity occupa l'intero schermo della tua app in esecuzione. Ogni app ha una o più attività. Spesso, la prima attività di primo livello viene chiamata MainActivity e viene fornita dal modello di progetto. Ad esempio, quando l'utente scorre l'elenco delle app sul proprio dispositivo e tocca l'icona"Dice Roller", il sistema Android avvia MainActivityl'app.

Nel codice MainActivity, devi fornire i dettagli sul layout di Activity e su come l'utente deve interagire con quest'ultimo.

• Nell'app Scheda di compleanno, c'è un Activity che mostra il messaggio e l'immagine di compleanno.
• Nell'app Dice Roller, c'è un Activity che mostra il layout TextView e Button che hai appena creato.

Per le app più complicate, potrebbero esserci più schermate e più di un Activity. Ogni Activity ha uno scopo specifico.

Ad esempio, in un'app di galleria foto, potresti avere una Activity per visualizzare una griglia di foto, una seconda Activity per visualizzare una singola foto e una terza Activity per modificare una singola foto.

Apri il file MainActivity.kt

Aggiungerai codice per rispondere a un tocco del pulsante in MainActivity. Per farlo correttamente, devi avere ulteriori informazioni sul codice MainActivity già presente nell'app.

1. Individua e apri il file MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt). Di seguito sono riportate le informazioni visualizzate. Se vedi import..., fai clic sulla ... per espandere le importazioni.

package com.example.diceroller

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
}

Non è necessario conoscere tutte le parole del codice riportate sopra, ma devi farti un'idea generale delle caratteristiche. Più lavori con il codice Android, più il sistema lo conosce e più lo capirai.

2. Guarda il codice Kotlin per la classe MainActivity, identificata dalla parola chiave class e poi dal nome.

class MainActivity : AppCompatActivity() {
    ...
}

3. Tieni presente che non esiste una funzione main() in MainActivity.
   
   In precedenza hai appreso che ogni programma Kotlin deve avere una funzione main(). Le app Android funzionano in modo diverso. Anziché chiamare una funzione main(), il sistema Android chiama il metodo onCreate() della tua MainActivity quando l'app viene aperta per la prima volta.
   
4. Individua il metodo onCreate(), simile al codice riportato di seguito.

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

Scoprirai di più su override in un codelab successivo, quindi non preoccuparti per ora. Il resto del metodo onCreate() configura MainActivity utilizzando il codice delle importazioni e impostando il layout iniziale con setContentView().

5. Osserva le righe che iniziano con import.
   

Android fornisce un framework di diverse classi per semplificare la scrittura delle app Android, ma deve sapere esattamente a quale classe ti riferisci. Puoi specificare la classe nel framework da utilizzare nel codice utilizzando un'istruzione import. Ad esempio, la classe Button è definita in android.widget.Button.

Abilita importazioni automatiche

Quando usi altri corsi, può essere molto utile ricordare di aggiungere le istruzioni import. Per fortuna, Android Studio ti aiuta a scegliere le importazioni corrette quando usi i corsi forniti da altri. In questo passaggio configurerai Android Studio in modo che aggiunga automaticamente le importazioni quando possibile e rimuova automaticamente le importazioni inutilizzate dal codice.

1. In Android Studio, apri le impostazioni selezionando File > Altre impostazioni > Preferenze per i nuovi progetti.
2. Espandi Altre impostazioni > importazione automatica. Nelle sezioni Java e Kotlin, assicurati che le opzioni Aggiungi importazioni non ambigue all'istante e Ottimizza le importazioni al momento (per il progetto corrente) siano selezionate. Tieni presente che in ogni sezione sono presenti due caselle di controllo.
   
   Le impostazioni di importazioni ambigue indicano ad Android Studio di aggiungere automaticamente un'istruzione di importazione, purché sia in grado di determinare quale utilizzare. Le impostazioni Ottimizza le importazioni indicano ad Android Studio di rimuovere tutte le importazioni che non sono utilizzate dal codice.
   
3. Salva le modifiche e chiudi le impostazioni premendo OK.

Ora che hai qualche informazione in più su MainActivity, puoi modificare l'app in modo che venga fatto clic su Button sullo schermo.

Mostra un messaggio quando l'utente fa clic sul pulsante

In questo passaggio, specifica che quando viene fatto clic sul pulsante, viene visualizzato un breve messaggio in fondo allo schermo.

1. Aggiungi il seguente codice al metodo onCreate() dopo la chiamata setContentView(). Il metodo findViewById() trova il Button nel layout. R.id.button è l'ID risorsa di Button, che è un identificatore univoco. Il codice salva un riferimento nell'oggetto Button in una variabile denominata rollButton, non nell'oggetto Button.

val rollButton: Button = findViewById(R.id.button)

Nota: Android assegna automaticamente numeri di identificazione alle risorse nella tua app. Ad esempio, il pulsante Roll ha un ID risorsa e la stringa per il testo del pulsante ha anche un ID risorsa. Gli ID risorsa sono nel formato R.<type>.<name>, ad esempio R.string.roll. Per gli ID View, <type> è id, ad esempio R.id.button.

Il codice salva il riferimento all'oggetto Button in una variabile denominata rollButton, non all'oggetto Button stesso.

Importante: quando assegna un oggetto a una variabile, Kotlin non copia l'intero oggetto ogni volta, salva un riferimento nell'oggetto. Puoi considerare un riferimento come un numero di previdenza sociale o un altro numero di identificazione nazionale: il numero si riferisce a una persona, ma non è la persona stessa. Quando copi il numero, non devi copiare la persona.

Il metodo onCreate() dovrebbe avere il seguente aspetto.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
}

2. Verifica che Android Studio abbia aggiunto automaticamente un'istruzione import per Button.
   Nota che ora ci sono 3 istruzioni di importazione: la terza è stata aggiunta automaticamente.
   

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

Nota: se l'attivazione delle importazioni automatiche non ha funzionato, l'elemento Button sarà evidenziato in rosso. Puoi aggiungere manualmente l'importazione corretta posizionando il cursore di testo all'interno della parola Button e premendo Alt+Enter (Option+Enter su un Mac).

Dopodiché devi associare il codice a Button, in modo che possa essere eseguito quando viene toccato l'elemento Button. Un ascoltatore dei clic è un codice che indica cosa fare quando viene eseguito un tocco o un clic. Puoi pensare a questo codice come a un semplice elemento di "saluto" per l'utente, in questo caso al Button.

3. Utilizza l'oggetto rollButton e imposta un listener di clic per quest'ultimo chiamando il metodo setOnClickListener().

rollButton.setOnClickListener {
}

Mentre digiti, Android Studio potrebbe mostrare più suggerimenti. In questo caso, scegli l'opzione setOnClickListener {...}.

All'interno delle parentesi graffe, metti le istruzioni su cosa succede quando tocchi il pulsante. Per ora, nell'app verrà visualizzata una Toast, ovvero un breve messaggio che viene mostrato all'utente.

4. Crea un Toast con il testo "Dice Rolled!" chiamando Toast.makeText().

val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)

5. quindi comunica al dispositivo Toast di mostrarsi chiamando il metodo show().

toast.show()

Questo è l'aspetto della classe MainActivity aggiornata; le istruzioni package e import si trovano ancora nella parte superiore del file:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val toast = Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT)
           toast.show()
       }
   }
}

Puoi combinare le due righe nel listener dei clic in un'unica riga senza variabile. Si tratta di un modello comune che potresti trovare in un altro codice.

Toast.makeText(this, "Dice Rolled!", Toast.LENGTH_SHORT).show()

6. Esegui l'app e fai clic sul pulsante Rotola. Nella parte inferiore dello schermo dovrebbe essere visualizzato un messaggio toast e scomparire dopo un breve periodo di tempo.

Complimenti! Il pulsante ha visualizzato il messaggio. È la prima volta che scrivi un codice Kotlin per Android!

Aggiornare TextView quando viene fatto clic sul pulsante

Anziché mostrare un messaggio Toast temporaneo, dovrai scrivere il codice per aggiornare TextView sullo schermo quando viene fatto clic sul pulsante Rotola.

1. Torna a activity_main.xml (app > res > layout >activity_main.xml)
2. Fai clic sulla TextView.
3. Tieni presente che l'id è textView.
   
4. Apri MainActivity.kt (app > java > com.example.diceroller > MainActivity.kt)
5. Elimina le righe di codice che creano e mostrano il Toast.

rollButton.setOnClickListener {
  
}

6. Al loro posto, crea una nuova variabile chiamata resultTextView per archiviare il valore TextView.
7. Utilizza findViewById() per trovare textView nel layout tramite il suo ID e memorizzane un riferimento.

val resultTextView: TextView = findViewById(R.id.textView)

8. Imposta il testo su resultTextView come "6" tra virgolette.
   

resultTextView.text = "6"

La procedura è simile a quella che hai impostato impostando il testo in Attributi, ma ora è presente nel codice, quindi il testo deve essere racchiuso tra virgolette. Se imposti questa opzione in modo esplicito, per il momento in TextView viene sempre visualizzato 6. Aggiungerai il codice per lanciare i dadi e mostrare valori diversi nell'attività successiva.

Ecco un esempio di corso di MainActivity:

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       val rollButton: Button = findViewById(R.id.button)
       rollButton.setOnClickListener {
           val resultTextView: TextView = findViewById(R.id.textView)
           resultTextView.text = "6"
       }
   }
}

9. Esegui l'app. Fai clic sul pulsante. Dovrebbe aggiornare TextView a "6".

L'unica cosa che manca è che stai lanciando il dado. Puoi riutilizzare la classe Dice dal codelab precedente, che gestisce la logica per lanciare un dado.

Aggiungi la classe Dadi

1. Dopo l'ultima parentesi graffa presente nella classe MainActivity, crea la classe Dice con un metodo roll().

class Dice(val numSides: Int) {

   fun roll(): Int {
       return (1..numSides).random()
   }
}

2. Nota che Android Studio sottolinea numSides con una linea grigia ondulata. La visualizzazione dell'elemento potrebbe richiedere qualche istante.
3. Passa il mouse sopra numSides e viene visualizzato un popup che indica Property 'numSides' potrebbe essere privato.
   

Se contrassegni numSides come private, sarà accessibile solo all'interno della classe Dice. Poiché l'unico codice che utilizzerà numSides è all'interno della classe Dice, è corretto impostare questo argomento private per la classe Dice. Nella prossima unità scoprirai di più sulle variabili private e public.

4. Per apportare la correzione suggerita da Android Studio, fai clic su Rendi 'numSides' 'private'.

Crea un metodo rollDice()

Ora che hai aggiunto una classe Dice alla tua app, devi aggiornare MainActivity per utilizzarla. Per organizzare meglio il tuo codice, inserisci la logica necessaria per lanciare un dado in una sola funzione.

1. Sostituisci il codice nel listener di clic che imposta il testo su "6" con una chiamata al numero rollDice().

rollButton.setOnClickListener {
   rollDice()
}

2. Poiché rollDice() non è ancora definito, Android Studio segnala un errore e mostra rollDice() in rosso.
3. Se passi il mouse sopra rollDice(), Android Studio mostra il problema e alcune possibili soluzioni.

4. Fai clic su Altre azioni... per visualizzare un menu. Android Studio si offre di fare di più per te.

Suggerimento: se hai difficoltà a passare il mouse sopra il puntatore, quindi fai clic su Altre azioni..., puoi fare clic su rollDice() e premere Alt+Enter (Option+Enter su un Mac) per visualizzare il menu.

5. Seleziona Crea funzione 'rollDice'. Android Studio crea una definizione vuota per la funzione all'interno di MainActivity.

private fun rollDice() {
    TODO("Not yet implemented")
}

Crea una nuova istanza di oggetti Dice

In questo passaggio creerai il metodo rollDice() per creare e lanciare un dado, quindi visualizzerai il risultato in TextView.

1. All'interno di rollDice(), elimina la chiamata TODO().
2. Aggiungi il codice per creare un dado con sei lati.

val dice = Dice(6)

3. Lancia i dadi chiamando il metodo roll() e salva il risultato in una variabile chiamata diceRoll.

val diceRoll = dice.roll()

4. Trova TextView chiamando il numero findViewById().

val resultTextView: TextView = findViewById(R.id.textView)

La variabile diceRoll è un numero, ma TextView utilizza il testo. Puoi utilizzare il metodo toString() su diceRoll per convertirlo in una stringa.

5. Converti diceRoll in una stringa e utilizzalo per aggiornare il testo di resultTextView.

resultTextView.text = diceRoll.toString()

Ecco come si presenta il metodo rollDice():

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val resultTextView: TextView = findViewById(R.id.textView)
    resultTextView.text = diceRoll.toString()
}

6. Esegui la tua app. Il risultato a dadi dovrebbe cambiare in altri valori oltre a 6! Poiché è un numero casuale compreso tra 1 e 6, a volte può essere visualizzato anche il valore 6.

Evviva!

È normale che il codice risulti un po' caotico dopo aver modificato alcune parti per far funzionare l'app. Prima di allontanarti dal codice, tuttavia, devi eseguire alcune semplici operazioni di pulizia. Quindi, l'app sarà di buona qualità e sarà più facile da mantenere in futuro.

Queste abitudini riguardano gli sviluppatori professionisti di Android quando scrivono il codice.

Guida di stile per Android

Man mano che lavori in team, è preferibile che i membri del team scrivano codice in modo simile, per cui vi è una certa coerenza nel codice. Per questo motivo, Android ha una Guida di stile su come scrivere codice Android, scegliendo tra convenzioni di denominazione, formattazione e altre buone prassi da seguire. Segui queste linee guida quando scrivi il codice per Android: Kotlin Style Guide for Android Developers.

Di seguito sono riportati un paio di modi per rispettare la guida di stile.

Pulire il codice

Condensa il codice

Per rendere il codice più conciso puoi condensarlo in un numero più breve di righe. Ad esempio, ecco il codice che imposta il listener di clic su Button.

rollButton.setOnClickListener {
    rollDice()
}

Poiché le istruzioni per l'ascoltatore dei clic sono composte da una sola riga, puoi condensare la chiamata del metodo rollDice() e le parentesi graffe devono essere tutte su un'unica riga. Ecco come si presenta. Una riga invece di tre.

rollButton.setOnClickListener { rollDice() }

Riformattare il codice

Ora riformatgherai il codice per assicurarti che rispetti le convenzioni di formattazione del codice consigliate per Android.

1. Nel corso MainActivity.kt, seleziona tutto il testo del file con la scorciatoia da tastiera Control+A su Windows (o Command+A su Mac). In alternativa, vai al menu in Modifica > Seleziona tutto in Android Studio.
2. Con tutto il testo selezionato nel file, vai al menu di Android Studio Code > Reformat Code (Utilizza formato) o utilizza la scorciatoia da tastiera Ctrl+Alt+L (o Command+Option+L su Mac).

In questo modo viene aggiornata la formattazione del codice, che include spazio vuoto, rientro e altro ancora. Potresti non notare alcun cambiamento e questo va bene. Allora il tuo codice era già formattato correttamente!

Commentare il codice

Aggiungi alcuni commenti al codice per descrivere ciò che accade nel codice che hai scritto. Poiché il codice diventa più complicato, è importante anche notare il motivo per cui hai scritto il codice come hai funzionato. Se torni al codice in un secondo momento per apportare modifiche, ciò che fa il codice potrebbe essere ancora chiaro, ma potresti non ricordare il motivo per cui l'hai scritto così.

È frequente aggiungere un commento per ogni corso (MainActivity e Dice sono gli unici corsi disponibili nell'app) e per ogni metodo che scrivi. Utilizza i simboli /** e **/ all'inizio e alla fine del tuo commento per indicare al sistema che non si tratta di un codice. Queste righe verranno ignorate quando il sistema esegue il codice.

Esempio di commento su un corso:

/**
* This activity allows the user to roll a dice and view the result
* on the screen.
*/
class MainActivity : AppCompatActivity() {

Esempio di commento relativo a un metodo:

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {

All'interno di un metodo, puoi aggiungere i commenti che possono aiutare il lettore del tuo codice. Ricorda che puoi utilizzare il simbolo // all'inizio del commento. Tutto ciò che segue il simbolo // su una riga viene considerato un commento.

Esempio di due commenti in un metodo:

private fun rollDice() {
   // Create new Dice object with 6 sides and roll it
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Update the screen with the dice roll
   val resultTextView: TextView = findViewById(R.id.textView)
   resultTextView.text = diceRoll.toString()
}

1. Procedi per aggiungere commenti al codice.
2. Dopo tutte queste modifiche ai commenti e alla formattazione, è buona norma eseguire di nuovo l'app per assicurarsi che funzioni ancora come previsto.

Consulta il codice della soluzione per poter inserire un commento a riguardo.

Il codice della soluzione per questo codelab è incluso nel progetto e nel modulo mostrati di seguito.

URL del codice della soluzione: https://github.com/google-developer-training/android-basics-kotlin-create-dice-roller-with-button-app-solution

Per recuperare il codice per questo codelab da GitHub e aprirlo in Android Studio, procedi nel seguente modo:

1. Avvia Android Studio.
2. Nella finestra Ti diamo il benvenuto in Android Studio, fai clic su Controlla il progetto dal controllo della versione.
3. Scegli Git.

4. Nella finestra di dialogo Clona repository, incolla l'URL del codice fornito nella casella URL.
5. Fai clic sul pulsante Test, attendi e assicurati che sia presente il fumetto verde che indica la connessione riuscita.
6. (Facoltativo) Modifica la Directory in modo da utilizzare un valore diverso da quello predefinito suggerito.

7. Fai clic su Clona. Android Studio inizia a recuperare il codice.
8. Nella finestra popup Pagamento da controllo versione, fai clic su Sì.

9. Attendi che si apra Android Studio.
10. Seleziona il modulo corretto per il codice di avvio o la soluzione del codelab.

11. Fai clic sul pulsante Esegui per creare ed eseguire il tuo codice.

Guida: consulta la Guida e guida alla risoluzione dei problemi se il codice scaricato non viene caricato o eseguito correttamente.

• Aggiungi un elemento Button in un'app Android utilizzando l'editor di layout.
• Modifica la classe MainActivity.kt per aggiungere un comportamento interattivo all'app.
• Crea un messaggio Toast come soluzione temporanea per verificare di essere sulla strada giusta.
• Imposta un listener al clic per un Button utilizzando setOnClickListener() per aggiungere un comportamento quando un utente fa clic su Button.
• Quando l'app è in esecuzione, puoi aggiornare la schermata richiamando metodi su TextView, Button o altri elementi dell'interfaccia utente nel layout.
• Commenta il tuo codice per aiutare le altre persone che lo leggono a capire qual è stato il tuo approccio.
• Riformatta il codice e pulisci il codice.

• Classe Button
• Classe Toast
• Classe TextView
• Kotlin Style Guide per gli sviluppatori Android

Nota: le esercitazioni sono facoltative. Ti offrono l'opportunità di esercitarti in ciò che hai imparato in questo codelab.

Segui questi passaggi:

1. Aggiungi un altro dado all'app. Fai clic sul pulsante Rotola per ottenere 2 dadi. I risultati dovrebbero essere visualizzati in due diverse TextViews sullo schermo.

Controllare il lavoro:

L'app completata dovrebbe funzionare senza errori e mostrare due dadi nell'app.