Partager via

Résumé du chapitre 13. Images bitmap

  • Article

Remarque

Ce livre a été publié au printemps 2016 et n’a pas été mis à jour depuis. Il y a beaucoup dans le livre qui reste précieux, mais certains documents sont obsolètes, et certains sujets ne sont plus entièrement corrects ou complets.

L’élément Xamarin.FormsImage affiche une bitmap. Toutes les Xamarin.Forms plateformes prennent en charge les formats de fichiers JPEG, PNG, GIF et BMP.

Les bitmaps Xamarin.Forms proviennent de quatre emplacements :

  • Sur le web, comme spécifié par une URL
  • Incorporé en tant que ressource dans la bibliothèque partagée
  • Incorporé en tant que ressource dans les projets d’application de plateforme
  • À partir de n’importe quel endroit qui peut être référencé par un objet .NET Stream , y compris MemoryStream

Les ressources bitmap de la bibliothèque partagée sont indépendantes de la plateforme, tandis que les ressources bitmap dans les projets de plateforme sont spécifiques à la plateforme.

Remarque

Le texte du livre fait référence à des bibliothèques de classes portables, qui ont été remplacées par des bibliothèques .NET Standard. Tous les exemples de code du livre ont été convertis pour utiliser des bibliothèques .NET standard.

La bitmap est spécifiée en définissant la Source propriété d’un Image objet de type ImageSource, une classe abstraite avec trois dérivés :

  • UriImageSource pour accéder à une bitmap sur le web en fonction d’un Uri objet défini sur sa Uri propriété
  • FileImageSource pour accéder à une bitmap stockée dans un projet d’application de plateforme en fonction d’un dossier et d’un chemin d’accès de fichier défini sur sa File propriété
  • StreamImageSource pour charger une bitmap à l’aide d’un objet .NET Stream spécifié en retournant un Stream élément d’un Func jeu à sa Stream propriété

Vous pouvez également utiliser les méthodes statiques suivantes de la ImageSource classe, qui retournent ImageSource tous les objets :

Il n’existe pas d’équivalent de classe Image.FromResource des méthodes. La UriImageSource classe est utile si vous devez contrôler la mise en cache. La FileImageSource classe est utile en XAML. StreamImageSource est utile pour le chargement asynchrone d’objets Stream , tandis qu’il ImageSource.FromStream est synchrone.

Bitmaps indépendantes de la plateforme

Le projet WebBitmapCode charge une bitmap sur le web à l’aide ImageSource.FromUride . L’élément Image est défini sur la Content propriété du ContentPage, de sorte qu’il est limité à la taille de la page. Quelle que soit la taille de la bitmap, un élément contraint Image est étiré à la taille de son conteneur, et la bitmap est affichée dans sa taille maximale dans l’élément Image tout en conservant les proportions de la bitmap. Les zones de l’au-delà Image de la bitmap peuvent être colorées avec BackgroundColor.

L’exemple WebBitmapXaml est similaire, mais définit simplement la Source propriété sur l’URL. La conversion est gérée par la ImageSourceConverter classe.

Ajuster et remplir

Vous pouvez contrôler la façon dont la bitmap est étirée en définissant la propriété de l’un AspectImage des membres suivants de l’énumération Aspect :

  • AspectFit: respecte les proportions (par défaut)
  • Fill: zone de remplissage, ne respecte pas les proportions
  • AspectFill: remplit la zone, mais respecte les proportions, accomplies en rognant une partie de la bitmap

Ressources incorporées

Vous pouvez ajouter un fichier bitmap à un PCL ou à un dossier dans la bibliothèque PCL. Donnez-lui une action de génération d’EmbeddedResource. L’exemple ResourceBitmapCode montre comment utiliser ImageSource.FromResource pour charger le fichier. Le nom de la ressource passé à la méthode se compose du nom de l’assembly, suivi d’un point, suivi du nom de dossier facultatif et d’un point, suivi du nom de fichier.

Le programme définit les propriétés et les VerticalOptions propriétés de l’élément LayoutOptions.CenterImage sur , ce qui rend l’élément Image nonconstrainé.HorizontalOptions La Image bitmap et la même taille sont les mêmes :

  • Sur iOS et Android, il Image s’agit de la taille de pixels de la bitmap. Il existe un mappage un-à-un entre les pixels bitmap et les pixels d’écran.
  • Sur plateforme Windows universelle, il Image s’agit de la taille de pixels de la bitmap dans les unités indépendantes de l’appareil. Sur la plupart des appareils, chaque pixel bitmap occupe plusieurs pixels d’écran.

L’exemple StackedBitmap place Image une valeur verticale StackLayout en XAML. Une extension de balisage nommée ImageResourceExtension permet de référencer la ressource incorporée en XAML. Cette classe charge uniquement les ressources de l’assembly dans lequel elle se trouve, de sorte qu’elle ne peut pas être placée dans une bibliothèque.

Plus d’informations sur le dimensionnement

Il est souvent souhaitable de dimensionner des bitmaps de manière cohérente entre toutes les plateformes. L’expérience avec StackedBitmap vous permet de définir une WidthRequest valeur sur l’élément Image d’une taille verticale StackLayout pour rendre la taille cohérente entre les plateformes, mais vous ne pouvez réduire que la taille à l’aide de cette technique.

Vous pouvez également définir les HeightRequest tailles d’image de manière cohérente sur les plateformes, mais la largeur contrainte de la bitmap limite la polyvalence de cette technique. Pour une image dans une image verticale StackLayout, HeightRequest doit être évitée.

La meilleure approche consiste à commencer par une bitmap plus large que la largeur du téléphone dans les unités indépendantes de l’appareil et définie WidthRequest sur une largeur souhaitée dans les unités indépendantes de l’appareil. Ceci est illustré dans l’exemple DeviceIndBitmapSize .

Le MadTeaParty affiche le chapitre 7 de Lewis Carroll’s Alice’s Adventures in Wonderland avec les illustrations originales de John Tenniel :

Triple capture d’écran de la fête du thé fou

Navigation et attente

L’exemple ImageBrowser permet à l’utilisateur de parcourir les images stock stockées sur le site web Xamarin. Il utilise la classe .NET WebRequest pour télécharger un fichier JSON avec la liste des bitmaps.

Remarque

Xamarin.Forms les programmes doivent utiliser HttpClient plutôt que WebRequest d’accéder aux fichiers via Internet.

Le programme utilise un ActivityIndicator élément pour indiquer que quelque chose se passe. À mesure que chaque bitmap est chargée, la propriété en lecture seule IsLoading est Imagetrue. La IsLoading propriété est soutenue par une propriété pouvant être liée. Par conséquent, un PropertyChanged événement est déclenché lorsque cette propriété change. Le programme attache un gestionnaire à cet événement et utilise le paramètre actuel pour IsLoaded définir la IsRunning propriété du ActivityIndicator.

Bitmaps de diffusion en continu

La ImageSource.FromStream méthode crée une ImageSource méthode basée sur un .NET Stream. La méthode doit être passée à un Func objet qui retourne un Stream objet.

Accès aux flux

L’exemple Bitmap Flux montre comment utiliser la ImaageSource.FromStream méthode pour charger une bitmap stockée en tant que ressource incorporée et charger une bitmap sur le web.

Génération de bitmaps au moment de l’exécution

Toutes les Xamarin.Forms plateformes prennent en charge le format de fichier BMP non compressé, qui est facile à construire dans le code, puis le stocker dans un MemoryStream. Cette technique permet la création algorithmique de bitmaps au moment de l’exécution, comme implémentée dans la BmpMaker classe dans la bibliothèque Xamrin.FormsBook.Shared Computer Toolkit.

L’exemple DiyGradientBitmap « Do It Yourself » illustre l’utilisation d’une BmpMaker image bitmap avec une image dégradée.

Bitmaps spécifiques à la plateforme

Toutes les Xamarin.Forms plateformes permettent de stocker des bitmaps dans les assemblys d’application de plateforme. Lorsqu’elles sont récupérées par une Xamarin.Forms application, ces bitmaps de plateforme sont de type FileImageSource. Vous les utilisez pour :

Les assemblys de plateforme contiennent déjà des bitmaps pour les icônes et les écrans de démarrage :

  • Dans le projet iOS, dans le dossier Ressources
  • Dans le projet Android, dans les sous-dossiers du dossier Ressources
  • Dans les projets Windows, dans le dossier Ressources (bien que les plateformes Windows ne limitent pas les bitmaps à ce dossier)

L’exemple PlatformBitmaps utilise du code pour afficher une icône à partir des projets d’application de plateforme.

Résolutions bitmap

Toutes les plateformes permettent de stocker plusieurs versions d’images bitmap pour différentes résolutions d’appareils. Au moment de l’exécution, la version appropriée est chargée en fonction de la résolution de l’appareil de l’écran.

Sur iOS, ces bitmaps sont différenciées par un suffixe sur le nom de fichier :

  • Aucun suffixe pour les appareils PPP 160 (1 pixel à l’unité indépendante de l’appareil)
  • Suffixe '@2x' pour 320 appareils PPP (2 pixels au DIU)
  • Suffixe « @3x » pour 480 appareils PPP (3 pixels au DIU)

Une bitmap destinée à être affichée comme carré d’un pouce existerait dans trois versions :

  • MyImage.jpg à 160 pixels carrés
  • MyImage@2x.jpg à 320 pixels carrés
  • MyImage@3x.jpg à 480 pixels carrés

Le programme fait référence à cette bitmap comme MyImage.jpg, mais la version appropriée est récupérée au moment de l’exécution en fonction de la résolution de l’écran. Lorsqu’elle n’est pas contrainte, la bitmap s’affiche toujours à 160 unités indépendantes de l’appareil.

Pour Android, les bitmaps sont stockées dans différents sous-dossiers du dossier Ressources :

  • drawable-ldpi (faible PPP) pour 120 appareils DPI (0,75 pixels au DIU)
  • drawable-mdpi (moyen) pour 160 appareils DPI (1 pixel au DIU)
  • drawable-hdpi (élevé) pour 240 appareils DPI (1,5 pixels au DIU)
  • drawable-xhdpi (extra élevé) pour 320 appareils DPI (2 pixels au DIU)
  • drawable-xxhdpi (extra élevé) pour 480 appareils DPI (3 pixels au DIU)
  • drawable-xxxhdpi (trois hauts supplémentaires) pour 640 appareils DPI (4 pixels au DIU)

Pour qu’une bitmap soit affichée à un pouce carré, les différentes versions de la bitmap auront le même nom, mais une taille différente et seront stockées dans ces dossiers :

  • drawable-ldpi/MyImage.jpg à 120 pixels carrés
  • drawable-mdpi/MyImage.jpg à 160 pixels carrés
  • drawable-hdpi/MyImage.jpg à 240 pixels carrés
  • drawable-xhdpi/MyImage.jpg à 320 pixels carrés
  • drawable-xxhdpi/MyImage.jpg à 480 pixels carrés
  • drawable-xxxhdpi/MyImage.jpg à 640 pixels carrés

La bitmap s’affiche toujours à 160 unités indépendantes de l’appareil. (Le modèle de solution standard Xamarin.Forms inclut uniquement les dossiers hdpi, xhdpi et xxhdpi.)

Le projet UWP prend en charge un schéma d’affectation de noms bitmap qui se compose d’un facteur de mise à l’échelle en pixels par unité indépendante de l’appareil, par exemple :

  • MyImage.scale-200.jpg à 320 pixels carrés

Seuls certains pourcentages sont valides. Les exemples de programmes pour ce livre incluent uniquement des images avec des suffixes scale-200 , mais les modèles de solution actuels Xamarin.Forms incluent scale-100, scale-125, scale-150 et scale-400.

Lorsque vous ajoutez des bitmaps aux projets de plateforme, l’action de génération doit être :

  • iOS : BundleResource
  • Android : AndroidResource
  • UWP : Contenu

L’exemple ImageTap crée deux objets de type bouton composés d’éléments Image avec un TapGestureRecognizer élément installé. Il est prévu que les objets soient carrés d’un pouce. La Source propriété d’est Image définie à l’aide OnPlatform et On les objets pour référencer des noms de fichiers potentiellement différents sur les plateformes. Les images bitmap incluent des nombres indiquant leur taille de pixel. Vous pouvez donc voir quelle taille de bitmap est récupérée et rendue.

Barres d’outils et leurs icônes

L’une des principales utilisations de bitmaps spécifiques à la plateforme est la Xamarin.Forms barre d’outils, qui est construite en ajoutant ToolbarItem des objets à la ToolbarItems collection définie par Page. ToobarItem dérive de MenuItem laquelle il hérite de certaines propriétés.

Les propriétés les plus importantes ToolbarItem sont les suivantes :

  • Text pour le texte qui peut apparaître en fonction de la plateforme et Order
  • Icon de type FileImageSource pour l’image qui peut apparaître en fonction de la plateforme et Order
  • Orderde type ToolbarItemOrder, énumération avec trois membres, DefaultPrimary, et Secondary.

Le nombre d’éléments Primary doit être limité à trois ou quatre. Vous devez inclure un Text paramètre pour tous les éléments. Pour la plupart des plateformes, seuls les Primary éléments nécessitent un Icon élément, mais Windows 8.1 nécessite une Icon pour tous les éléments. Les icônes doivent être 32 unités indépendantes de l’appareil carrées. Le FileImageSource type indique qu’ils sont spécifiques à la plateforme.

Le ToolbarItem déclenchement d’un Clicked événement lorsqu’il est appuyé, comme un Button. ToolbarItem prend également en charge Command et CommandParameter les propriétés souvent utilisées en connexion avec MVVM. (Voir Chapitre 18, MVVM).

IOS et Android nécessitent qu’une page qui affiche une barre d’outils soit une NavigationPage ou une page accédée par un NavigationPage. Le programme ToolbarDemo définit la MainPage propriété de sa App classe sur le NavigationPage constructeur avec un ContentPage argument et illustre la construction et le gestionnaire d’événements d’une barre d’outils.

Images de bouton

Vous pouvez également utiliser des bitmaps spécifiques à la plateforme pour définir la propriété d’une Button bitmap de 32 unités indépendantes de l’appareil, comme illustré par l’exemple ButtonImage.Image

Remarque

L’utilisation d’images sur des boutons a été améliorée. Voir Utiliser des bitmaps avec des boutons.