Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Questa pagina è stata tradotta dall'API Cloud Translation.

Android Kotlin Fundamentals 02.2: aggiungere interattività dell'utente

Questo codelab fa parte del corso Android Kotlin Fundamentals. Otterrai il massimo valore da questo corso se lavori in sequenza nei codelab. Tutti i codelab del corso sono elencati nella pagina di destinazione di Android Kotlin Fundamentals.

Informazioni importanti

Creazione di un'app Android di base in Kotlin.
Esecuzione di un'app 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 dei clic.

Obiettivi didattici

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

In questo lab proverai a:

Aggiungere interattività all'app Informazioni su di me, eseguita da un codelab precedente.
Aggiungi un elemento EditText per consentire all'utente di inserire testo.
Aggiungi un elemento Button e implementa il relativo gestore dei clic.

In questo codelab, puoi estendere l'app Informazioni su di me per aggiungere l'interazione dell'utente. Aggiungi un campo nickname, un pulsante FINE e una visualizzazione di testo per visualizzare il nickname. Dopo che l'utente ha inserito un nickname e toccato il pulsante FINE, la visualizzazione di testo viene aggiornata in modo da mostrare il nickname inserito. L'utente può aggiornare di nuovo il nickname toccando la visualizzazione di testo.

App Informazioni su di me

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

Passaggio 1: inizia

Se non hai ancora l'app aboutme in un codelab precedente, scarica quello iniziale, AboutMeInteractive-Starter. Si tratta dello stesso codice inserito in un codelab precedente.
Apri il progetto InfoMeInteractive-Starter in Android Studio.
Esegui l'app. Puoi vedere una visualizzazione di testo del nome, un'immagine a forma di stella e un lungo segmento di testo in una visualizzazione scorrevole.

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

Le app sono più interessanti se l'utente può interagire con l'app, ad esempio se può inserire testo. Per accettare il testo inserito, Android fornisce un widget dell'interfaccia utente (UI) chiamato modifica testo. Puoi definire un testo per la modifica utilizzando EditText, una sottoclasse di TextView. Un testo in modifica consente all'utente di inserire e modificare testo inserito, 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, che viene visualizzato in cima all'elenco degli elementi di testo nel riquadro Palette. Sotto Vista di testo ab sono presenti più visualizzazioni di EditText.

Nel riquadro Tavolozza, nota come l'icona di TextView mostra le lettere Ab senza sottolineatura. Tuttavia, le icone EditText mostrano il trattino basso Ab. La trascrizione indica che la vista è modificabile.

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

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

Esegui la tua app. Sopra l'immagine a forma di stella, viene visualizzato un testo di modifica con il testo predefinito "Nome".

In questa attività, puoi definire lo stile della vista EditText aggiungendo un suggerimento, cambiando l'allineamento del testo, lo stile con NameStyle e impostando il tipo di input.

Passaggio 1: aggiungi il testo hint

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 vista 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 per consentire la visualizzazione del suggerimento.

Passaggio 2: imposta l'attributo inputType

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

Per vedere tutti i possibili tipi di immissione, 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 immissione che puoi utilizzare e che il tipo di immissione attualmente attivo è selezionato. Puoi selezionare più di un tipo di input.

Ad esempio, per le password, usa 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 che consente all'utente di inserire soltanto numeri.

Imposta il tipo di immissione per il campo Nickname:

Imposta l'attributo inputType su textPersonName per il testo nickname_edit di modifica.
Nel riquadro Albero dei componenti, viene visualizzato 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 l'articolo su come ottimizzare l'app per la compilazione automatica.
Nel riquadro Attributi, verifica i valori relativi ai seguenti attributi della vista EditText:

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

Un elemento Button è un elemento dell'interfaccia utente che l'utente può toccare per eseguire un'azione. Un pulsante può essere composto da testo, un'icona o sia testo che un'icona.

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

Passaggio 1: aggiungi un pulsante FINE

Trascina un pulsante dal riquadro Tavolozza nella struttura dei componenti. Inserisci il pulsante sotto il testo di modifica 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 vista 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 suo layout principale, LinearLayout.

Cambia lo stile Widget.AppCompat.Button.Colored, che è 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 con quello del colore intenso, colorAccent. Il colore intenso è 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 tuo progetto in base ai requisiti della tua app.

File di esempio colors.xml:

<?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: definisci il pulsante FINE

Nel riquadro Attributi, aggiungi un margine superiore selezionando Layout_Margin > In alto. Imposta il margine superiore su layout_margin, che è 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, cambi il colore intenso del pulsante in modo che corrisponda a quello della barra delle app dell'attività.

Apri res/values/colors.xml e imposta il valore colorAccent su #76bf5e.

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

Puoi visualizzare il colore corrispondente al codice esadecimale, nel margine sinistro dell'editor del file.

Osserva la modifica nel colore del pulsante nell'Editor di progettazione.

Esegui la tua app. Sotto il testo di modifica dovresti vedere un pulsante FINE con stile.

Dopo che l'utente ha inserito un nickname e 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 di testo mostra il nickname dell'utente al di sopra di star_image.

Passaggio 1: aggiungi un TextView al nickname

Trascina una visualizzazione di testo dal riquadro Tavolozza nella struttura dei componenti. Posiziona la visualizzazione del testo sotto a done_button e sopra a star_image.
Utilizza il riquadro Attributi per impostare i seguenti attributi per la nuova vista TextView:

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

Passaggio 2: modifica la visibilità di TextView

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

visible: la visualizzazione è visibile.
Invisible: nasconde la visualizzazione, ma occupa ancora spazio nel layout.
gone: nasconde la visualizzazione, che non occupa spazio nel layout.

Nel riquadro Attributi, imposta visibility sulla visualizzazione di testo nickname_text su gone, poiché non vuoi che la tua app mostri inizialmente questa visualizzazione di testo.

Tieni presente che la modifica dell'attributo nel riquadro Attributi scompare dall'editor di progettazione. La visualizzazione è nascosta nell'anteprima del layout.
Modifica la stringa nickname_text del valore dell'attributo text nella vista.

Il codice XML generato per TextView dovrebbe essere simile al seguente:

<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 essere simile alla seguente:

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

L'ascoltatore dei clic ha genericamente questo formato, dove l'immagine visualizzata è la visualizzazione 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 elenco dei clic agli eventi di clic su 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 durante il 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, denominata addNickname, svolge le seguenti operazioni:

Recupera il testo dal testo in modifica di nickname_edit.
Imposta il testo nella visualizzazione di testo nickname_text.
Nascondi il testo di modifica e il pulsante.
Mostra 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 è l'elemento 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 trovare un riferimento al testo in modifica di nickname_edit e alla visualizzazione di 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 di layout. Qui puoi fare la stessa cosa in modo programmatico.

editText.visibility = View.GONE

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

view.visibility = View.GONE

Al termine della funzione addNickname, rendi visibile il nickname TextView impostando la relativa proprietà visibility su View.VISIBLE.

nicknameTextView.visibility = View.VISIBLE

Passaggio 2: collega il listener di clic al pulsante DONE

Ora che disponi di una funzione che definisce l'azione da eseguire quando viene toccato il pulsante FINE, devi collegarla alla vista Button.

In MainActivity.kt, alla fine della funzione onCreate(), ottieni un riferimento alla visualizzazione FINEButton. Utilizza la funzione findViewById() e chiama setOnClickListener. Passa un riferimento alla funzione di inserimento dei clic, addNickname().

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

Nel codice riportato sopra, it si riferisce a done_button, ovvero la visualizzazione trasmessa come argomento.

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

Tieni presente che anche dopo aver toccato il pulsante FINE, la tastiera è ancora visibile. Questo comportamento è l'opzione predefinita.

Passaggio 3: nascondi la tastiera

In questo passaggio devi aggiungere 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ù su come funziona questo codice, consulta la documentazione di 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 è nascosta.

Non è possibile modificare il nickname dopo aver toccato il pulsante FINE. Nell'attività successiva rendi l'app più interattiva e aggiungi funzionalità in modo che l'utente possa aggiornare il nickname.

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

Passaggio 1: aggiungi un listener di clic

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

private fun updateNickname (view: View) {
}

Nella funzione updateNickname, trova 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)

Al termine della funzione updateNickname, aggiungi il codice per mostrare il testo della modifica, mostrare 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 di inserimento dei clic, ossia updateNickname().

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

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

Tieni presente che per impostazione predefinita la visualizzazione di EditText non è attiva e la tastiera non è visibile. L'utente non riesce a capire che la visualizzazione del testo del nickname è selezionabile. Nell'attività successiva aggiungerai uno stato attivo e uno stile alla visualizzazione di testo del nickname.

Passaggio 2: imposta lo stato attivo sulla visualizzazione di modifica del testo e mostra la tastiera

Alla fine della funzione updateNickname, imposta lo stato attivo sulla vista 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 Testo nickname

Imposta il colore di sfondo della visualizzazione di testo nickname_text su @color/colorAccent e aggiungi una spaziatura interna inferiore di @dimen/small_padding. Tali modifiche suggeriranno all'utente che la visualizzazione di testo del nickname è selezionabile.

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

Esegui l'app finale. Il testo di modifica è evidenziato, il nickname viene visualizzato nel testo di modifica e lo stile del testo del nickname viene visualizzato.

Ora puoi mostrare la tua app Informazioni su di me interattiva a un amico.

Progetto Android Studio: AboutMeInteractive

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

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'View su cui viene fatto clic.

Puoi collegare una funzione di elenco dei clic a un elemento View in uno dei due seguenti modi:

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

Corso Udacity:

Sviluppo di app Android con Kotlin

Documentazione per gli sviluppatori Android:

In questa sezione sono elencati i possibili compiti per gli studenti che lavorano attraverso questo codelab nell'ambito di un corso tenuto da un insegnante. Spetta all'insegnante fare quanto segue:

Assegna i compiti, se necessario.
Comunica agli studenti come inviare compiti.
Valuta i compiti.

Gli insegnanti possono utilizzare i suggerimenti solo quanto e come vogliono e dovrebbero assegnare i compiti che ritengono appropriati.

Se stai lavorando da solo a questo codelab, puoi utilizzare questi compiti per mettere alla prova le tue conoscenze.

Rispondi a queste domande

Domanda 1

Cos'è una sottoclasse di EditText?

View
LinearLayout
TextView
Button

Domanda 2

Quale dei seguenti valori dell'attributo visibility, se impostato su una vista, la rende nascosta e non occupa spazio nel layout?

visible
Invisible
gone
hide

Domanda 3

Per EditText vista non è consigliabile fornire suggerimenti, perché questi suggerimenti disordinano il campo di immissione. Vero o falso?

Vero
falso.

Domanda 4

Quale delle seguenti affermazioni relative alle visualizzazioni in Button è vera?

Una vista Button è un gruppo di viste.
Puoi avere solo tre visualizzazioni Button per schermata.
Button visualizzazioni sono selezionabili e, al clic, il listener di clic associato esegue un'azione.
Button è un'estensione di ImageView.

Inizia la lezione successiva: 2.3. Layout di vincolo utilizzando l'editor di layout

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