Condividi tramite

Riepilogo del capitolo 13. Bitmap

  • Articolo

Nota

Questo libro è stato pubblicato nella primavera del 2016, e non è stato aggiornato da allora. C'è molto nel libro che rimane prezioso, ma alcuni materiali sono obsoleti, e alcuni argomenti non sono più completamente corretti o completi.

L'elemento Xamarin.FormsImage visualizza una bitmap. Tutte le Xamarin.Forms piattaforme supportano i formati di file JPEG, PNG, GIF e BMP.

Le bitmap in Xamarin.Forms provengono da quattro posizioni:

  • Sul Web come specificato da un URL
  • Incorporato come risorsa nella libreria condivisa
  • Incorporato come risorsa nei progetti di applicazione della piattaforma
  • Da qualsiasi punto a cui può essere fatto riferimento da un oggetto .NET Stream , tra cui MemoryStream

Le risorse bitmap nella libreria condivisa sono indipendenti dalla piattaforma, mentre le risorse bitmap nei progetti della piattaforma sono specifiche della piattaforma.

Nota

Il testo del libro fa riferimento alle librerie di classi portabili, che sono state sostituite da librerie .NET Standard. Tutto il codice di esempio del libro è stato convertito per l'uso di librerie .NET Standard.

La bitmap viene specificata impostando la Source proprietà di Image su un oggetto di tipo ImageSource, una classe astratta con tre derivati:

  • UriImageSource per accedere a una bitmap sul Web in base a un Uri oggetto impostato sulla relativa Uri proprietà
  • FileImageSource per l'accesso a una bitmap archiviata in un progetto di applicazione della piattaforma in base a una cartella e a un percorso di file impostato sulla relativa File proprietà
  • StreamImageSource per caricare una bitmap usando un oggetto .NET Stream specificato restituendo un Stream oggetto da un Func set alla relativa Stream proprietà

In alternativa , e più comunemente, è possibile usare i metodi statici seguenti della ImageSource classe , tutti i quali restituiscono ImageSource oggetti:

Non esiste un equivalente di classe dei Image.FromResource metodi. La UriImageSource classe è utile se è necessario controllare la memorizzazione nella cache. La FileImageSource classe è utile in XAML. StreamImageSource è utile per il caricamento asincrono degli Stream oggetti, mentre ImageSource.FromStream è sincrono.

Bitmap indipendenti dalla piattaforma

Il progetto WebBitmapCode carica una bitmap sul Web usando ImageSource.FromUri. L'elemento Image è impostato sulla Content proprietà dell'oggetto ContentPage, pertanto è vincolato alle dimensioni della pagina. Indipendentemente dalle dimensioni della bitmap, un elemento vincolato Image viene esteso alle dimensioni del contenitore e la bitmap viene visualizzata nella dimensione massima all'interno dell'elemento Image mantenendo le proporzioni della bitmap. Le aree di Image oltre la bitmap possono essere colorate con BackgroundColor.

L'esempio WebBitmapXaml è simile ma imposta semplicemente la Source proprietà sull'URL. La conversione viene gestita dalla ImageSourceConverter classe .

Adatta e riempimento

È possibile controllare l'estensione della bitmap impostando la Aspect proprietà di Image su uno dei membri seguenti dell'enumerazione Aspect :

  • AspectFit: rispetta le proporzioni (impostazione predefinita)
  • Fill: area di riempimento, non rispetta le proporzioni
  • AspectFill: riempie l'area ma rispetta le proporzioni, ottenute ritagliando parte della bitmap

Risorse incorporate

È possibile aggiungere un file bitmap a una libreria di classi portabile o a una cartella nella libreria di classi portabile. Assegnargli un'azione di compilazione di EmbeddedResource. L'esempio ResourceBitmapCode illustra come usare ImageSource.FromResource per caricare il file. Il nome della risorsa passato al metodo è costituito dal nome dell'assembly, seguito da un punto, seguito dal nome della cartella facoltativo e da un punto, seguito dal nome del file.

Il programma imposta le VerticalOptions proprietà e HorizontalOptions di su Image LayoutOptions.Center, che rende l'elemento Image non vincolato. e Image la bitmap hanno le stesse dimensioni:

  • In iOS e Android, è Image la dimensione in pixel della bitmap. Esiste un mapping uno-a-uno tra i pixel bitmap e i pixel dello schermo.
  • In piattaforma UWP (Universal Windows Platform), è Image la dimensione in pixel della bitmap in unità indipendenti dal dispositivo. Nella maggior parte dei dispositivi ogni pixel bitmap occupa più pixel dello schermo.

L'esempio StackedBitmap inserisce un oggetto Image in verticale StackLayout in XAML. Un'estensione di markup denominata ImageResourceExtension consente di fare riferimento alla risorsa incorporata in XAML. Questa classe carica solo le risorse dall'assembly in cui si trova, quindi non può essere inserito in una libreria.

Altre informazioni sul dimensionamento

Spesso è consigliabile ridimensionare le bitmap in modo coerente tra tutte le piattaforme. Sperimentare con StackedBitmap, è possibile impostare un WidthRequest oggetto sull'elemento Image in un verticale StackLayout per rendere coerenti le dimensioni tra le piattaforme, ma è possibile ridurre solo le dimensioni usando questa tecnica.

È anche possibile impostare per HeightRequest rendere coerenti le dimensioni delle immagini sulle piattaforme, ma la larghezza vincolata della bitmap limiterà la versatilità di questa tecnica. Per un'immagine in un oggetto verticale, HeightRequest è consigliabile StackLayoutevitare .

L'approccio migliore consiste nell'iniziare con una bitmap più ampia della larghezza del telefono in unità indipendenti dal dispositivo e impostare WidthRequest su una larghezza desiderata in unità indipendenti dal dispositivo. Questo è illustrato nell'esempio DeviceIndBitmapSize .

Il MadTeaParty mostra il capitolo 7 delle avventure di Alice di Lewis Carroll nel Paese delle Meraviglie con le illustrazioni originali di John Tenniel:

Triplo screenshot di mad tea party

Esplorazione e attesa

L'esempio ImageBrowser consente all'utente di esplorare le immagini stock archiviate nel sito Web Xamarin. Usa la classe .NET WebRequest per scaricare un file JSON con l'elenco di bitmap.

Nota

Xamarin.Forms i programmi devono usare HttpClient anziché WebRequest per accedere ai file tramite Internet.

Il programma usa un ActivityIndicator oggetto per indicare che qualcosa sta succedendo. Quando ogni bitmap viene caricata, la proprietà di sola lettura IsLoading di Image è true. La IsLoading proprietà è supportata da una proprietà associabile, quindi un PropertyChanged evento viene generato quando tale proprietà viene modificata. Il programma associa un gestore a questo evento e usa l'impostazione corrente di IsLoaded per impostare la IsRunning proprietà dell'oggetto ActivityIndicator.

Bitmap di streaming

Il ImageSource.FromStream metodo crea un ImageSource oggetto basato su .Stream Il metodo deve essere passato a un Func oggetto che restituisce un Stream oggetto .

Accesso ai flussi

L'esempio BitmapStreams illustra come usare il ImaageSource.FromStream metodo per caricare una bitmap archiviata come risorsa incorporata e caricare una bitmap sul Web.

Generazione di bitmap in fase di esecuzione

Tutte le Xamarin.Forms piattaforme supportano il formato di file BMP non compresso, facile da costruire nel codice e quindi archiviare in un oggetto MemoryStream. Questa tecnica consente la creazione algoritmica di bitmap in fase di esecuzione, come implementato nella BmpMaker classe nella libreria Xamrin.FormsBook.Toolkit .

L'esempio di DiyGradientBitmap "Do It Yourself" illustra l'uso di BmpMaker per creare una bitmap con un'immagine sfumatura.

Bitmap specifiche della piattaforma

Tutte le piattaforme consentono di Xamarin.Forms archiviare bitmap negli assembly dell'applicazione della piattaforma. Quando vengono recuperati da un'applicazione Xamarin.Forms , queste bitmap della piattaforma sono di tipo FileImageSource. Vengono usati per:

Gli assembly della piattaforma contengono già bitmap per le icone e le schermate iniziali:

  • Nel progetto iOS, nella cartella Risorse
  • Nel progetto Android, nelle sottocartelle della cartella Risorse
  • Nei progetti Windows, nella cartella Assets (anche se le piattaforme Windows non limitano le bitmap a tale cartella)

L'esempio PlatformBitmaps usa il codice per visualizzare un'icona dai progetti di applicazione della piattaforma.

Risoluzioni bitmap

Tutte le piattaforme consentono di archiviare più versioni di immagini bitmap per risoluzioni del dispositivo diverse. In fase di esecuzione, la versione corretta viene caricata in base alla risoluzione del dispositivo dello schermo.

In iOS queste bitmap sono differenziate da un suffisso nel nome file:

  • Nessun suffisso per dispositivi DPI 160 (1 pixel per l'unità indipendente dal dispositivo)
  • Suffisso '@2x' per dispositivi DPI 320 (da 2 pixel a DIU)
  • Suffisso '@3x' per dispositivi DPI 480 (da 3 pixel a DIU)

Una bitmap che deve essere visualizzata come quadrato di un pollice esiste in tre versioni:

  • MyImage.jpg al quadrato di 160 pixel
  • MyImage@2x.jpg a 320 pixel quadrati
  • MyImage@3x.jpg a 480 pixel quadrati

Il programma fa riferimento a questa bitmap come MyImage.jpg, ma la versione corretta viene recuperata in fase di esecuzione in base alla risoluzione dello schermo. Quando non è vincolata, la bitmap eseguirà sempre il rendering a 160 unità indipendenti dal dispositivo.

Per Android, le bitmap vengono archiviate in varie sottocartelle della cartella Resources :

  • drawable-ldpi (dpi basso) per 120 dispositivi DPI (da 0,75 pixel a DIU)
  • drawable-mdpi (medio) per dispositivi DPI da 160 pixel (da 1 pixel a DIU)
  • drawable-hdpi (alta) per dispositivi DPI 240 (da 1,5 pixel a DIU)
  • drawable-xhdpi (extra high) per dispositivi DPI 320 (da 2 pixel a DIU)
  • drawable-xxhdpi (extra high) per dispositivi DPI 480 (da 3 pixel a DIU)
  • drawable-xxxhdpi (tre alti aggiuntivi) per 640 dispositivi DPI (da 4 pixel a DIU)

Per eseguire il rendering di una bitmap a un pollice quadrato, le varie versioni della bitmap avranno lo stesso nome ma una dimensione diversa e verranno archiviate in queste cartelle:

  • drawable-ldpi/MyImage.jpg a 120 pixel quadrati
  • drawable-mdpi/MyImage.jpg a 160 pixel quadrati
  • drawable-hdpi/MyImage.jpg a 240 pixel quadrati
  • drawable-xhdpi/MyImage.jpg a 320 pixel quadrati
  • drawable-xxhdpi/MyImage.jpg a 480 pixel quadrati
  • drawable-xxxhdpi/MyImage.jpg a 640 pixel quadrati

La bitmap eseguirà sempre il rendering a 160 unità indipendenti dal dispositivo. Il modello di soluzione standard Xamarin.Forms include solo le cartelle hdpi, xhdpi e xxhdpi.

Il progetto UWP supporta uno schema di denominazione bitmap costituito da un fattore di ridimensionamento in pixel per unità indipendente dal dispositivo come percentuale, ad esempio:

  • MyImage.scale-200.jpg al quadrato di 320 pixel

Sono valide solo alcune percentuali. I programmi di esempio per questo libro includono solo immagini con suffissi scale-200, ma i modelli di soluzione correnti Xamarin.Forms includono scale-100, scale-125, scale-150 e scale-400.

Quando si aggiungono bitmap ai progetti della piattaforma, l'azione di compilazione deve essere:

  • iOS: BundleResource
  • Android: AndroidResource
  • UWP: Contenuto

L'esempio ImageTap crea due oggetti simili a un pulsante costituiti da Image elementi con un TapGestureRecognizer oggetto installato. È previsto che gli oggetti siano quadrati di un pollice. La Source proprietà di Image viene impostata usando OnPlatform gli oggetti e On per fare riferimento a nomi di file potenzialmente diversi nelle piattaforme. Le immagini bitmap includono numeri che indicano le dimensioni dei pixel, in modo da poter vedere quali dimensioni bitmap vengono recuperate e sottoposte a rendering.

Barre degli strumenti e relative icone

Uno degli usi principali delle bitmap specifiche della piattaforma è la Xamarin.Forms barra degli strumenti, che viene costruita aggiungendo ToolbarItem oggetti alla ToolbarItems raccolta definita da Page. ToobarItem deriva da MenuItem cui eredita alcune proprietà.

Le proprietà più importanti ToolbarItem sono:

  • Text per il testo che potrebbe apparire a seconda della piattaforma e Order
  • Icon di tipo FileImageSource per l'immagine che potrebbe apparire a seconda della piattaforma e Order
  • Order di tipo ToolbarItemOrder, un'enumerazione con tre membri, Default, Primarye Secondary.

Il numero di Primary elementi deve essere limitato a tre o quattro. È consigliabile includere un'impostazione Text per tutti gli elementi. Per la maggior parte delle piattaforme, solo gli Primary elementi richiedono un ma Icon Windows 8.1 richiede un per Icon tutti gli elementi. Le icone devono essere 32 unità indipendenti dal dispositivo al quadrato. Il FileImageSource tipo indica che sono specifici della piattaforma.

L'oggetto ToolbarItem genera un Clicked evento quando viene toccato, in modo analogo a un oggetto Button. ToolbarItem supporta Command anche le proprietà e CommandParameter spesso usate in connessione con MVVM. (Vedere Capitolo 18, MVVM).

Sia iOS che Android richiedono che una pagina che visualizzi una barra degli strumenti sia una NavigationPage o una pagina a cui si accede da un oggetto NavigationPage. Il programma ToolbarDemo imposta la MainPage proprietà della relativa App classe sul NavigationPage costruttore con un ContentPage argomento e illustra la costruzione e il gestore eventi di una barra degli strumenti.

Immagini dei pulsanti

È anche possibile usare bitmap specifiche della piattaforma per impostare la proprietà di Button su una bitmap di 32 unità indipendenti dal dispositivo, come illustrato dall'esempio ButtonImage.Image

Nota

L'uso delle immagini nei pulsanti è stato migliorato. Vedere Uso di bitmap con pulsanti.