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 em Xamarin.Forms vêm de quatro lugares:

  • Na Web, conforme especificado por uma URL
  • Incorporado como um recurso na biblioteca compartilhada
  • Incorporado como um recurso nos projetos de aplicativos 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 do .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 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 para 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 classe, todos os ImageSource 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 pela Web usando ImageSource.FromUrio . 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 proporção do bitmap. As áreas além do bitmap podem ser coloridas Image com BackgroundColor.

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

Encaixe e encha

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

  • No iOS e Android, o Image é o tamanho do pixel do bitmap. Há um mapeamento um-para-um entre pixels de bitmap e pixels de tela.
  • Na Plataforma Universal do Windows, o é o Image 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 incorporado em XAML. Essa classe carrega apenas recursos do assembly no qual está localizada, portanto, não pode ser colocada em uma biblioteca.

Saiba mais sobre o dimensionamento

Muitas vezes, é 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 do que a largura do telefone em unidades independentes de dispositivo e definir WidthRequest para uma largura desejada em unidades independentes de dispositivo. Isso é demonstrado no exemplo DeviceIndBitmapSize.

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

Captura de tela tripla da festa do chá louco

Navegando e aguardando

O exemplo ImageBrowser permite que o usuário navegue pelas 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 vinculá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 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 incorporado e para 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, em seguida, armazenar em um MemoryStreamarquivo . Essa técnica permite a criação algorítmica de bitmaps em tempo de execução, conforme implementado na BmpMaker classe na biblioteca Xamrin.FormsBook.Toolkit .

O exemplo DiyGradientBitmap "Faça você mesmo" demonstra o uso de para criar um bitmap com uma imagem de BmpMaker gradiente.

Bitmaps específicos da plataforma

Todas as Xamarin.Forms plataformas permitem armazenar bitmaps nos assemblies de aplicativos da 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 Recursos
  • 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 bitmap para diferentes resoluções de dispositivos. Em 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:

  • Nenhum 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 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 em 480 pixels quadrados

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

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

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

  • Drawable-LDPI/MyImage.jpg em 120 pixels quadrados
  • Drawable-MDPI/MyImage.jpg em 160 pixels quadrados
  • Drawable-HDPI/MyImage.jpg em 240 pixels quadrados
  • Drawable-XHDPI/MyImage.jpg em 320 pixels quadrados
  • Drawable-xxhdpi/MyImage.jpg em 480 pixels quadrados
  • Desenho-xxxhdpi/MyImage.jpg em 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 oferece 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 em 320 pixels quadrados

Apenas algumas porcentagens são válidas. Os programas de exemplo 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 Criação 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 sejam de uma polegada quadrada. A Source propriedade de é definida usando OnPlatform e On objetos para fazer referência a nomes de Image arquivos potencialmente diferentes nas plataformas. As imagens de bitmap incluem números que indicam seu tamanho de pixel, para que você possa ver qual tamanho de 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 pelo 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 itens exigem umIcon, mas o Primary Windows 8.1 requer um Icon para todos os itens. Os ícones devem ser quadrados de 32 unidades independentes do dispositivo. O FileImageSource tipo indica que eles são específicos da plataforma.

O ToolbarItem dispara um Clicked evento quando grampeado, muito parecido com um Button. ToolbarItem também suporta Command e CommandParameter propriedades frequentemente usadas em conexão com 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 NavigationPagearquivo . O programa ToolbarDemo define a MainPage propriedade de sua App classe para oNavigationPageconstrutor 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 quadradas, conforme demonstrado pelo exemplo ButtonImage .

Observação

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