Concetti fondamentali di Android Kotlin 03.1: creare un frammento

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.

In questo codelab, scoprirai i frammenti e creerai un frammento all'interno di un'app iniziale chiamata AndroidTrivia. Nel prossimo codelab, scopri di più sulla navigazione e sulle operazioni aggiuntive nell'app AndroidTrivia.

Informazioni importanti

  • I concetti fondamentali di Kotlin
  • Come creare app Android di base in Kotlin
  • Come utilizzare i layout

Obiettivi didattici

  • Come aggiungere in modo statico un frammento alla tua app

In questo lab proverai a:

  • Crea un frammento all'interno di un'attività.

Nei tre codelab che compongono questa lezione, lavori su un'app chiamata AndroidTrivia. L'app completata è un gioco in cui l'utente risponde a tre domande di cultura generale sulla programmazione di Android. Se l'utente risponde correttamente a tutte e tre le domande, vince la partita e può condividere i risultati.

L'app AndroidTrivia illustra schemi e controlli di navigazione. L'app ha diversi componenti:

  • Nella schermata del titolo, mostrata a sinistra nello screenshot in alto, l'utente inizia il gioco.
  • Nella schermata del gioco con le domande, mostrata al centro in alto, l'utente gioca e invia le sue risposte.
  • Il riquadro di navigazione a scomparsa, mostrato a destra, scorre verso l'esterno dal lato 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 a scomparsa contiene un link alla pagina Informazioni e un link alle regole del gioco.

Nella parte superiore dell'app viene mostrata una vista colorata chiamata barra dell'app, chiamata anche barra delle azioni.

In questo codelab, lavori da un'app iniziale che fornisce il codice del modello e le classi di frammenti necessari quando completi l'app Trivia.

  1. Scarica il progetto Android Android Trivia-Starter.
  2. Apri il progetto in Android Studio ed esegui l'app. Una volta aperta, l'app non si limita a visualizzare il nome dell'app e una schermata vuota.


  3. Nel riquadro Progetto di Android Studio, apri la vista Progetto: Android per esplorare i file di progetto. Apri la cartella app > java per visualizzare la classe MainActivity e le classi di frammenti.

  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. La struttura ad albero del file activity_main.xml mostra il layout principale come verticale LinearLayout.



    In un layout lineare verticale, tutte le viste secondarie del layout sono allineate in verticale.

Un frammento rappresenta un comportamento o una parte dell'interfaccia utente (UI) in un'attività. Puoi combinare più frammenti in una singola attività per creare un'interfaccia utente a più riquadri e puoi riutilizzare un frammento in più attività.

Pensa a un frammento come a una sezione modulare di un'attività, ad esempio una "attività secondaria", che puoi usare anche in altre attività:

  • Un frammento ha il proprio ciclo di vita e riceve i propri eventi di input.
  • Puoi aggiungere o rimuovere un frammento mentre l'attività è in esecuzione.
  • Un frammento è definito in una classe Kotlin.
  • L'interfaccia utente di un frammento è definita in un file di layout XML.

L'app AndroidTrivia contiene un'attività principale e diversi frammenti. La maggior parte dei frammenti e dei relativi file di layout è stata definita. In questa attività creerai un frammento e lo aggiungerai all'attività principale dell'app.

Passaggio 1: aggiungi una classe di frammenti

In questo passaggio, creerai una classe TitleFragment vuota. Inizia creando una classe Kotlin per un nuovo frammento:

  1. In Android Studio, fai clic in un punto qualsiasi del riquadro Progetto per ripristinare lo stato attivo sui file di progetto. Ad esempio, fai clic sulla cartella com.example.android.navigation.
  2. Seleziona File > New > Fragment > Fragment (Vuoto).
  3. Per il nome del frammento, utilizza TitleFragment. Deseleziona tutte le caselle di controllo, tra cui Crea XML del layout, Includi metodi di fabbrica di 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(), che è uno dei metodi chiamati durante il ciclo di vita di un frammento.
  6. In onCreateView(), rimuovi la sezione return TextView(activity).apply, inclusa la riga che inizia con setText. La funzione onCreateView() viene lasciata solo con il seguente codice:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Crea un oggetto vincolante

Il frammento non viene compilato ora. Per rendere il frammento compilato, devi creare un oggetto vincolante e gonfiare la vista del frammento (che equivale a utilizzare setContentView() per un'attività).

  1. Nel metodo onCreateView() in TitleFragment.kt, crea una variabile binding (val binding).
  2. Per aumentare il numero di visualizzazioni del frammento, chiama il metodo DataBindingUtil.inflate() sull'oggetto Binding del frammento, che è FragmentTitleBinding.

    Inserisci quattro parametri nel metodo:
  • inflater, che è il LayoutInflater utilizzato per gonfiare il layout dell'associazione.
  • La risorsa di layout XML del layout per gonfiare. Utilizza uno dei layout già definiti per te, R.layout.fragment_title.
  • container per l'elemento principale ViewGroup. Questo parametro è facoltativo.
  • false per il valore attachToParent.
  1. Assegna l'associazione che DataBindingUtil.inflate restituisce alla variabile binding.
  2. Restituisce binding.root dal metodo, che contiene la visualizzazione gonfiata. Il metodo onCreateView() ora ha il 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 devi aggiungere 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 di layout.
  2. Aggiungi un elemento fragment all'interno dell'elemento LinearLayout esistente.
  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 frammento all'app AndroidTrivia e che continueremo a usare nei prossimi due codelab in questa lezione.

  • Un frammento è una sezione modulare di un'attività.
  • Un frammento ha il proprio ciclo di vita e riceve i propri eventi di input.
  • Utilizza il tag <fragment> per definire il layout del frammento nel file di layout XML.
  • Aumenta il layout di un frammento in onCreateView().
  • Puoi aggiungere o rimuovere un frammento mentre l'attività è in esecuzione.

Corso Udacity:

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

Quali sono alcune delle differenze tra frammenti e attività? Seleziona tutte le affermazioni vere.

  • Quando crei un frammento, puoi gonfiare il layout nel metodo onCreateView(). Durante la creazione di un'attività, il layout si gonfia in onCreate().
  • Un'attività ha un proprio layout, ma un frammento non può avere un proprio layout.
  • Un'attività ha un proprio ciclo di vita, al contrario di un frammento.
  • Quando aumenti il layout di un frammento o di un'attività, puoi fare riferimento al layout come R.layout.layoutname.

Domanda 2

Quali delle seguenti affermazioni sui frammenti sono vere? Seleziona tutte le risposte pertinenti.

  • Puoi utilizzare un frammento in più attività.
  • Un'attività può avere più frammenti.
  • Dopo aver definito un frammento in una classe Kotlin, questo viene aggiunto automaticamente al file di layout activity_main.xml.
  • Utilizza il tag <fragment> per definire la posizione di un file di layout in cui inserire un frammento.

Inizia la lezione successiva: 3.2 Definire i percorsi di navigazione

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