Questa pagina è stata tradotta dall'API Cloud Translation.

Android Kotlin Fundamentals 02.2: Add user interactivity

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.

Cosa devi già sapere

Creazione di un'app Android di base in Kotlin.
Esecuzione di un'app per Android su un emulatore o su un dispositivo.
Creazione di un layout lineare utilizzando l'editor di layout di Android Studio .
Creazione di un'app semplice che utilizza LinearLayout, TextView, ScrollView e un pulsante con un gestore di clic.

Obiettivi didattici

Come ottenere l'input dell'utente utilizzando una visualizzazione EditText.
Come impostare il testo su una visualizzazione TextView utilizzando il testo della visualizzazione EditText.
Come lavorare con View e ViewGroup.
Come modificare la visibilità di un View.

In questo lab proverai a:

Aggiungi interattività all'app AboutMe, che proviene da un codelab precedente.
Aggiungi un EditText in modo che l'utente possa inserire del testo.
Aggiungi un Button e implementa il relativo gestore dei clic.

In questo codelab, estendi l'app AboutMe per aggiungere l'interazione dell'utente. Vengono aggiunti un campo per il nickname, un pulsante FINE e una visualizzazione di testo per mostrare il nickname. Una volta che l'utente inserisce un nickname e tocca il pulsante FINE, la visualizzazione del testo viene aggiornata per mostrare il nickname inserito. L'utente può aggiornare di nuovo il nickname toccando la visualizzazione del testo.

App AboutMe

In questa attività, aggiungi un campo di input EditText per consentire all'utente di inserire un nickname.

Passaggio 1: inizia

Se non hai già l'app AboutMe di un precedente codelab, scarica il codice iniziale AboutMeInteractive-Starter. Si tratta dello stesso codice che hai completato in un codelab precedente.
Apri il progetto AboutMeInteractive-Starter in Android Studio.
Esegui l'app. Vedrai una visualizzazione del testo del nome, un'immagine a forma di stella e un lungo segmento di testo in una visualizzazione a scorrimento.

Tieni presente che l'utente non può modificare il testo.

Le app sono più interessanti se l'utente può interagire con loro, ad esempio se può inserire testo. Per accettare l'input di testo, Android fornisce un widget dell'interfaccia utente chiamato edit text. Definisci un testo modificabile utilizzando EditText, una sottoclasse di TextView. Un campo di modifica del testo consente all'utente di inserire e modificare l'input di testo, come mostrato nello screenshot di seguito.

Passaggio 2: aggiungi un EditText

In Android Studio, apri il file di layout activity_main.xml nella scheda Design.
Nel riquadro Tavolozza, fai clic su Testo.

Ab TextView, che è un TextView, viene visualizzato nella parte superiore dell'elenco degli elementi di testo nel riquadro Tavolozza. Sotto Ab TextView sono presenti più visualizzazioni EditText.

Nel riquadro Palette, nota come l'icona per TextView mostri le lettere Ab senza sottolineatura. Le icone EditText, invece, mostrano Ab sottolineato. La sottolineatura indica che la visualizzazione è modificabile.

Per ciascuna delle visualizzazioni EditText, Android imposta attributi diversi e il sistema visualizza il metodo di input morbido appropriato (ad esempio una tastiera sullo schermo).
Trascina un testo modificabile PlainText nell'albero dei componenti e posizionalo sotto name_text e sopra star_image.
Utilizza il riquadro Attributi per impostare i seguenti attributi nella visualizzazione EditText.

Attributo	Valore
`id`	`nickname_edit`
`layout_width`	`match_parent` (predefinito)
`layout_height`	`wrap_content` (predefinito)

Esegui l'app. Sopra l'immagine della stella, vedi un testo modificabile con il testo predefinito "Nome".

In questa attività, dai uno stile alla visualizzazione EditText aggiungendo un suggerimento, modificando l'allineamento del testo, impostando lo stile su NameStyle e impostando il tipo di input.

Passaggio 1: aggiungi il testo del suggerimento

Aggiungi una nuova risorsa stringa per il suggerimento nel file string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

Utilizza il riquadro Attributi per impostare i seguenti attributi nella visualizzazione EditText:

Attributo	Valore
`style`	`NameStyle`
`textAlignment`	(centro)
`hint`	`@string/what_is_your_nickname`

Nel riquadro Attributi, rimuovi il valore Name dall'attributo text. Il valore dell'attributo text deve essere vuoto affinché venga visualizzato il suggerimento.

Passaggio 2: imposta l'attributo inputType

L'attributo inputType specifica il tipo di input che gli utenti possono inserire nella visualizzazione EditText. Il sistema Android mostra il campo di input e la tastiera sullo schermo appropriati, a seconda del tipo di input impostato.

Per visualizzare tutti i tipi di input possibili, nel riquadro Attributi, fai clic sul campo inputType o sui tre puntini … accanto al campo. Si apre un elenco che mostra tutti i tipi di input che puoi utilizzare, con il tipo di input attualmente attivo selezionato. Puoi selezionare più di un tipo di input.

Ad esempio, per le password, utilizza il valore textPassword. Il campo di testo nasconde l'input dell'utente.

Per i numeri di telefono, utilizza il valore phone. Viene visualizzato un tastierino numerico e l'utente può inserire solo numeri.

Imposta il tipo di input per il campo Nickname:

Imposta l'attributo inputType su textPersonName per il nickname_edit testo di modifica.
Nel riquadro Struttura dei componenti, nota un avviso autoFillHints. Questo avviso non si applica a questa app e non rientra nell'ambito di questo codelab, quindi puoi ignorarlo. Se vuoi saperne di più sulla compilazione automatica, consulta la sezione Ottimizzare l'app per la compilazione automatica.
Nel riquadro Attributi , verifica i valori dei seguenti attributi della visualizzazione EditText:

Attributo	Valore
`id`	`nickname_edit`
`layout_width`	`match_parent` (predefinito)
`layout_height`	`wrap_content` (predefinito)
`style`	`@style/NameStyle`
`inputType`	`textPersonName`
`hint`	`"@string/what_is_your_nickname"`
`text`	(vuoto)

Un Button è un elemento UI che l'utente può toccare per eseguire un'azione. Un pulsante può essere costituito da testo, un'icona o entrambi.

In questa attività, aggiungi un pulsante FINE, che l'utente tocca dopo aver inserito un nickname. Il pulsante scambia la visualizzazione EditText con una visualizzazione TextView che mostra il nickname. Per aggiornare il nickname, l'utente può toccare la visualizzazione TextView.

Passaggio 1: aggiungi un pulsante FATTO

Trascina un pulsante dal riquadro Palette nell'albero dei componenti. Posiziona il pulsante sotto il testo di modifica di nickname_edit.
Crea una nuova risorsa stringa denominata done. Assegna alla stringa il valore Done,

<string name="done">Done</string>

Utilizza il riquadro Attributi per impostare i seguenti attributi nella visualizzazione Button appena aggiunta:

Attributo	Valori
`id`	`done_button`
`text`	`@string/done`
`layout_gravity`	`center_horizontal`
`layout_width`	`wrap_content`

L'attributo layout_gravity centra la visualizzazione nel layout principale, LinearLayout.

Modifica lo stile in Widget.AppCompat.Button.Colored, uno degli stili predefiniti forniti da Android. Puoi selezionare lo stile dal menu a discesa o dalla finestra Risorse.

Questo stile cambia il colore del pulsante in quello del colore accento, colorAccent. Il colore secondario è definito nel file res/values/colors.xml.

Il file colors.xml contiene i colori predefiniti per la tua app. Puoi aggiungere nuove risorse di colore o modificare quelle esistenti nel progetto in base ai requisiti della tua app.

File colors.xml di esempio:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Passaggio 2: applica uno stile al pulsante FINE

Nel riquadro Attributi, aggiungi un margine superiore selezionando Layout_Margin > Top. Imposta il margine superiore su layout_margin, definito nel file dimens.xml.
Imposta l'attributo fontFamily su roboto dal menu a discesa.
Passa alla scheda Testo e verifica il codice XML generato per il pulsante appena aggiunto.

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Passaggio 3: modifica la risorsa colore

In questo passaggio, modifichi il colore intenso del pulsante in modo che corrisponda alla barra delle app dell'attività.

Apri res/values/colors.xml e modifica il valore di colorAccent in #76bf5e.

<color name="colorAccent">#76bf5e</color>

Puoi vedere il colore corrispondente al codice esadecimale nel margine sinistro dell'editor di file.

Nota la modifica del colore del pulsante nell'editor di progettazione.

Esegui l'app. Dovresti visualizzare un pulsante FINE con stile sotto il testo di modifica.

Dopo che l'utente ha inserito un nickname e ha toccato il pulsante FINE, il nickname viene visualizzato in una visualizzazione TextView. In questa attività, aggiungi una visualizzazione di testo con uno sfondo colorato. La visualizzazione del testo mostra il nickname dell'utente sopra star_image.

Passaggio 1: aggiungi un TextView per il nickname

Trascina una visualizzazione di testo dal riquadro Palette nell'albero dei componenti. Posiziona la visualizzazione del testo sotto done_button e sopra star_image.
Utilizza il riquadro Attributi per impostare i seguenti attributi per la nuova visualizzazione TextView:

Attributo	Valore
`id`	`nickname_text`
`style`	`NameStyle`
`textAlignment`	(centro)

Passaggio 2: modifica la visibilità di TextView

Puoi mostrare o nascondere le visualizzazioni nella tua app utilizzando l'attributo visibility. Questo attributo accetta uno dei tre valori seguenti:

visible: La visualizzazione è visibile.
Invisible: nasconde la visualizzazione, ma questa occupa comunque spazio nel layout.
gone: nasconde la visualizzazione e non occupa spazio nel layout.

Nel riquadro Attributi, imposta la visibility della visualizzazione di testo nickname_text su gone, perché non vuoi che l'app mostri inizialmente questa visualizzazione di testo.

Tieni presente che, man mano che modifichi l'attributo nel riquadro Attributi, la visualizzazione nickname_text scompare dall'editor di progettazione. La visualizzazione è nascosta nell'anteprima del layout.
Modifica il valore dell'attributo text della visualizzazione nickname_text in una stringa vuota.

Il codice XML generato per questo TextView dovrebbe essere simile a questo:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

L'anteprima del layout dovrebbe avere un aspetto simile al seguente:

Un gestore di clic sull'oggetto Button (o su qualsiasi visualizzazione) specifica l'azione da eseguire quando viene toccato il pulsante (visualizzazione). La funzione che gestisce l'evento di clic deve essere implementata nel Activity che ospita il layout con il pulsante (visualizzazione).

Il listener di clic ha genericamente questo formato, in cui la visualizzazione passata è quella che ha ricevuto il clic o il tocco.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Puoi collegare la funzione di ascolto dei clic agli eventi di clic sui pulsanti in due modi:

Nel layout XML, puoi aggiungere l'attributo android:onClick all'elemento <Button>. Ad esempio:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

OPPURE

Puoi farlo in modo programmatico in fase di runtime, in onCreate() di Activity, chiamando setOnClickListener. Ad esempio:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

In questa attività, aggiungi un listener di clic per done_button in modo programmatico. Aggiungi il listener di clic nell'attività corrispondente, ovvero MainActivity.kt.

La funzione di ascolto dei clic, chiamata addNickname, farà quanto segue:

Recupera il testo dalla modifica nickname_edit.
Imposta il testo nella visualizzazione di testo nickname_text.
Nascondi il testo di modifica e il pulsante.
Visualizza il nickname TextView.

Passaggio 1: aggiungi un listener di clic

In Android Studio, nella cartella java, apri il file MainActivity.kt.
In MainActivity.kt, all'interno della classe MainActivity, aggiungi una funzione chiamata addNickname. Includi un parametro di input chiamato view di tipo View. Il parametro view è il View su cui viene chiamata la funzione. In questo caso, view sarà un'istanza del pulsante FINE.

private fun addNickname(view: View) {
}

All'interno della funzione addNickname, utilizza findViewById() per ottenere un riferimento al testo di modifica nickname_edit e alla visualizzazione del testo nickname_text.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

Imposta il testo nella visualizzazione di testo nicknameTextView sul testo inserito dall'utente in editText, recuperandolo dalla proprietà text.

nicknameTextView.text = editText.text

Nascondi la visualizzazione del nickname EditText impostando la proprietà visibility di editText su View.GONE.

In un'attività precedente, hai modificato la proprietà visibility utilizzando l'editor layout. Qui fai la stessa cosa a livello di programmazione.

editText.visibility = View.GONE

Nascondi il pulsante FINE impostando la proprietà visibility su View.GONE. Hai già il riferimento del pulsante come parametro di input della funzione, view.

view.visibility = View.GONE

Alla fine della funzione addNickname, rendi visibile la visualizzazione TextView impostando la proprietà visibility su View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Passaggio 2: collega il listener di clic al pulsante FINE

Ora che hai una funzione che definisce l'azione da eseguire quando viene toccato il pulsante FINE, devi collegare la funzione alla visualizzazione Button.

In MainActivity.kt, alla fine della funzione onCreate(), ottieni un riferimento alla visualizzazione FINE Button. Utilizza la funzione findViewById() e chiama setOnClickListener. Passa un riferimento alla funzione click-listener, addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

Nel codice precedente, it si riferisce a done_button, ovvero la visualizzazione passata come argomento.

Esegui l'app, inserisci un nickname e tocca il pulsante FINE. Nota come il testo di modifica e il pulsante vengono sostituiti dalla visualizzazione del testo del nickname.

Tieni presente che la tastiera è ancora visibile anche dopo che l'utente ha toccato il pulsante FINE. Questo comportamento è quello predefinito.

Passaggio 3: nascondi la tastiera

In questo passaggio, aggiungi il codice per nascondere la tastiera dopo che l'utente tocca il pulsante FINE.

In MainActivity.kt, alla fine della funzione addNickname(), aggiungi il seguente codice. Per saperne di più sul funzionamento di questo codice, consulta la documentazione hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

Esegui di nuovo l'app. Tieni presente che dopo aver toccato FINE,la tastiera viene nascosta.

L'utente non può modificare il nickname dopo aver toccato il pulsante FINE. Nella prossima attività, renderai l'app più interattiva e aggiungerai una funzionalità che consenta all'utente di aggiornare il nickname.

In questa attività, aggiungi un listener di clic alla visualizzazione del testo del nickname. Il listener di clic nasconde la visualizzazione del testo del nickname, mostra il testo di modifica e il pulsante FINE.

Passaggio 1: aggiungi un listener di clic

In MainActivity, aggiungi una funzione di listener di clic chiamata updateNickname(view: View) per la visualizzazione del testo del nickname.

private fun updateNickname (view: View) {
}

All'interno della funzione updateNickname, ottieni un riferimento al testo di modifica nickname_edit e un riferimento al pulsante FINE . A tal fine, utilizza il metodo findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

Alla fine della funzione updateNickname, aggiungi il codice per mostrare il testo di modifica, il pulsante FINE e nascondere la visualizzazione del testo.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

In MainActivity.kt, alla fine della funzione onCreate(), chiama setOnClickListener nella visualizzazione di testo nickname_text. Passa un riferimento alla funzione del listener di clic, ovvero updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

Esegui l'app. Inserisci un nickname, tocca il pulsante FINE, quindi tocca la visualizzazione del nickname TextView. La visualizzazione del nickname scompare e diventano visibili il testo di modifica e il pulsante FINE.

Tieni presente che, per impostazione predefinita, la visualizzazione EditText non è attiva e la tastiera non è visibile. Per l'utente è difficile capire che la visualizzazione del testo del nickname è selezionabile. Nella prossima attività, aggiungi lo stato attivo e uno stile alla visualizzazione del testo del nickname.

Passaggio 2: imposta lo stato attivo sulla visualizzazione EditText e mostra la tastiera

Alla fine della funzione updateNickname, imposta lo stato attivo sulla visualizzazione EditText. Utilizza il metodo requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

Alla fine della funzione updateNickname, aggiungi il codice per rendere visibile la tastiera.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Passaggio 3: aggiungi un colore di sfondo alla visualizzazione TextView del nickname

Imposta il colore di sfondo della visualizzazione del testo nickname_text su @color/colorAccent e aggiungi un padding inferiore di @dimen/small_padding. Queste modifiche fungeranno da suggerimento per l'utente che la visualizzazione del testo del nickname è selezionabile.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

Esegui l'app finale. Il testo di modifica è attivo, il nickname viene visualizzato nel testo di modifica e la visualizzazione del testo del nickname è formattata.

Ora mostra la tua app interattiva AboutMe a un amico.

Progetto Android Studio: AboutMeInteractive

Lo strumento Layout Editor in Android Studio è un editor di progettazione visiva. Puoi utilizzare l'editor di layout per creare il layout della tua app trascinando gli elementi dell'interfaccia utente nel layout.
EditText è un elemento dell'interfaccia utente che consente all'utente di inserire e modificare il testo.
Un Button è un elemento UI che l'utente può toccare per eseguire un'azione. Un pulsante può essere costituito da testo, un'icona o entrambi.

Listener di clic

Puoi fare in modo che qualsiasi View risponda a un tocco aggiungendo un listener di clic.
La funzione che definisce il listener di clic riceve l'elemento View su cui viene fatto clic.

Puoi collegare una funzione di ascolto dei clic a un View in due modi:

Nel layout XML, aggiungi l'attributo android:onClick all'elemento <View>.
A livello di programmazione, utilizza la funzione setOnClickListener(View.OnClickListener) nel Activity corrispondente.

Corso Udacity:

Sviluppo di app per Android con Kotlin

Documentazione per sviluppatori Android:

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.

Rispondi a queste domande

Domanda 1

Di che cosa è sottoclasse EditText?

View
LinearLayout
TextView
Button

Domanda 2

Quale dei seguenti valori dell'attributo visibility, se impostato in una vista, fa sì che la vista sia nascosta e non occupi spazio nel layout?

visible
Invisible
gone
hide

Domanda 3

Per le visualizzazioni EditText, non è consigliabile fornire suggerimenti, perché questi ultimi ingombrano il campo di input. Vero o falso?

Vero
Falso

Domanda 4

Quale delle seguenti affermazioni è vera in merito alle visualizzazioni di Button?

Una visualizzazione Button è un gruppo di visualizzazioni.
Puoi avere solo tre visualizzazioni Button per schermata.
Le visualizzazioni Button sono cliccabili e, quando si fa clic, il listener di clic collegato esegue un'azione.
Button è un'estensione di ImageView.

Inizia la lezione successiva: 2.3: Layout vincolato utilizzando l'editor del layout

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

Android Kotlin Fundamentals 02.2: Add user interactivity Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Cosa devi già sapere

Obiettivi didattici

In questo lab proverai a:

Passaggio 1: inizia

Passaggio 2: aggiungi un EditText

Passaggio 1: aggiungi il testo del suggerimento

Passaggio 2: imposta l'attributo inputType

Passaggio 1: aggiungi un pulsante FATTO

Passaggio 2: applica uno stile al pulsante FINE

Passaggio 3: modifica la risorsa colore

Passaggio 1: aggiungi un TextView per il nickname

Passaggio 2: modifica la visibilità di TextView

Passaggio 1: aggiungi un listener di clic

Passaggio 2: collega il listener di clic al pulsante FINE

Passaggio 3: nascondi la tastiera

Passaggio 1: aggiungi un listener di clic

Passaggio 2: imposta lo stato attivo sulla visualizzazione EditText e mostra la tastiera

Passaggio 3: aggiungi un colore di sfondo alla visualizzazione TextView del nickname

Rispondi a queste domande

Domanda 1

Domanda 2

Domanda 3

Domanda 4

Android Kotlin Fundamentals 02.2: Add user interactivity