Android Studio - Tabbed Activity: costruire l'app all'interno delle schede

In questo articolo vedremo come costruire la propria alla all'interno delle schede.

Dopo aver creato la base con TabActivity descritta in questo articolo e creati i vari layout che compongono l'app occorre creare il codice in modo che l'app interagisca con l'utente.
All'interno della cartella layout contenuta nella cartella res ci saranno i seguenti file:

• activity_main.xml
• fragment1.xml
• fragment2.xml
• ecc..
• fragment_main.xml

All'interno della cartella java ci saranno i seguenti file:

• Fragment1.kt
• Fragment2.kt
• ecc..
• MainActivity.kt

In questo esempio vedremo come creare l'app all'interno dei layout:

• fragment1.xml
• fragment2.xml

e di conseguenza creare il codice all'interno dei seguenti file:

• Fragment1.kt
• Fragment2.kt

Ecco come si presenta il file fragment1.xml

	<?xml version="1.0" encoding="utf-8"?>
	<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".Fragment1">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:layout_margin="5dp">
	<Button
	android:id="@+id/button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Prova 1" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="TextView" />
	</LinearLayout>
	</FrameLayout>

view raw fragment1.xml hosted with ❤ by GitHub

Ecco come si presenta il file Fragment1.kt

	package com.dm.tutorialtabactivity
	import android.os.Bundle
	import androidx.fragment.app.Fragment
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import kotlinx.android.synthetic.main.fragment1.*
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment1 : Fragment() {
	override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,savedInstanceState: Bundle?): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment1, container, false)
	}
	//funzione principale dove inserire il proprio codice
	override fun onResume() {
	super.onResume()
	//inserire qui il proprio codice
	//gestione del pulsante con id=button
	button.setOnClickListener {
	textView.text = "Tab1"
	}
	}
	}

view raw Fragment1.kt hosted with ❤ by GitHub

Ecco come si presenta il file fragment2.xml

	<?xml version="1.0" encoding="utf-8"?>
	<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".Fragment2">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:layout_margin="5dp">
	<Button
	android:id="@+id/button2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Prova 2" />
	<TextView
	android:id="@+id/textView2"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="TextView" />
	<TextView
	android:id="@+id/textView3"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="TextView" />
	</LinearLayout>
	</FrameLayout>

view raw fragment2.xml hosted with ❤ by GitHub

Ecco come si presenta il file Fragment2.kt

	package com.dm.tutorialtabactivity
	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import androidx.fragment.app.Fragment
	import kotlinx.android.synthetic.main.fragment2.*
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment2 : Fragment() {
	private var click = 0
	private var click2 = 1
	override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment2, container, false)
	}
	//funzione che viene eseguita dopo che la View viene creata
	override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
	super.onViewCreated(view, savedInstanceState)
	//recupero dello stato precedente
	if (savedInstanceState != null) {
	click = savedInstanceState.getInt("n1")
	click2 = savedInstanceState.getInt("n2")
	}
	//gestione del pulsante con id=button2
	button2.setOnClickListener {
	click++
	click2++
	textView2.text = click.toString()
	textView3.text = click2.toString()
	}
	textView2.text = click.toString()
	textView3.text = click2.toString()
	}
	//salvataggio dello stato in caso in cui cambia la configurazione
	//ad esempio l'orientamento schermo
	override fun onSaveInstanceState(outState: Bundle) {
	super.onSaveInstanceState(outState)
	outState.putInt("n1",click)
	outState.putInt("n2",click2)
	}
	}

view raw Fragment2.kt hosted with ❤ by GitHub

In questo esempio ho voluto differenziare i due layout in quanto il primo è un semplicissimo layout con un pulsante che se premuto viene visualizzato il nome della scheda, mentre nel secondo layout vengono eseguiti dei calcoli matematici.

A livello di codice, la differenza è che nel primo layout se viene orientato lo schermo si perde il contenuto che è stato inserito nella TextView dopo aver premuto il pulsante.
Nel secondo layout se viene orientato lo schermo non si perde il contenuto delle due TextView in quanto è stata utilizzata la funzione onSaveInstanceState() che abbiamo visto in questo articolo con l'unica differenza che non viene utilizzata la funzione onRestoreInstanceState().
Il salvataggio dello stato precedente e il suo ripristino vengono eseguiti in questo modo:
con queste righe di codice viene eseguito il salvataggio dello stato:

	override fun onSaveInstanceState(outState: Bundle) {
	super.onSaveInstanceState(outState)
	outState.putInt("n1",click)
	outState.putInt("n2",click2)
	}

view raw onSaveInstanceState_frag.kt hosted with ❤ by GitHub

e recuperato lo stato precedente con queste righe di codice

	//questa condizione è da inserire nella funzione onViewCreated()
	/*se savedInstanceState non è nullo viene eseguito il ripristino
	altrimenti viene eseguito il ripristino allo stato iniziale*/
	if (savedInstanceState != null) {
	click = savedInstanceState.getInt("n1")
	click2 = savedInstanceState.getInt("n2")
	}

view raw onSaveInstanceState_frag2.kt hosted with ❤ by GitHub

Layout fragment1 in posizione portrait (verticale)

Layout fragment1 in posizione landscape (orizzontale)

Come si può vedere quando si orienta lo schermo viene ripristinato il contenuto della TextView allo stato originale.

Layout fragment2 in posizione portrait (verticale)

Layout fragment2 in posizione landscape (orizzontale)

Come si può vedere quando si orienta lo schermo viene ripristinato lo stato precedente delle due TextView.

Ecco un video dimostrativo

Download Project
Download file APK

---

Vedi anche Tabbed Activity: creazione delle schede
Vedi anche Tabbed Activity: personalizzazione
Vedi anche Tabbed Activity: aggiungere OptionMenu in ActionBar