Xamarin 4 Party

Usando imagens no seu app com Xamarin.Forms

Olá pessoal,

 

Hoje vamos falar um pouco mais sobre o uso de imagens em nosso app com Xamarin.

 

Como todos nós sabemos o Xamarin gera aplicações nativas cross-plataform e se tratando de imagens nos vem outro desafio do desenvolvimento mobile que é atender a dispositivos de diversos tamanhos e resoluções das telas. Neste post vamos ver a forma de uso e como as imagens são tratadas em cada plataforma. Esses tratamentos são necessário pois o sistema operacional do dispositivo irá identificar o arquivo adequado para aquele aparelho sem que o desenvolver tenha que intervir nessa decisão.

Vamos começar!

No Android as imagens são armazenadas na pasta Resources separadas em subpastas por tamanho e densidades; small, normal, large, e xlarge. Deve-se verificar o tamanho e resolução da imagem para cada tela. Abaixo um detalhamento sobre a pasta e a resolução da imagem:

 

Pasta Tamanho Tamanho da tela Densidade
Resources/Drawable Small 426dp x 320dp mdpi

 

Resources/Drawable-hdpi Normal 470dp x 320dp hdpi
Resources/Drawable-xhdpi Large 640dp x 480dp xhdpi
Resources/Drawable-xxhdpi xlarge 960dp x 720dp xxhdpi

 

imagens_androidNo IOS as imagens são armazenadas na pasta Resources, mas o tratamento de resolução é dado a partir do nome do arquivo.

 

Para os primeiros dispositivos iPhone e iPodTouch a resolução era 320 x 480 pixels e o arquivo de imagem deve ser nomeado como “nomeDaImagem.png“. Com a introdução das telas Retina o nome deverá ser “nomeDaImage@2x.png“ onde a resolução da imagem deve ser 2 vezes a resolução da primeira, e no caso da tela HD o nome do arquivo deverá ser “nomeDaImagem@3x.png“, onde a resolução da imagem deve ser 3 vezes a resolução da primeira.

imagens_ios

Para Windows Phone as imagens são armazenadas na raiz do projeto configuradas com Build Action igual a Content.

 

Agora vamos ver como utilizar essas imagens no nosso projeto Xamarin.Forms.

Temos três possibilidades para usarmos imagens.

 

Imagens locais, que são as imagens tratadas como vimos anteriormente, que são tratadas para suas devidas plataformas.

A sintaxe para se utilizar essas imagem está como a imagem abaixo.

imagem_abordagem_0

A propriedade Source recebe uma string como o nome do arquivo a ser utilizado. Neste caso também pode ser escrito da seguinte forma:

 

image1.Source = ImageSource.FromFile(“picture.jpg”);

 

Note que não precisei dizer de qual pasta ou para qual tela a imagem será utilizada. O próprio sistema operacional se encarrega dessa ação.

 

Imagens embutidas ao seu projeto.

Nessa caso, as imagens são incorporadas ao meu projeto Class Library ou Shared Library, salvas na raiz do seu projeto. Ao executar o aplicativo ele passa a utilizar a imagem que indico aqui e não a imagem da plataforma. Essas imagens devem estar definidas a propriedade Build Action como EmbeddedResource, clicando com o botão direito sobre a imagem indo até Build Action e seleccionando EmbeddedResource.

 imagens_buildaction

A sintaxe para se utilizar essas imagem está como a imagem abaixo.

 

imagem_abordagem_1

Outra opção é utilizar imagens consumidas da web através de URL válida.

Utilizando a seguinte sintaxe:

imagem_abordagem_2

Neste caso, o cuidado é que a imagem deve estar disponível na url e que sempre que o aplicativo for consumir essa imagem deverá estar conectado.

 

Segue um pequeno projeto utilizando as três formas de trabalhar com imagens, onde criei uma ContentPage e nela adicionei três imagens, cada uma com cada forma descrita.

expor_imagens

 

E esse será o resultado :

 

imagens_exemplo_android imagens_exemplo_ios

 

Mas e você caro leitor, quais suas experiências com o compartilhamento de imagens e os padrões de resolução?  Você ainda ficou com alguma dúvida? Deixe o seu comentário abaixo com críticas, dúvidas e sugestões!

Não esqueça de curtir nossa página do Facebook e assinar nossa newsletter no topo do site

A Studyxnet agora é o braço mineiro da .NET CODERS, se inscreva no meetup
A Studyxnet agora é o braço mineiro da .NET CODERS, se inscreva no meetup clicando no nosso banner
Avalie nosso post

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: