Resumo do Capítulo 13. Bitmaps

  • Artigo

Baixar exemplo Baixar o exemplo

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou concluídos.

O Xamarin.FormsImage elemento exibe um bitmap. Todas as Xamarin.Forms plataformas dão suporte aos formatos de arquivo JPEG, PNG, GIF e BMP.

Os bitmaps vêm Xamarin.Forms de quatro lugares:

  • Na Web, conforme especificado por uma URL
  • Inserido como um recurso na biblioteca compartilhada
  • Inserido como um recurso nos projetos de aplicativo de plataforma
  • De qualquer lugar que possa ser referenciado por um objeto .NET Stream , incluindo MemoryStream

Os recursos de bitmap na biblioteca compartilhada são independentes de plataforma, enquanto os recursos de bitmap nos projetos de plataforma são específicos da plataforma.

Observação

O texto do livro faz referências a Bibliotecas de Classes Portáteis, que foram substituídas por bibliotecas .NET Standard. Todo o código de exemplo do livro foi convertido para usar bibliotecas padrão do .NET.

O bitmap é especificado definindo a Source propriedade de Image como um objeto do tipo ImageSource, uma classe abstrata com três derivados:

  • UriImageSource para acessar um bitmap pela Web com base em um Uri objeto definido como sua Uri propriedade
  • FileImageSource para acessar um bitmap armazenado em um projeto de aplicativo de plataforma com base em uma pasta e caminho de arquivo definido como sua File propriedade
  • StreamImageSource para carregar um bitmap usando um objeto .NET Stream especificado retornando um Stream de um Func conjunto para sua Stream propriedade

Como alternativa (e mais comumente), você pode usar os seguintes métodos estáticos da ImageSource classe , todos os quais retornam ImageSource objetos:

Não há nenhuma classe equivalente aos Image.FromResource métodos. A UriImageSource classe será útil se você precisar controlar o cache. A FileImageSource classe é útil em XAML. StreamImageSource é útil para o carregamento assíncrono de Stream objetos, enquanto ImageSource.FromStream é síncrono.

Bitmaps independentes da plataforma

O projeto WebBitmapCode carrega um bitmap pela Web usando ImageSource.FromUri. O Image elemento é definido como a Content propriedade do ContentPage, portanto, ele é restrito ao tamanho da página. Independentemente do tamanho do bitmap, um elemento restrito Image é estendido para o tamanho de seu contêiner e o bitmap é exibido em seu tamanho máximo dentro do Image elemento, mantendo a taxa de proporção do bitmap. Áreas do Image além do bitmap podem ser coloridas com BackgroundColor.

O exemplo WebBitmapXaml é semelhante, mas simplesmente define a Source propriedade como a URL. A conversão é tratada pela ImageSourceConverter classe .

Ajustar e preencher

Você pode controlar como o bitmap é estendido definindo a Aspect propriedade do Image para um dos seguintes membros da Aspect enumeração:

  • AspectFit: respeita a taxa de proporção (padrão)
  • Fill: preenche a área, não respeita a taxa de proporção
  • AspectFill: preenche a área, mas respeita a taxa de proporção, realizada pela parte de corte do bitmap

Recursos inseridos

Você pode adicionar um arquivo bitmap a um PCL ou a uma pasta no PCL. Dê a ele uma ação de build do EmbeddedResource. O exemplo ResourceBitmapCode demonstra como usar ImageSource.FromResource para carregar o arquivo. O nome do recurso passado para o método consiste no nome do assembly, seguido por um ponto, seguido pelo nome da pasta opcional e um ponto, seguido pelo nome do arquivo.

O programa define as VerticalOptions propriedades e HorizontalOptions do como LayoutOptions.Center, o Image que torna o Image elemento irrestrito. O Image e o bitmap têm o mesmo tamanho:

  • No iOS e no Android, o Image é o tamanho do pixel do bitmap. Há um mapeamento um-para-um entre pixels de bitmap e pixels de tela.
  • Em Plataforma Universal do Windows, o Image é o tamanho do pixel do bitmap em unidades independentes do dispositivo. Na maioria dos dispositivos, cada pixel de bitmap ocupa vários pixels de tela.

O exemplo StackedBitmap coloca um Image em um vertical StackLayout em XAML. Uma extensão de marcação chamada ImageResourceExtension ajuda a referenciar o recurso inserido no XAML. Essa classe carrega apenas recursos do assembly no qual está localizado, para que não possa ser colocado em uma biblioteca.

Mais informações sobre dimensionamento

Geralmente, é desejável dimensionar bitmaps consistentemente entre todas as plataformas. Ao experimentar StackedBitmap, você pode definir um WidthRequest no Image elemento em uma vertical StackLayout para tornar o tamanho consistente entre as plataformas, mas você só pode reduzir o tamanho usando essa técnica.

Você também pode definir o HeightRequest para tornar os tamanhos de imagem consistentes nas plataformas, mas a largura restrita do bitmap limitará a versatilidade dessa técnica. Para uma imagem em um vertical StackLayout, HeightRequest deve ser evitado.

A melhor abordagem é começar com um bitmap maior que a largura do telefone em unidades independentes do dispositivo e definir WidthRequest como uma largura desejada em unidades independentes do dispositivo. Isso é demonstrado no exemplo DeviceIndBitmapSize .

The MadTeaParty exibe o Capítulo 7 de Alice's Adventures in Wonderland de Lewis Carroll com as ilustrações originais de John Tenniel:

Triple screenshot of mad tea party

Navegação e espera

O exemplo ImageBrowser permite que o usuário navegue por imagens de estoque armazenadas no site do Xamarin. Ele usa a classe .NET WebRequest para baixar um arquivo JSON com a lista de bitmaps.

Observação

Xamarin.Forms os programas devem usar HttpClient em vez de WebRequest para acessar arquivos pela Internet.

O programa usa um ActivityIndicator para indicar que algo está acontecendo. Como cada bitmap está carregando, a propriedade somente IsLoading leitura de Image é true. A IsLoading propriedade é apoiada por uma propriedade associável, portanto, um PropertyChanged evento é acionado quando essa propriedade é alterada. O programa anexa um manipulador a esse evento e usa a configuração atual de IsLoaded para definir a IsRunning propriedade do ActivityIndicator.

Bitmaps de streaming

O ImageSource.FromStream método cria um ImageSource com base em um .NET Stream. O método deve ser passado um Func objeto que retorna um Stream objeto .

Acessando os fluxos

O exemplo BitmapStreams demonstra como usar o ImaageSource.FromStream método para carregar um bitmap armazenado como um recurso inserido e carregar um bitmap na Web.

Gerando bitmaps em tempo de execução

Todas as Xamarin.Forms plataformas dão suporte ao formato de arquivo BMP não compactado, que é fácil de construir no código e, em seguida, armazenar em um MemoryStream. Essa técnica permite a criação algoritmo de bitmaps em runtime, conforme implementado na BmpMaker classe na biblioteca Xamrin.FormsBook.Toolkit .

O exemplo "Do It Yourself" DiyGradientBitmap demonstra o uso de BmpMaker para criar um bitmap com uma imagem de gradiente.

Bitmaps específicos da plataforma

Todas as Xamarin.Forms plataformas permitem armazenar bitmaps nos assemblies de aplicativos de plataforma. Quando recuperados por um Xamarin.Forms aplicativo, esses bitmaps de plataforma são do tipo FileImageSource. Você os usa para:

Os assemblies da plataforma já contêm bitmaps para ícones e telas inicial:

  • No projeto do iOS, na pasta Recursos
  • No projeto android, em subpastas da pasta Recursos
  • Nos projetos do Windows, na pasta Ativos (embora as plataformas do Windows não restrinjam bitmaps a essa pasta)

O exemplo PlatformBitmaps usa código para exibir um ícone dos projetos de aplicativo de plataforma.

Resoluções de bitmap

Todas as plataformas permitem armazenar várias versões de imagens de bitmap para diferentes resoluções de dispositivo. No runtime, a versão adequada é carregada com base na resolução do dispositivo da tela.

No iOS, esses bitmaps são diferenciados por um sufixo no nome do arquivo:

  • Nenhum sufixo para 160 dispositivos DPI (1 pixel para a unidade independente do dispositivo)
  • Sufixo '@2x' para 320 dispositivos DPI (2 pixels para a DIU)
  • Sufixo '@3x' para 480 dispositivos DPI (3 pixels para a DIU)

Um bitmap destinado a ser exibido como um quadrado de uma polegada existiria em três versões:

  • MyImage.jpg a 160 pixels quadrados
  • MyImage@2x.jpg a 320 pixels quadrados
  • MyImage@3x.jpg a 480 pixels quadrados

O programa se referiria a esse bitmap como MyImage.jpg, mas a versão adequada é recuperada em runtime com base na resolução da tela. Quando não treinado, o bitmap sempre será renderizado em 160 unidades independentes do dispositivo.

Para Android, os bitmaps são armazenados em várias subpastas da pasta Recursos :

  • drawable-ldpi (DPI baixo) para 120 dispositivos DPI (0,75 pixels para a DIU)
  • drawable-mdpi (médio) para 160 dispositivos DPI (1 pixel para a DIU)
  • drawable-hdpi (alto) para 240 dispositivos DPI (1,5 pixels para a DIU)
  • drawable-xhdpi (alta extra) para 320 dispositivos DPI (2 pixels para a DIU)
  • drawable-xxhdpi (extra alta) para 480 dispositivos DPI (3 pixels para a DIU)
  • drawable-xxxhdpi (três altas extras) para 640 dispositivos DPI (4 pixels para a DIU)

Para um bitmap destinado a ser renderizado em uma polegada quadrada, as várias versões do bitmap terão o mesmo nome, mas um tamanho diferente, e serão armazenadas nessas pastas:

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

O bitmap sempre será renderizado em 160 unidades independentes do dispositivo. (O modelo de solução padrão Xamarin.Forms inclui apenas as pastas hdpi, xhdpi e xxhdpi.)

O projeto UWP dá suporte a um esquema de nomenclatura de bitmap que consiste em um fator de dimensionamento em pixels por unidade independente do dispositivo como uma porcentagem, por exemplo:

  • MyImage.scale-200.jpg a 320 pixels quadrados

Apenas alguns percentuais são válidos. Os programas de exemplo deste livro incluem apenas imagens com sufixos scale-200 , mas os modelos de solução atuais Xamarin.Forms incluem scale-100, scale-125, scale-150 e scale-400.

Ao adicionar bitmaps aos projetos de plataforma, a Ação de Build deve ser:

  • iOS: BundleResource
  • Android: AndroidResource
  • UWP: Conteúdo

O exemplo ImageTap cria dois objetos semelhantes a botões que consistem Image em elementos com um TapGestureRecognizer instalado. A intenção é que os objetos sejam quadrados de uma polegada. A Source propriedade de Image é definida usando OnPlatform objetos e On para fazer referência a nomes de arquivo potencialmente diferentes nas plataformas. As imagens de bitmap incluem números que indicam seu tamanho de pixel, para que você possa ver qual tamanho o bitmap é recuperado e renderizado.

Barras de ferramentas e seus ícones

Um dos principais usos de bitmaps específicos da plataforma é a Xamarin.Forms barra de ferramentas, que é construída adicionando ToolbarItem objetos à ToolbarItems coleção definida por Page. ToobarItem deriva do MenuItem qual herda algumas propriedades.

As propriedades mais importantes ToolbarItem são:

O número de Primary itens deve ser limitado a três ou quatro. Você deve incluir uma Text configuração para todos os itens. Para a maioria das plataformas, apenas os Primary itens exigem umIcon, mas Windows 8.1 requer um Icon para todos os itens. Os ícones devem ter 32 unidades independentes do dispositivo quadradas. O FileImageSource tipo indica que eles são específicos da plataforma.

O ToolbarItem aciona um Clicked evento quando tocado, assim como um Button. ToolbarItemtambém dá suporte a propriedades e CommandParameter geralmente usadas Command em conexão com o MVVM. (Confira o Capítulo 18, MVVM).

Tanto o iOS quanto o Android exigem que uma página que exibe uma barra de ferramentas seja uma NavigationPage ou uma página navegada por um NavigationPage. O programa ToolbarDemo define a MainPage propriedade de sua App classe como o NavigationPage construtor com um ContentPage argumento e demonstra a construção e o manipulador de eventos de uma barra de ferramentas.

Imagens de botão

Você também pode usar bitmaps específicos da plataforma para definir a Image propriedade de Button como um bitmap de 32 unidades independentes de dispositivo quadrado, conforme demonstrado pelo exemplo ButtonImage .

Observação

O uso de imagens em botões foi aprimorado. Consulte Usando bitmaps com botões.