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.
In questo codelab, imparerai a conoscere i fragment e ne creerai uno all'interno di un'app iniziale chiamata AndroidTrivia. Nel prossimo codelab, scoprirai di più sulla navigazione e lavorerai ulteriormente sull'app AndroidTrivia.
Cosa devi già sapere
- Le basi di Kotlin
- Come creare app per Android di base in Kotlin
- Come utilizzare i layout
Obiettivi didattici
- Come aggiungere un fragment in modo statico all'app
In questo lab proverai a:
- Crea un fragment all'interno di un'attività.
Nei tre codelab che compongono questa lezione, lavorerai su un'app chiamata AndroidTrivia. L'app completata è un gioco in cui l'utente risponde a tre domande di cultura generale sulla programmazione per Android. Se l'utente risponde correttamente a tutte e tre le domande, vince la partita e può condividere i risultati.
L'app AndroidTrivia illustra i controlli e i pattern di navigazione. L'app ha diversi componenti:
- Nella schermata del titolo, mostrata a sinistra nello screenshot sopra, l'utente inizia la partita.
- Nella schermata del gioco con le domande, mostrata al centro in alto, l'utente gioca e invia le risposte.
- Il riquadro di navigazione, mostrato a destra in alto, scorre dal lato dell'app e contiene un menu con un'intestazione. L'icona del riquadro a scomparsa
apre il riquadro di navigazione a scomparsa. Il menu del riquadro di navigazione contiene un link alla pagina Informazioni e un link alle regole del gioco.
Nella parte superiore dell'app viene visualizzata una visualizzazione colorata chiamata barra dell'app, nota anche come barra delle azioni.
In questo codelab, lavorerai a partire da un'app iniziale che fornisce codice modello e classi di frammenti di cui hai bisogno per completare l'app Trivia.
- Scarica il progetto Android Studio AndroidTrivia-Starter.
- Apri il progetto in Android Studio ed esegui l'app. Quando l'app si apre, non fa altro che visualizzare il nome dell'app e una schermata vuota.
- Nel riquadro Progetto di Android Studio, apri la visualizzazione Progetto: Android per esplorare i file del progetto. Apri la cartella app > java per visualizzare la classe
MainActivity
e le classi dei fragment. - Apri la cartella res > layout e fai doppio clic su activity_main.xml. Il file
activity_main.xml
viene visualizzato nell'editor di layout. - Fai clic sulla scheda Design. L'albero dei componenti per il file
activity_main.xml
mostra il layout principale comeLinearLayout
verticale.
In un layout lineare verticale, tutte le visualizzazioni secondarie nel layout sono allineate verticalmente.
Un fragment rappresenta un comportamento o una parte dell'interfaccia utente in un'attività. Puoi combinare più fragment in un'unica attività per creare un'interfaccia utente a più riquadri e puoi riutilizzare un fragment in più attività.
Pensa a un frammento come a una sezione modulare di un'attività, una sorta di "sottoattività" che puoi utilizzare anche in altre attività:
- Un fragment ha un proprio ciclo di vita e riceve i propri eventi di input.
- Puoi aggiungere o rimuovere un frammento mentre l'attività è in esecuzione.
- Un fragment è definito in una classe Kotlin.
- L'interfaccia utente di un fragment è definita in un file di layout XML.
L'app AndroidTrivia ha un'attività principale e diversi frammenti. La maggior parte dei fragment e dei relativi file di layout sono già stati definiti. In questa attività creerai un frammento e lo aggiungerai all'attività principale dell'app.
Passaggio 1: aggiungi una classe di frammento
In questo passaggio, crei un corso TitleFragment
vuoto. Inizia creando una classe Kotlin per un nuovo fragment:
- In Android Studio, fai clic in un punto qualsiasi all'interno del riquadro Progetto per riportare lo stato attivo sui file del progetto. Ad esempio, fai clic sulla cartella com.example.android.navigation.
- Seleziona File > Nuovo > Frammento > Frammento (vuoto).
- Per il nome del frammento, utilizza TitleFragment. Deseleziona tutte le caselle di controllo, incluse Crea XML di layout, Includi metodi di fabbrica dei frammenti e Includi callback dell'interfaccia.
- Fai clic su Fine.
- Apri il file del frammento
TitleFragment.kt
, se non è già aperto. Contiene il metodoonCreateView()
, uno dei metodi chiamati durante il ciclo di vita di un fragment. - In
onCreateView()
, rimuovi la sezionereturn TextView(activity).apply
, inclusa la riga che inizia consetText
. La funzioneonCreateView()
rimane solo con il seguente codice:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
}
Creare un oggetto di binding
Il frammento non verrà compilato ora. Per compilare il fragment, devi creare un oggetto binding e gonfiare la visualizzazione del fragment (che equivale a utilizzare setContentView()
per un'attività).
- Nel metodo
onCreateView()
inTitleFragment.kt
, crea una variabilebinding
(val binding
). - Per eseguire l'inflate della visualizzazione del fragment, chiama il metodo
DataBindingUtil.inflate()
sull'oggettoBinding
del fragment, ovveroFragmentTitleBinding
.
Passa quattro parametri nel metodo:
inflater
, ovvero ilLayoutInflater
utilizzato per gonfiare il layout di associazione.- La risorsa di layout XML del layout da gonfiare. Utilizza uno dei layout già definiti,
R.layout.fragment_title
. container
per il genitoreViewGroup
. Questo parametro è facoltativo.false
per il valoreattachToParent
.
- Assegna l'associazione restituita da
DataBindingUtil.inflate
alla variabilebinding
. - Restituisci
binding.root
dal metodo, che contiene la visualizzazione aumentata. Il tuo metodoonCreateView()
ora ha l'aspetto del seguente codice:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
R.layout.fragment_title,container,false)
return binding.root
}
Passaggio 2: aggiungi il nuovo frammento al file di layout principale
In questo passaggio, aggiungi TitleFragment
al file di layout activity_main.xml
dell'app.
- Apri res > layout > activity_main.xml e fai clic sulla scheda Testo per visualizzare il codice XML del layout.
- All'interno dell'elemento
LinearLayout
esistente, aggiungi un elementofragment
. - Imposta l'ID del frammento su
titleFragment
. - Imposta il nome del frammento sul percorso completo della classe del frammento, che in questo caso è
com.example.android.navigation.TitleFragment
. - Imposta la larghezza e l'altezza del layout su
match_parent
.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/titleFragment"
android:name="com.example.android.navigation.TitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</layout>
- Esegui l'app. Il frammento è stato aggiunto alla schermata principale.
Progetto Android Studio: AndroidTriviaFragment
In questo codelab hai aggiunto un fragment all'app AndroidTrivia, su cui continuerai a lavorare nei due codelab successivi di questa lezione.
- Un frammento è una sezione modulare di un'attività.
- Un fragment ha un proprio ciclo di vita e riceve i propri eventi di input.
- Utilizza il tag
<fragment>
per definire il layout del fragment nel file di layout XML. - Gonfia il layout per un fragment in
onCreateView()
. - Puoi aggiungere o rimuovere un frammento mentre l'attività è in esecuzione.
Corso Udacity:
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
Quali sono alcune delle differenze tra frammenti e attività? Seleziona tutte le affermazioni vere.
- Quando crei un fragment, aumenti il layout nel metodo
onCreateView()
. Quando crei un'attività, aumenti il layout inonCreate()
. - Un'attività ha il proprio layout, ma un fragment non può averne uno proprio.
- Un'attività ha un proprio ciclo di vita, mentre un fragment no.
- Quando aumenti il layout per un fragment o un'attività, puoi fare riferimento al layout come
R.layout.
layoutname
.
Domanda 2
Quali delle seguenti affermazioni sui frammenti sono vere? Seleziona tutte le opzioni pertinenti.
- Puoi utilizzare un fragment in più di un'attività.
- Un'attività può avere più frammenti.
- Dopo aver definito un fragment in una classe Kotlin, il fragment viene aggiunto automaticamente al file di layout
activity_main.xml
. - Utilizza il tag
<fragment>
per definire il punto in un file di layout in cui inserire un fragmento.
Inizia la lezione successiva:
Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab di Android Kotlin Fundamentals.