Nelle lezioni precedenti abbiamo imparato cos’è un’activity e il suo funzionamento. Tipicamente su uno schermo piccolo, come quello di uno smartphone, un’activity copre l’intera area, mostrando le varie view (viste) che costituiscono l’interfaccia utente di un’applicazione. Quindi si può dire che un’activity sia un contenitore di viste.
Quando un’activity viene visualizzata su uno schermo di dimensioni più ampie, come quello di un tablet, bisogna tenere conto del fatto che l’area da coprire è molto più ampia e tutte le viste di un’activity devono essere modificate per sfruttare il maggiore spazio a disposizione, effettuando complessi cambiamenti alla gerarchia delle viste.
Un approccio migliore è quello di avere delle mini activity ognuna delle quali contenga in proprio insieme di viste. In fase di esecuzione un’activity principale può contenere una o più di queste mini activity, che sono conosciute con il termine di fragment.
Supponiamo di avere due fragment, uno che contiene una ListView per visualizzare una lista di dati e un altro che contiene alcune TextView
Ora immaginiamo che l’applicazione che contiene questi due fragment sia visualizzata su un dispositivo posto in verticale. In questo caso il primo fragment viene inserito in un’activity e il secondo in un’altra
Se invece visualizziamo l’applicazione in orizzontale entrambi i fragment possono essere visualizzati all’interno della stessa activity
Da questo si capisce come i fragment costituiscano un modalità versatile per creare le interfacce utente di applicazioni Android. Essi possono essere dinamicamente aggiunti o rimossi da un’activity al fine di assicurare la migliore esperienza di utilizzo all’utente.
Passiamo ora ad un esempio pratico. Avviamo Android Studio e creiamo un nuovo progetto denominato TestFragment. Nella cartella reslayout creiamo un nuovo file denominato fragment1.xml e al suo interno inseriamo il seguente codice
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:ignore="HardcodedText" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Questo è il fragment 1"
android:textSize="25sp" />
</LinearLayout>Graficamente questo codice corrisponde al seguente fragment
Facciamo la stessa cosa creando un altro file fragment2.xml con il seguente codice
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00FF00"
android:orientation="vertical"
tools:ignore="HardcodedText" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Questo è il fragment 2"
android:textSize="25sp" />
</LinearLayout>Graficamente questo codice corrisponde al seguente fragment
Nel file relativo all’activity principale dell’applicazione (activity_main.xml) dichiariamo i suddetti fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:baselineAligned="false"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="com.example.test.testfragment.MainActivity" >
<fragment
android:id="@+id/fragment1"
android:name="layout.fragment1"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1"
tools:layout="@layout/fragment1" />
<fragment
android:name="layout.fragment2"
android:id="@+id/fragment2"
android:layout_weight="1"
android:layout_width="0px"
android:layout_height="match_parent" />
</LinearLayout>Dopo aver creato i due fragment, nella cartella layout, troviamo due file denominati fragment1.java e fragment2.java. Se non li trovate significa che avete creato i file xml dei fragment senza selezionare la tipologia New Fragment e quindi dovete implementare manualmente tali file
Nel primo deve essere contenuto il seguente codice
package layout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.test.testfragment.R;
/**
* A simple {@link Fragment} subclass.
*/
public class fragment1 extends Fragment {
public fragment1() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment1, container, false);
}
}Nel secondo file il seguente codice
package layout;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.test.testfragment.R;
/**
* A simple {@link Fragment} subclass.
*/
public class fragment2 extends Fragment {
public fragment2() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment2, container, false);
}
}A questo punto lanciamo l’applicazione sull’emulatore, il risultato dovrebbe essere il seguente
Dunque un fragment funziona in modo simile ad un’activity, è costituito da una classe java e carica la propria interfaccia utente da un file XML. Tale file contiene tutti gli elementi grafici necessari (TextView, Button, ecc.) mentre la classe java estende la classe base Fragment. Per disegnare l’interfaccia di un fragment è necessario effettuare l’override del metodo onCreateView, che restituisce un oggetto View
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(
R.layout.fragment1, container, false);
}Vi faccio notare l’uso dell’oggetto LayoutInflater per il caricamento dell’interfaccia utente da uno specifico file XML (in questo caso R.layout.fragment1). L’argomento container si riferisce all’activity ViewGroup in cui stiamo cercando di includere il fragment. L’argomento savedInstanceState consente di riportare il fragment al suo precedente stato salvato.
