Android Kotlin Fundamentals 01.2: Basic app anatomy

Questo codelab fa parte del corso Android Kotlin Fundamentals. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Android Kotlin Fundamentals.

Introduzione

Finora hai configurato tutto e Android Studio ha creato molto codice per te. Prima di modificare tutto il codice, è importante sapere cosa hai appena creato e come navigare nei file sorgente di un'app per Android.

In questo codelab, scoprirai di più sui componenti principali di un'app per Android e aggiungerai una semplice interattività a un'app con un pulsante.

Cosa devi già sapere

• Come installare e aprire Android Studio.
• Come creare un nuovo progetto di app.
• Come eseguire un'app su un emulatore o un dispositivo fisico.

Cosa imparerai a fare

• Come modificare il file di layout dell'app.
• Come creare un'app con un comportamento interattivo.
• Molta terminologia nuova. Consulta il glossario del vocabolario per spiegazioni semplici di termini e concetti.

Cosa farai

• Esplora il file Kotlin MainActivity e il file di layout dell'attività.
• Modifica il layout dell'attività in XML.
• Aggiungi un elemento Button al layout dell'attività.
• Estrai le stringhe codificate in un file di risorse stringa.
• Implementa i metodi di gestione dei clic per visualizzare i messaggi sullo schermo quando l'utente tocca un Button.

In questo codelab, crei un nuovo progetto di app chiamato DiceRoller e aggiungi un'interattività di base con un pulsante. Ogni volta che si fa clic sul pulsante, il valore del testo visualizzato cambia. L'app DiceRoller finale per questo codelab ha il seguente aspetto:

Nell'ultimo codelab, hai scoperto le parti principali di un progetto di app, tra cui le directory java e res. In questa attività, ti concentrerai sui due file più importanti che compongono la tua app: il file Kotlin MainActivity e il file di layout activity_main.xml.

Passaggio 1: esamina MainActivity

MainActivity è un esempio di Activity. Un Activity è una classe Android di base che disegna l'interfaccia utente (UI) di un'app Android e riceve eventi di input. Quando l'app viene avviata, viene avviata l'attività specificata nel file AndroidManifest.xml.

Molti linguaggi di programmazione definiscono un metodo principale che avvia il programma. Le app per Android non hanno un metodo principale. Il file AndroidManifest.xml indica invece che MainActivity deve essere avviato quando l'utente tocca l'icona di avvio dell'app. Per avviare un'attività, il sistema operativo Android utilizza le informazioni nel manifest per configurare l'ambiente per l'app e creare l'MainActivity. Poi, il MainActivity esegue a sua volta alcune operazioni di configurazione.

Ogni attività ha un file di layout associato. L'attività e il layout sono collegati da un processo noto come espansione del layout. Quando l'attività inizia, le visualizzazioni definite nei file di layout XML vengono trasformate (o "gonfiate") in oggetti di visualizzazione Kotlin in memoria. A questo punto, l'attività può disegnare questi oggetti sullo schermo e modificarli in modo dinamico.

1. In Android Studio, seleziona File > New > New Project per creare un nuovo progetto. Utilizza l'attività Vuota e fai clic su Avanti.
2. Chiama il progetto DiceRoller e verifica tutti gli altri valori per la posizione del progetto. Assicurati che l'opzione "Usa artefatti AndroidX" sia selezionata. Fai clic su Fine.
   
   
   
3. Nel riquadro Project > Android, espandi java > com.example.android.diceroller. Fai doppio clic su MainActivity. L'editor di codice mostra il codice in MainActivity.
   
   
   
4. Sotto il nome del pacchetto e le istruzioni di importazione si trova la dichiarazione di classe per MainActivity. La classe MainActivity estende AppCompatActivity.

class MainActivity : AppCompatActivity() { ...

AppCompatActivity è una sottoclasse di Activity che supporta tutte le funzionalità moderne di Android, garantendo al contempo la compatibilità con le versioni precedenti di Android. Per rendere la tua app disponibile al maggior numero possibile di dispositivi e utenti, utilizza sempre AppCompatActivity.

5. Nota il metodo onCreate(). Le attività non utilizzano un costruttore per inizializzare l'oggetto. Viene invece chiamata una serie di metodi predefiniti (chiamati "metodi del ciclo di vita") nell'ambito della configurazione dell'attività. Uno di questi metodi del ciclo di vita è onCreate(), che esegui sempre l'override nella tua app. Scoprirai di più sui metodi del ciclo di vita in un codelab successivo.
   
   In onCreate(), specifichi il layout associato all'attività e lo aumenti. Il metodo setContentView() esegue entrambe le operazioni.
   

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

Il metodo setContentView() fa riferimento al layout utilizzando R.layout.activity_main, che è in realtà un riferimento intero. La classe R viene generata quando crei l'app. La classe R include tutti gli asset dell'app, inclusi i contenuti della directory res.

In questo caso, R.layout.activity_main si riferisce alla classe R generata, alla cartella layout e al file di layout activity_main.xml. Le risorse non includono le estensioni dei file. Farai riferimento a molte delle risorse dell'app (incluse immagini, stringhe ed elementi all'interno del file di layout) utilizzando riferimenti simili nella classe R.

Passaggio 2: esamina ed esplora il file di layout dell'app

Tutte le attività nella tua app hanno un file di layout associato nella directory res/layout dell'app. Un file di layout è un file XML che esprime l'aspetto effettivo di un'attività. Un file di layout lo fa definendo le visualizzazioni e dove vengono visualizzate sullo schermo.

Le visualizzazioni sono elementi come testo, immagini e pulsanti che estendono la classe View. Esistono molti tipi di visualizzazioni, tra cui TextView, Button, ImageView e CheckBox.

In questa attività, esaminerai e modificherai il file di layout dell'app.

1. Nel riquadro Progetto > Android, espandi res > layout e fai doppio clic su activity_main.xml. Si apre l'editor di progettazione del layout. Android Studio include questo editor, che ti consente di creare il layout dell'app in modo visivo e di visualizzarne l'anteprima. Scopri di più sull'editor di progettazione in un codelab successivo.
2. Per visualizzare il file di layout come XML, fai clic sulla scheda Testo nella parte inferiore della finestra.
   
   
   
3. Elimina tutto il codice XML esistente nell'editor di layout. Il layout predefinito che ottieni con un nuovo progetto è un buon punto di partenza se lavori con l'editor di progettazione di Android Studio. In questa lezione lavorerai con il codice XML sottostante per creare un nuovo layout da zero.
4. Copia e incolla questo codice nel layout:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Ora esamina il codice:

1. L'elemento principale o di primo livello del layout è un elemento <LinearLayout>. La visualizzazione LinearLayout è un ViewGroup. Le visualizzazioni sono contenitori che contengono altre visualizzazioni e aiutano a specificare le posizioni delle visualizzazioni sullo schermo.
   
   Tutte le visualizzazioni e i gruppi di visualizzazioni che aggiungi al layout sono organizzati in una gerarchia di visualizzazioni, con l'elemento XML più in alto come radice della gerarchia. La visualizzazione principale può contenere altre visualizzazioni e gruppi di visualizzazioni, mentre i gruppi di visualizzazioni contenuti possono contenere altre visualizzazioni e gruppi di visualizzazioni. Quando la tua app esegue la gerarchia di visualizzazione nel file di layout XML, questa diventa una gerarchia di oggetti quando il layout viene espanso. In questo caso, il gruppo di visualizzazione principale è un layout lineare, che organizza le visualizzazioni secondarie in modo lineare, una dopo l'altra (in verticale o in orizzontale).
   
   La radice predefinita che ottieni per un nuovo progetto Android è un ConstraintLayout, che funziona bene in coordinamento con l'editor di progettazione. Per questa app, utilizzi un gruppo di visualizzazione LinearLayout, che è più semplice del layout vincolato. Nella prossima lezione imparerai molto di più sui gruppi di visualizzazione e sul layout vincolato.
2. All'interno del tag LinearLayout, nota l'attributo android:layout_width. La larghezza di questo LinearLayout è impostata su match parent, il che la rende uguale a quella del contenitore principale. Poiché si tratta della visualizzazione principale, il layout si espande all'intera larghezza dello schermo.
3. Nota l'attributo android:layout_height, impostato su wrap_content. Questo attributo fa sì che l'altezza di LinearLayout corrisponda all'altezza combinata di tutte le viste che contiene, che per ora è solo TextView.
4. Esamina l'elemento <TextView>. Questo TextView, che mostra il testo, è l'unico elemento visivo nell'app DiceRoller. L'attributo android:text contiene la stringa effettiva da visualizzare, in questo caso la stringa "Hello World!"
5. Nota gli attributi android:layout_width e android:layout_height nell'elemento <TextView>, entrambi impostati su wrap_content. Il contenuto della visualizzazione di testo è il testo stesso, quindi la visualizzazione occuperà solo lo spazio necessario per il testo.

L'app per tirare i dadi non è molto utile se l'utente non può tirare i dadi e vedere il risultato. Per iniziare, aggiungi un pulsante al layout per lanciare i dadi e aggiungi un testo che mostri il valore dei dadi tirati dall'utente.

Passaggio 1: aggiungi un pulsante al layout

1. Aggiungi un elemento Button al layout sotto la visualizzazione del testo inserendo <Button e poi premi Invio. Viene visualizzato un blocco Button che termina con /> e include gli attributi layout_width e layout_height.

<Button
   android:layout_width=""
   android:layout_height="" />

2. Imposta gli attributi layout_width e layout_height su "wrap_content". Con questi valori, il pulsante ha la stessa larghezza e altezza dell'etichetta di testo che contiene.
3. Aggiungi un attributo android:text al pulsante e assegnagli il valore "Roll". L'elemento Pulsante ora ha il seguente aspetto:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />

Per le visualizzazioni Button, l'attributo text è l'etichetta del pulsante. Nell'editor di layout, l'attributo è evidenziato in giallo, il che indica un suggerimento o un avviso. In questo caso, l'evidenziazione gialla è dovuta al fatto che la stringa "Roll" è hardcoded nell'etichetta del pulsante, ma la stringa dovrebbe essere una risorsa. Scopri di più sulle risorse stringa nella sezione successiva.

Passaggio 2: estrai le risorse stringa

Anziché codificare le stringhe nei file di layout o di codice, è consigliabile inserire tutte le stringhe dell'app in un file separato. Questo file si chiama strings.xml e si trova tra le risorse dell'app, nella directory res/values/.

Avere le stringhe in un file separato ne semplifica la gestione, soprattutto se le utilizzi più di una volta. Inoltre, le risorse di tipo stringa sono obbligatorie per tradurre e localizzare l'app, perché devi creare un file di risorse di tipo stringa per ogni lingua.

Android Studio ti aiuta a ricordare di inserire le stringhe in un file di risorse con suggerimenti e avvisi.

1. Fai clic una volta sulla stringa "Roll" nell'attributo android:text del tag <Button>.
2. Premi Alt+Enter (Option+Enter su macOS) e seleziona Estrai risorsa stringa dal menu popup.
3. Inserisci roll_label in Nome risorsa.
4. Fai clic su OK. Nel file res/values/string.xml viene creata una risorsa stringa e la stringa nell'elemento Pulsante viene sostituita con un riferimento a questa risorsa:
   android:text="@string/roll_label"
5. Nel riquadro Project > Android, espandi res > values, quindi fai doppio clic su strings.xml per visualizzare le risorse di tipo stringa nel file strings.xml:

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Suggerimento: oltre alla stringa appena aggiunta, il file strings.xml include anche il nome dell'app. Se avvii il progetto dell'app utilizzando il modello vuoto, il nome dell'app viene visualizzato nella barra delle app nella parte superiore dello schermo. Puoi modificare il nome dell'app modificando la risorsa app_name.

Passaggio 3: applica uno stile e posiziona le visualizzazioni

Il layout ora contiene una visualizzazione TextView e una Button. In questa attività, disponi le visualizzazioni all'interno del gruppo di visualizzazioni in modo che risultino più attraenti.

1. Fai clic sulla scheda Design per visualizzare un'anteprima del layout. Al momento, entrambe le visualizzazioni sono una accanto all'altra e spostate nella parte superiore dello schermo.
   
   
   
2. Fai clic sulla scheda Testo per tornare all'editor XML. Aggiungi l'attributo android:orientation al tag LinearLayout e assegnagli il valore "vertical". L'elemento <LinearLayout> ora dovrebbe avere il seguente aspetto:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

Il gruppo di visualizzazioni LinearLayout posiziona le visualizzazioni che contiene una dopo l'altra in una riga, orizzontalmente o verticalmente. Orizzontale è l'impostazione predefinita. Poiché vuoi che TextView sia impilato sopra Button, imposta l'orientamento verticale. Il design ora è simile a questo, con il pulsante sotto il testo:

3. Aggiungi l'attributo android:layout_gravity sia a TextView sia a Button e assegnagli il valore "center_horizontal". In questo modo, entrambe le visualizzazioni vengono allineate al centro dell'asse orizzontale. Ora gli elementi TextView e Button dovrebbero avere il seguente aspetto:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

4. Aggiungi l'attributo android:layout_gravity al layout lineare e assegnagli il valore "center_vertical". L'elemento LinearLayout ora dovrebbe avere il seguente aspetto:

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">

Nota: se aggiungi la gravità center_vertical sia alla visualizzazione del pulsante che a quella del testo (anziché center_horizontal), le visualizzazioni sono centrate sia orizzontalmente che verticalmente al centro del layout. ovvero le visualizzazioni sono una sopra l'altra.

Per centrare tutti gli elementi secondari contemporaneamente, utilizza center_vertical nell'elemento principale (l'elemento LinearLayout), come mostrato sopra.

5. Per aumentare le dimensioni del testo nella visualizzazione di testo, aggiungi l'attributo android:textSize all'elemento <TextView> con il valore "30sp". L'abbreviazione sp sta per pixel scalabili, una misura per dimensionare il testo indipendentemente dalla qualità del display del dispositivo. L'elemento TextView ora dovrebbe avere il seguente aspetto:

<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />

6. Compila ed esegui l'app.
   
   
   

Ora sia il testo che il pulsante sono posizionati correttamente e il testo nella visualizzazione del testo è più grande. Il pulsante non ha ancora alcuna funzionalità, quindi non succede nulla quando lo tocchi. Lavorerai su questo passaggio successivo.

Passaggio 4: ottieni un riferimento al pulsante nel codice

Il codice Kotlin in MainActivity è responsabile della definizione delle parti interattive della tua app, ad esempio cosa succede quando tocchi un pulsante. Per scrivere una funzione che viene eseguita quando viene fatto clic sul pulsante, devi ottenere un riferimento all'oggetto Button nel layout sottoposto a inflating in MainActivity. Per ottenere un riferimento al pulsante:

• Assegna un ID al Button nel file XML.
• Utilizza il metodo findViewById() nel codice per ottenere un riferimento a View con un ID specifico.

Una volta ottenuto un riferimento alla visualizzazione Button, puoi chiamare i metodi su questa visualizzazione per modificarla dinamicamente durante l'esecuzione dell'app. Ad esempio, puoi aggiungere un gestore di clic che esegue il codice quando viene toccato il pulsante.

1. Apri il file di layout activity_main.xml, se non è già aperto, e fai clic sulla scheda Testo.
2. Aggiungi l'attributo android:id al pulsante e assegnagli un nome (in questo caso, "@+id/roll_button"). L'elemento <Button> ora ha questo aspetto:

<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Quando crei un ID per una visualizzazione nel file di layout XML, Android Studio crea una costante intera con il nome dell'ID nella classe R generata. Quindi, se assegni a una visualizzazione il nome roll_button, Android Studio genera e crea una costante intera denominata roll_button nella classe R. Il prefisso "@+id" per il nome dell'ID indica al compilatore di aggiungere la costante ID alla classe R. Tutti gli ID vista nel file XML devono avere questo prefisso.

3. Apri il file Kotlin MainActivity. All'interno di onCreate(), dopo setContentView(), aggiungi questa riga:

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

Utilizza il metodo findViewById() per ottenere un riferimento View per la visualizzazione definita nella classe XML. In questo caso, ottieni il riferimento Button dalla classe R e l'ID roll_button e assegni questo riferimento alla variabile rollButton.

Nota:se digiti la riga anziché copiarla e incollarla, noterai che Android Studio fornisce un suggerimento di completamento automatico per il nome dell'ID non appena inizi a digitare.

4. Nota che Android Studio evidenzia la classe Button in rosso e la sottolinea per indicare che si tratta di un riferimento non risolto e che devi importare questa classe prima di poterla utilizzare. Potrebbe essere visualizzata anche una descrizione comando che indica il nome della classe completo:
   
   
   
5. Premi Alt+Enter (Option+Enter su Mac) per accettare il nome della classe completo.

Suggerimento: puoi configurare Android Studio in modo che aggiunga automaticamente le istruzioni di importazione per le classi se il significato è univoco. Il pannello delle impostazioni per Editor > Generale > Importazione automatica specifica come vengono gestite le importazioni.

Passaggio 5: aggiungi un gestore di clic per visualizzare un messaggio di notifica

Un gestore di clic è un metodo richiamato ogni volta che l'utente fa clic o tocca un elemento dell'interfaccia utente cliccabile, ad esempio un pulsante. Per creare un gestore dei clic, devi:

• Un metodo che esegue un'operazione.
• Il metodo setOnClickHandler(), che collega Button al metodo del gestore.

In questa attività, creerai un metodo di gestione dei clic per visualizzare un Toast. Un toast è un messaggio che viene visualizzato sullo schermo per un breve periodo di tempo. Collega il metodo di gestione dei clic a Button.

1. Nella classe MainActivity dopo onCreate(), crea una funzione privata chiamata rollDice().

private fun rollDice() {
  
}

2. Aggiungi questa riga al metodo rollDice() per visualizzare un Toast quando viene chiamato rollDice():

Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Per creare un avviso popup, chiama il metodo Toast.makeText(). Questo metodo richiede tre elementi:

• Un oggetto Context. L'oggetto Context consente di comunicare e ottenere informazioni sullo stato attuale del sistema operativo Android. Qui è necessario un Context in modo che l'oggetto Toast possa indicare al sistema operativo di visualizzare la notifica toast. Poiché AppCompatActivity è una sottoclasse di Context, puoi utilizzare la parola chiave this per il contesto.
• Il messaggio da mostrare, qui "button clicked".
• la durata di visualizzazione del messaggio. Il metodo show() alla fine visualizza il messaggio di notifica.

3. In onCreate(), dopo la chiamata a findViewById(), aggiungi questa riga per assegnare rollDice() come gestore dei clic all'oggetto rollButton:

rollButton.setOnClickListener { rollDice() }

La definizione completa della classe MainActivity ora ha questo aspetto:

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

4. Compila ed esegui l'app. Ogni volta che tocchi il pulsante, dovrebbe apparire un messaggio di notifica.

In questa attività, modificherai il metodo rollDice() per cambiare il testo in TextView. Per il primo passaggio, modifica il testo da "Hello World!" alla stringa "Dice Rolled!". Per il secondo passaggio, visualizzi un numero casuale compreso tra 1 e 6.

Passaggio 1: visualizza una stringa

1. Apri activity_main.xml e aggiungi un ID a TextView.

android:id="@+id/result_text"

2. Apri MainActivity. Nel metodo rollDice(), commenta la riga per visualizzare Toast.
3. Utilizza il metodo findViewById() per ottenere un riferimento a TextView in base al suo ID. Assegna il riferimento a una variabile resultText.

val resultText: TextView = findViewById(R.id.result_text)

4. Assegna una nuova stringa alla proprietà resultText.text per modificare il testo visualizzato. Puoi ignorare il suggerimento di estrarre questa stringa in una risorsa, in quanto si tratta solo di una stringa temporanea.

resultText.text = "Dice Rolled!"

5. Compila ed esegui l'app. Tieni presente che se tocchi il pulsante Tira ora viene aggiornato TextView.

Passaggio 2: visualizza un numero casuale

Infine, in questa attività aggiungi casualità al clic sul pulsante per simulare il lancio dei dadi. Ogni volta che si fa clic o si tocca il pulsante, il codice sceglie un numero casuale da 1 a 6 e aggiorna TextView. L'attività di generazione di un numero casuale non è specifica di Android e utilizzi la classe Random per farlo.

1. Nella parte superiore del metodo rollDice(), utilizza il metodo Random.nextInt() per ottenere un numero casuale compreso tra 1 e 6:

val randomInt = Random().nextInt(6) + 1

2. Imposta la proprietà text sul valore dell'intero casuale, come stringa:

resultText.text = randomInt.toString()

3. Compila ed esegui l'app. Ogni volta che tocchi il pulsante Tira, il numero nella visualizzazione del testo cambia.

Progetto Android Studio: DiceRoller

Nota:tutte le sfide di programmazione sono facoltative.

Sfida: aggiungi un secondo pulsante all'app con l'etichetta "Conteggio" che viene visualizzato appena sotto il pulsante Tira. Quando viene toccato, il pulsante Conteggio deve ottenere il valore corrente della visualizzazione del testo del risultato, aggiungere 1 e aggiornare la visualizzazione del testo. Assicurati di gestire questi casi limite:

• Se la visualizzazione del testo del risultato non contiene ancora un numero (ovvero se la visualizzazione del testo contiene ancora la stringa predefinita "Hello World"), imposta il testo del risultato su 1.
• Se il numero è già 6, non fare nulla.

Suggerimento: la stringa nelle visualizzazioni TextView è un'istanza della classe CharSequence. Per testarne il valore, devi convertirlo in una stringa:

resultText.text.toString()

Codice della soluzione della sfida di programmazione

Progetto Android Studio: DiceRoller-challenge

Attività

• MainActivity è una sottoclasse di AppCompatActivity, che a sua volta è una sottoclasse di Activity. Un Activity è una classe Android di base responsabile del disegno dell'interfaccia utente di un'app Android e della ricezione degli eventi di input.
• Tutte le attività hanno un file di layout associato, che è un file XML nelle risorse dell'app. Il file di layout prende il nome dell'attività, ad esempio activity_main.xml.
• Il metodo setContentView() in MainActivity associa il layout all'attività e lo gonfia quando viene creata l'attività.
• L'inflazione del layout è un processo in cui le visualizzazioni definite nei file di layout XML vengono trasformate (o "gonfiate") in oggetti di visualizzazione Kotlin in memoria. Una volta eseguita l'espansione del layout, Activity può disegnare questi oggetti sullo schermo e modificarli in modo dinamico.

Viste

• Tutti gli elementi dell'interfaccia utente nel layout dell'app sono sottoclassi della classe View e sono chiamati visualizzazioni. TextView e Button sono esempi di visualizzazioni.
• Gli elementi View possono essere raggruppati all'interno di un ViewGroup. Un gruppo di visualizzazioni funge da contenitore per le visualizzazioni o per altri gruppi di visualizzazioni al suo interno. LinearLayout è un esempio di gruppo di visualizzazioni che le dispone in modo lineare.

Visualizza attributi

• Gli attributi android:layout_width e android:layout_height indicano il peso e l'altezza di una visualizzazione. Il valore match_parent estende la visualizzazione alla larghezza o all'altezza del contenitore principale. Il valore wrap_content riduce la visualizzazione per adattarla ai contenuti.
• L'attributo android:text indica il testo che una visualizzazione deve mostrare (se la visualizzazione mostra testo). Per i pulsanti, android:text è l'etichetta del pulsante.
• L'attributo android:orientation in un gruppo di visualizzazioni LinearLayout organizza gli elementi di visualizzazione che contiene. Un valore di horizontal dispone le visualizzazioni da sinistra a destra. Un valore di vertical dispone le visualizzazioni dall'alto verso il basso.
• L'attributo android:layout_gravity determina il posizionamento di una visualizzazione e di tutti i relativi elementi secondari.
• L'attributo android:textSize definisce le dimensioni del testo in una visualizzazione di testo. Le dimensioni del testo sono specificate in unità sp (pixel scalabili). Utilizzando le unità sp, puoi dimensionare il testo indipendentemente dalla qualità del display del dispositivo.

Strings

• Anziché codificare le stringhe nel layout, è consigliabile utilizzare le risorse stringa.
• Le risorse stringa sono contenute nel file values/res/string.xml.
• Per estrarre le stringhe, utilizza Alt+Enter (Option+Enter su un Mac). Seleziona Estrai risorse stringa dal menu popup.

Utilizzare le visualizzazioni

• Per connettere il codice Kotlin a una visualizzazione definita nel layout, devi ottenere un riferimento all'oggetto visualizzazione dopo che la visualizzazione è stata visualizzata. Assegna un ID (android:id) alla visualizzazione nel layout, quindi utilizza il metodo findViewById() per ottenere l'oggetto visualizzazione associato.
• Quando crei un ID per una visualizzazione nel file di layout XML, Android Studio crea una costante intera con il nome dell'ID nella classe R generata. Puoi quindi utilizzare questo riferimento R.id nel metodo findViewById().
• Puoi impostare gli attributi di un oggetto vista nel codice Kotlin direttamente in base al nome della proprietà. Ad esempio, il testo in una visualizzazione di testo è definito dall'attributo android:text nel codice XML ed è definito dalla proprietà text in Kotlin.
• Un gestore dei clic è un metodo richiamato quando l'utente fa clic o tocca un elemento dell'interfaccia utente. Per collegare un metodo di gestione dei clic a una visualizzazione, ad esempio un pulsante, utilizza il metodo setOnClickListener().

Utilizzo dei toast

Un toast è una visualizzazione che mostra all'utente un semplice messaggio in una piccola finestra popup.

Per creare un toast, chiama il metodo di fabbrica makeText() nella classe Toast con tre argomenti:

• Il contesto dell'app Activity
• Il messaggio da visualizzare, ad esempio una risorsa stringa
• Una durata, ad esempio Toast.LENGTH_SHORT

Per visualizzare l'avviso popup, chiama show().

Corso Udacity:

• Sviluppo di app per Android con Kotlin

Documentazione per sviluppatori Android:

• Scopri Android Studio
• Layout
• View
• Button
• TextView
• Panoramica delle risorse dell'app
• Panoramica degli eventi di input
• findViewById()
• setOnClickListener()
• Context

Altro:

• Glossario di parole e concetti del vocabolario

Questa sezione elenca i possibili compiti a casa per gli studenti che seguono questo codelab nell'ambito di un corso guidato da un insegnante. Spetta all'insegnante:

• Assegna i compiti, se richiesto.
• Comunica agli studenti come inviare i compiti.
• Valuta i compiti a casa.

Gli insegnanti possono utilizzare questi suggerimenti nella misura che ritengono opportuna e sono liberi di assegnare qualsiasi altro compito a casa che ritengono appropriato.

Se stai seguendo questo codelab in autonomia, sentiti libero di utilizzare questi compiti per casa per mettere alla prova le tue conoscenze.

Cambiare un'app

Apri l'app DiceRoller. Aggiungi all'app un pulsante denominato "Reset" che viene visualizzato appena sotto il pulsante Tira. Fai in modo che il pulsante reimposti la visualizzazione del testo del risultato su 0.

Rispondi a queste domande

Domanda 1

Quale metodo di un Activity gonfia il layout dell'app e rende disponibili le relative visualizzazioni come oggetti?

• onCreate()
• setClickListener()
• setContentView()
• show()

Domanda 2

Quale attributo della visualizzazione utilizzi per impostare la larghezza di una visualizzazione in modo che si adatti ai contenuti?

• android:view_width="wrap"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_width="match_parent"

Inviare l'app per la classificazione

Verifica che l'app disponga di quanto segue:

• Il layout dell'app deve includere una visualizzazione del testo e due pulsanti.
• Il codice dell'app deve impostare due gestori di clic, uno per ogni pulsante.
• Il gestore dei clic che reimposta la visualizzazione del testo deve impostare la proprietà del testo su 0.

Inizia la lezione successiva: 1.3 Risorse di immagine e compatibilità

Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab di Android Kotlin Fundamentals.