Android Kotlin Fundamentals 03.1: Create a fragment

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.

  1. Scarica il progetto Android Studio AndroidTrivia-Starter.
  2. 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.


  3. 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.

  4. Apri la cartella res > layout e fai doppio clic su activity_main.xml. Il file activity_main.xml viene visualizzato nell'editor di layout.
  5. Fai clic sulla scheda Design. L'albero dei componenti per il file activity_main.xml mostra il layout principale come LinearLayout 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:

  1. 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.
  2. Seleziona File > Nuovo > Frammento > Frammento (vuoto).
  3. 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.
  4. Fai clic su Fine.
  5. Apri il file del frammento TitleFragment.kt, se non è già aperto. Contiene il metodo onCreateView(), uno dei metodi chiamati durante il ciclo di vita di un fragment.
  6. In onCreateView(), rimuovi la sezione return TextView(activity).apply, inclusa la riga che inizia con setText. La funzione onCreateView() 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à).

  1. Nel metodo onCreateView() in TitleFragment.kt, crea una variabile binding (val binding).
  2. Per eseguire l'inflate della visualizzazione del fragment, chiama il metodo DataBindingUtil.inflate() sull'oggetto Binding del fragment, ovvero FragmentTitleBinding.

    Passa quattro parametri nel metodo:
  • inflater, ovvero il LayoutInflater 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 genitore ViewGroup. Questo parametro è facoltativo.
  • false per il valore attachToParent.
  1. Assegna l'associazione restituita da DataBindingUtil.inflate alla variabile binding.
  2. Restituisci binding.root dal metodo, che contiene la visualizzazione aumentata. Il tuo metodo onCreateView() 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.

  1. Apri res > layout > activity_main.xml e fai clic sulla scheda Testo per visualizzare il codice XML del layout.
  2. All'interno dell'elemento LinearLayout esistente, aggiungi un elemento fragment.
  3. Imposta l'ID del frammento su titleFragment.
  4. Imposta il nome del frammento sul percorso completo della classe del frammento, che in questo caso è com.example.android.navigation.TitleFragment.
  5. 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>
  1. 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 in onCreate().
  • 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: 3.2 Definisci i percorsi di navigazione

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