Compartilhar via

Resumo do Capítulo 13. Bitmaps

  • Artigo

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 completos.

O Xamarin.FormsImage elemento exibe um bitmap. Todas as Xamarin.Forms plataformas suportam os formatos de arquivo JPEG, PNG, GIF e BMP.

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

  • Pela Web, conforme especificado por um URL
  • Incorporado como um recurso na biblioteca compartilhada
  • Incorporado como um recurso nos projetos de aplicativos da 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 da 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 para um objeto do tipo ImageSource, uma classe abstrata com três derivadas:

  • UriImageSource para acessar um bitmap na 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

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

Não há classe equivalente dos Image.FromResource métodos. A UriImageSource classe é ú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 de plataforma

O projeto WebBitmapCode carrega um bitmap na Web usando ImageSource.FromUri. O Image elemento é definido como a Content propriedade do ContentPage, portanto, é restrito ao tamanho da página. Independentemente do tamanho do bitmap, um elemento restrito Image é esticado até 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. As áreas além do Image 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.

Ajuste e preenchimento

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

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

Recursos incorporados

Você pode adicionar um arquivo de bitmap a uma PCL ou a uma pasta na PCL. Dê a ele uma ação de build de 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 Image como LayoutOptions.Center, o que torna o Image elemento irrestrito. O Image e o bitmap são do mesmo tamanho:

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

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

Mais sobre dimensionamento

Geralmente, é desejável dimensionar bitmaps de forma consistente entre todas as plataformas. Experimentando com 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 uma vertical StackLayout, HeightRequest deve ser evitado.

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

O MadTeaParty exibe o Capítulo 7 de Alice no País das Maravilhas, de Lewis Carroll, com as ilustrações originais de John Tenniel:

Captura de tela tripla da festa do chá louco

Navegando e esperando

O exemplo ImageBrowser permite que o usuário navegue pelas imagens de banco de imagens 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 ser usados HttpClient em vez de WebRequest acessar arquivos pela Internet.

O programa usa um ActivityIndicator para indicar que algo está acontecendo. À medida que cada bitmap é carregado, 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 arquivo baseado 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 suportam o formato de arquivo BMP descompactado, que é fácil de construir em código e depois armazenar em um MemoryStreamarquivo . Essa técnica permite a criação algorítmica BmpMaker de bitmaps em tempo de execução, conforme implementado na classe na biblioteca Xamrin.FormsBook.Toolkit .

O exemplo DiyGradientBitmap "Faça você mesmo" 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 de plataforma já contêm bitmaps para ícones e telas iniciais:

  • No projeto iOS, na pasta Recursos
  • No projeto Android, em subpastas da pasta Resources
  • Nos projetos do Windows, na pasta Ativos (embora as plataformas 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 dispositivos. No tempo de execução, 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:

  • Sem sufixo para dispositivos de 160 DPI (1 pixel para a unidade independente do dispositivo)
  • Sufixo '@2x' para dispositivos de 320 DPI (2 pixels para a DIU)
  • Sufixo '@3x' para dispositivos de 480 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 em 160 pixels quadrados
  • MyImage@2x.jpg em 320 pixels quadrados
  • MyImage@3x.jpg com 480 pixels quadrados

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

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

  • drawable-ldpi (baixo DPI) para dispositivos de 120 DPI (0,75 pixels para a DIU)
  • drawable-mdpi (médio) para dispositivos de 160 DPI (1 pixel para a DIU)
  • drawable-hdpi (alto) para dispositivos de 240 DPI (1,5 pixels para a DIU)
  • drawable-xhdpi (extra alto) para dispositivos de 320 DPI (2 pixels para o DIU)
  • drawable-xxhdpi (extra extra alto) para dispositivos de 480 DPI (3 pixels para a DIU)
  • drawable-xxxhdpi (três altos extras) para dispositivos de 640 DPI (4 pixels para o 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 nestas pastas:

  • drawable-ldpi/MyImage.jpg com 120 pixels quadrados
  • MDPI/MyImage.jpg desenhável com 160 pixels quadrados
  • drawable-hdpi/MyImage.jpg com 240 pixels quadrados
  • drawable-xhdpi/MyImage.jpg com 320 pixels quadrados
  • drawable-xxhdpi/MyImage.jpg com 480 pixels quadrados
  • drawable-xxxhdpi/MyImage.jpg com 640 pixels quadrados

O bitmap sempre será renderizado em 160 unidades independentes de 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 de dispositivo como uma porcentagem, por exemplo:

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

Apenas algumas porcentagens são válidas. Os programas de amostra para este livro incluem apenas imagens com sufixos de escala 200 , mas os modelos de solução atuais Xamarin.Forms incluem escala 100, escala 125, escala 150 e escala 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 em Image elementos com um TapGestureRecognizer instalado. Pretende-se que os objetos tenham uma polegada quadrada. A Source propriedade de Image é definida usando OnPlatform e On objetos 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 bitmap de tamanho é 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 pelo Page. ToobarItem deriva do MenuItem qual herda algumas propriedades.

As propriedades mais importantes ToolbarItem são:

  • Text para texto que pode aparecer dependendo da plataforma e Order
  • Icon do tipo FileImageSource para a imagem que pode aparecer dependendo da plataforma e Order
  • Order do tipo ToolbarItemOrder, uma enumeração com três membros, Default, Primary, e Secondary.

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 itens exigem umIcon, mas o Primary Windows 8.1 requer um Icon para todos os itens. Os ícones devem ter 32 unidades independentes de dispositivo quadradas. O FileImageSource tipo indica que eles são específicos da plataforma.

O ToolbarItem dispara um Clicked evento quando tocado, muito parecido com um Button. ToolbarItem também suporta Command e CommandParameter propriedades frequentemente usadas em conexão com o MVVM. (Veja 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 para oNavigationPage construtor com um ContentPage argumento e demonstra a construção e o manipulador de eventos de uma barra de ferramentas.

Imagens de botões

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 nos botões foi aprimorado. Consulte Uso de bitmaps com botões.