Resumo do Capítulo 13. Bitmaps
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
, incluindoMemoryStream
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 umUri
objeto definido como suaUri
propriedadeFileImageSource
para acessar um bitmap armazenado em um projeto de aplicativo de plataforma com base em uma pasta e caminho de arquivo definido para suaFile
propriedadeStreamImageSource
para carregar um bitmap usando um objeto .NETStream
especificado retornando umStream
de umFunc
conjunto para suaStream
propriedade
Como alternativa (e mais comumente) você pode usar os seguintes métodos estáticos da classe, todos os ImageSource
quais retornam ImageSource
objetos:
ImageSource.FromUri
para acessar um bitmap pela Web com base em umUri
objetoImageSource.FromResource
para acessar um bitmap armazenado como um recurso incorporado na PCL do aplicativo;ImageSource.FromResource
ouImageSource.FromResource
para acessar um bitmap em outro assembly de origemImageSource.FromFile
Para acessar um bitmap de um projeto de aplicativo de plataformaImageSource.FromStream
para carregar um bitmap com base em umStream
objeto
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.FromUri
o . 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çãoAspectFill
: 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:
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 MemoryStream
arquivo . 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:
- a
Icon
propriedade deMenuItem
- a
Icon
propriedade deToolbarItem
- a
Image
propriedade deButton
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:
Text
para texto que pode aparecer dependendo da plataforma eOrder
Icon
do tipoFileImageSource
para a imagem que pode aparecer dependendo da plataforma eOrder
Order
do tipoToolbarItemOrder
, uma enumeração com três membros,Default
,Primary
eSecondary
.
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 NavigationPage
arquivo . 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 quadradas, conforme demonstrado pelo exemplo ButtonImage .
Observação
O uso de imagens em botões foi aprimorado. Consulte Usando bitmaps com botões.