Cells

Per la gestione di un’interfaccia utente, oltre agli elementi View (esaminati nella precedente lezione), Xamarin definisce una nuova categoria di elementi: le Cell.

Tipologie di Cell

Una Cell è composta da uno o più elementi di tipo View ed è generalmente utilizzata con una ListView o una TableView. Inoltre, questa classe di oggetti si basa sulla definizione della classe Element, che rappresenta una classe di base per tutti gli elementi gerarchici definiti in Xamarin.Forms, come si evince dal diagramma delle gerarchie riportato di seguito.

Rispetto agli oggetti di tipo View, si dispone di un numero ridotto di oggetti di tipo Cell classificati come segue:

Tipologia	Descrizione
EntryCell	Definisce una Label per l’inserimento di una singola linea di testo (ad esempio, un campo per l’inserimento di un dato in una form). Offre la possibilità di inserire un PlaceHolder come suggerimento da dare all’utente che deve inserire il dato
TextCell	Permette di definire un testo primario ed uno secondario mediante le proprietà Text e Detail
SwitchCell	Offre la combinazione di un testo definito attraverso la proprietà Text e di un bottone di tipo switch. Utilizzato per attivare o disattivare una determinata azione o preferenza
ImageCell	Combina la TextCell con un’immagine caricata tramite URI o dalle risorse dell’app. È utile quando si lavora con le ListView perché permette di aggiungere al testo visualizzato un’immagine rappresentativa.
ViewCell	È, tra tutte, quella di maggiore interesse, poiché offre la possibilità di ampliare gli oggetti di tipo Cell a diposizione tramite un’implementazione ad-hoc. Questo elemento verrà trattato insieme alle ListView

Ognuno di questi elementi offre un insieme di proprietà per modificare l’aspetto e le informazioni da presentare all’utente. Prendiamo confidenza con questa tipologia di oggetti integrandoli all’interno di una TableView attraverso l’utilizzo di C#.

Implementazione in C#

Nell'esempio che segue realizzeremo una TableView che definisca un form in cui poter inserire dei dati e specificare se ricevere delle notifiche.

Come si evince dalla figura precedente, la schermata si comporrà di 5 elementi di tipo Cell, contenuti in tre sezioni differenti del TableView.

Per prima cosa creiamo una nuova ContentPage da aggiungere al nostro progetto portable, e chiamiamola TableViewCellsExample. Iniziamo a modificare il codice del costruttore definendo la TableView:

public TableViewCellsExample()
		{
			TableView tv = new TableView();
			tv.BackgroundColor = Color.FromRgb(40,40,40);
			tv.Intent = TableIntent.Form;
			TableRoot tv_root = new TableRoot();
			TableSection tv_s1 = new TableSection("Info");
			TableSection tv_s2 = new TableSection("Settings");
			TableSection tv_s3 = new TableSection("Credits");
			tv_root.Add(tv_section1);
			tv.Root = tv_root;
			Content = tv;
		}

Con questa porzione di codice abbiamo:

• creato una nuova TableView;
• definito lo sfondo della View tramite la classe Color;
• definito l’intento della TableView attraverso la proprietà Intent;
• creato la TableRoot, che conterrà le tre sezioni;
• impostato la TableView così creata come contenuto della pagina.

Ora non ci resta che popolare le sezioni definendo le diverse tipologie di Cell offerte. Creiamo, per la sezione Info, due EntryCell per l’inserimento del nome e del telefono dell’utente:

EntryCell ec_n = new EntryCell
		{
			Label = "Name",
			Placeholder = "Name here",
			Keyboard = Keyboard.Default,
			HorizontalTextAlignment = TextAlignment.Center
		};
		EntryCell ec_ph = new EntryCell
		{
			Label = "Phonenumber",
			Placeholder = "+39",
			Keyboard = Keyboard.Telephone,
			HorizontalTextAlignment = TextAlignment.Center
		};

Come si può notare, la definizione di queste tre EntryCell è identica, e tutte inizializzano le seguenti proprietà:

Label	Indica il nome del campo
Placeholder	Offre un suggerimento all’utente sul dato da inserire
Keyboard	Permette di definire il tipo di input accettato (ad esempio solo numerico per il valore Keyboard.Telephone)
LabelColor	Per impostare un colore per la Label usando la classe Color
HorizontalTextAlignment	Permette definire la posizione del valore inserito nel campo

Per la seconda sezione, invece, inseriamo una TextCell e una SwithCell come segue:

TextCell tc = new TextCell()
		{
			Text = "Notifications",
			Detail = "Please enable notification",
			TextColor= Color.Red,
			DetailColor = Color.Gray
		};
		SwitchCell sc = new SwitchCell()
		{
			Text = "Enable:"
		};

La TextCell offre la possibilità di definire il testo per le due stringhe e il loro colore tramite la classe Color. Per lo SwithCell, invece, possiamo solo definire il testo da visualizzare legato al bottone e impostare quest’ultimo su On o Off (quest'ultimo è il valore di default).

Infine, per la sezione Credits, creiamo una ImageCell:

ImageCell ic = new ImageCell
		{
			ImageSource =
							 Device.OnPlatform(ImageSource.FromFile("logo.png"),
											  ImageSource.FromUri(new Uri("https://www.html.it/wp-content/themes/www.html.it/images/logo.png")),
											  ImageSource.FromFile("Images/logo.png")),
			Text = "HTML.it",
			Detail = "Tutorial powered by Antedesk",
			TextColor = Color.Gray,
			DetailColor = Color.Lime,
		};

Come anticipato, questo tipo di Cell è la combinazione di una Image con una TextCell: di conseguenza, ritroviamo tutte le proprietà della TextCell e la proprietà ImageSource per definire l’immagine da visualizzare. In particolare, possiamo sfruttare il metodo OnPlatform() della classe Device, che permette di definire la strategia di caricamento dell’immagine per le tre piattaforme. Possiamo caricare l’immagine da URI o dalle risorse dell’app grazie ai metodi FromUri e FromFile della classe ImageSource.

A questo punto, aggiorniamo il codice del costruttore della nostra pagina TableViewCellsExample, aggiungendo tali elementi dopo la definizione delle TableSection e aggiungiamoli ad esse come segue:

tv_section1.Add(ec_n);
		tv_section1.Add(ec_ph);
		tv_section2.Add(tc);
		tv_section2.Add(sc);
		tv_section3.Add(ic);

Lasciamo invariato il resto del codice ed eseguiamo l’app su tutte e tre le piattaforme, ottenendo come il risultato quello riportato di seguito.

Qualora il numero di elementi sia tale da impedire di contenerli tutti all’interno della schermata, la TableView offre nativamente lo scroll verticale della pagina in cui è definita, senza apportare ulteriori modifiche.