Gestire le immagini

Quando si sviluppa un’app è necessario lavorare con immagini che fungono da icone, bottoni, background o più semplicemente immagini ottenute da un server remoto.

Nel corso di questa guida abbiamo già avuto occasione di lavorare con le immagini, ed in questa lezione si riassumeranno i principali approcci per caricare e gestire un’immagine con Xamarin.Forms.

La classe Image e l’organizzazione delle immagini

In Xamarin.Forms, la classe Image è impiegata per visualizzare un’immagine presente nella memoria locale, scaricata dalla rete o integrata come risorsa dell’app. In particolare, un oggetto di tipo Image si compone di diverse proprietà quali:

Proprietà	Descrizione
Aspect	Permette di gestire la dimensione dell’immagine tenendo conto dei limiti imposti dal contenitore
IsLoading	Ritorna un valore booleano che rappresenta lo status di caricamento dell’immagine
IsOpaque	È un valore booleano che permette di settare e recuperare informazioni circa l’opacità dell’immagine. Se è true allora l’immagine è opaca
Source	Permette di impostare o recuperare l’immagine dell’oggetto Image. L’immagine può essere impostata secondo diverse modalità

La proprietà Aspect offre a sua volta tre valori per permettere allo sviluppatore di decidere come deve essere visualizzata l’immagine:

Valore	Descrizione
Fill	Estende l’immagine affinché occupi tutto lo spazio a disposizione, provocando delle distorsioni
AspectFill	L’immagine riempie l’area a disposizione preservando l’aspetto originale senza distorsioni
AspectFit	L’immagine viene rappresentata nell’area di interesse lasciando uno spazio vuoto lateralmente o sopra/sotto a seconda della altezza e larghezza dell’immagine

Ogni immagine deve avere dimensioni differenti a seconda della risoluzione del dispositivo e del sistema operativo considerato, oltre ad avere una diversa locazione all’interno del progetto. Infatti, per ogni piattaforma le immagini devono essere caricate in modo opportuno per assicurarne la corretta visualizzazione.

Aggiungiamo ad ogni progetto l’immagine logo.png, che rappresenta il logo di HTML.it, nelle rispettive cartelle, ossia:

OS	Cartella	Azione di compilazione
Android	drawable-RISOLUZIONE, dove RISOLUZIONE rappresenta la risoluzione dello schermo e la qualità dell’immagine. In questo modo, Android recupererà automaticamente la dimensione corretta dell’immagine da usare per quel dispositivo. Qualora l’immagine non fosse definita per tutte le risoluzioni verrà presa quella più vicina alla risoluzione corrente.	AndroidResource
iOS	Generalmente si impiega la cartella Resources. Per convenzione, ogni immagine è rappresentata dal nome e dalla dimensione, ad esempio: Icon-76.png rappresenta un’icona 76x76 pixels. Le immagini per i dispositivi Retina hanno il suffisso @2x o @3x dopo la risoluzione dell’immagine e prima dell’estensione, ad esempio: Icon-76@2x.png.	BoundleResource
Windows Phone	Le immagini vengono inserite nella root del progetto, ma per migliorare la gestione di quest’ultimo viene impiegata la cartella Images che richiede di conseguenza alcune accortezze nel caricamento delle immagini.	Content

È importante ricordare che se una risorsa è contenuta in un solo progetto, essa non verrà visualizzata negli altri.

Visualizzare un’immagine

Creiamo una nuova Form Xaml Page per la nostra app e chiamiamola ImageManagmentExample. Aggiungiamo nel codice Xaml una nuova Image, chiamandola imageTest. Nel code-behind aggiungiamo, all’interno del costruttore e dopo l’inizializzazione dei componenti, il seguente codice:

imageTest.Source = Device.OnPlatform(ImageSource.FromFile("logo.png"),
										 ImageSource.FromFile("logo.png"),
										 ImageSource.FromFile("Images/logo.png"));

Eseguendo l’app su tutte e tre le piattaforme noteremo che il caricamento delle immagini è avvenuto con successo.

In alternativa, se l’immagine è sempre presente in locale, è possibile impostare il percorso per ogni piattaforma direttamente nel codice Xaml, come segue:

<Image x:Name="imageTest">
	  <Image.Source>
		<OnPlatform x:TypeArguments="ImageSource"
					iOS="logo.png"
					Android="logo.png"
					WinPhone="Images/logo.png" />
	  </Image.Source>
	</Image>

Il risultato sarà il medesimo di quello mostrato nella precedente figura.

Capita spesso che le immagini non siano state integrate nell’app e che debbano essere scaricate da quest’ultima attraverso un URI che le referenzia. Per fare ciò è necessario modificare il metodo per impostare l’immagine. Nel codice XAML aggiungiamo quindi una nuova Image:

<Image x:Name="imageDownloaded"/>

mentre nel code-behind aggiungiamo:

imageDownloaded.Source = ImageSource.FromUri(new Uri(logoUri));

Se si è certi che l’immagine referenzierà sempre quell’URI, dal codice XAML possiamo impostare l’attributo Source dell’Image con l’URI di interesse, come segue:

<Image x:Name="imageDownloadedXaml" Source="https://www.html.it/wp-content/themes/www.html.it/images/logo.png"/>

Per evitare di scaricare l’immagine ogni volta, Xamarin offre un meccanismo di caching. Questa soluzione è molto utile in scenari in cui sono presenti delle liste di immagini che devono essere scorse lasciando il successivo caricamento delle immagini già visualizzate al sistema di caching. Ciò è possibile attraverso l’utilizzo di una UriImageSource al posto dell’ImageSource finora usata. Tale classe si avvale di due proprietà:

• CachingEnabled, è un valore booleano che permette di abilitare/disabilitare il sistema di caching
• CacheValidity, è un oggetto di tipo TimeSpan che definisce per quanto tempo deve essere conservata quell’immagine, di default 24 ore.

Aggiungiamo una nuova Image nel codice XAML e nel code-behind definiamone la proprietà Source come segue:

imgCaching.Source = new UriImageSource {
												Uri = new Uri(logoUri),
												CachingEnabled = true,
												CacheValidity = new TimeSpan(5, 0, 0, 0)
											};

Nella seguente figura è riportato il risultato delle operazioni sopra descritte.

Image Tap

Spesso torna utile associare alcune immagini della schermata a delle azioni a seguito del tap effettuato dall’utente, così da creare bottoni personalizzati che sostituiscano i bottoni contenenti un’immagine.

Per farlo è necessario aggiungere la proprietà di riconoscimento della gesture Tap all’interno del tag Image di interesse, come segue

<Image>
		. . .
		<Image.GestureRecognizers>
			<TapGestureRecognizer Tapped="OnImageTapped" />
		</Image.GestureRecognizers>
	</Image>

ed implementare il comportamento desiderato. In questo caso, il metodo OnImageTapped renderà l’immagine opaca per 100 ms quando l’utente ci cliccherà sopra.

Di seguito è mostrato il risultato finale.