Xamarin.Forms – Corrigindo a renderização do ImageCell no Android

imagecell-padrao-no-ioscustom-imagecell-renderer-no-android

 

 

 

 

 

 

 

 

 

 

Ao utilizar TableView no Xamarin Forms temos algumas opções de elementos para utilizar, tais como, TextCell, ImageCell, SwitchCell, EntryCell. Estes elementos citados são chamados de built-in cells. Neste artigo, vamos falar um pouco sobre o ImageCell.

Com ImageCell, podemos facilmente adicionar uma imagem e textos. Vejamos uma simples utilização.

 

O problema

Existe algumas diferenças na renderização deste componente entre as plataformas Android e iOS. No Android, quando utilizamos uma imagem muito pequena no ImageCell, esta imagem fica esticada, ocupando todo o container da imagem, que é de 60×60, confira:

imagecell-padrao-no-ios

imagecell-padrao-no-android

 

 

 

 

 

 

 

 

 

 

A solução

Bom, felizmente temos duas soluções para resolver este problema. Vamos explora-las.

Para os exemplos que serão mostrados, foi adicionado uma página contendo um TableView com três opções, cada um contendo uma imagem e um texto descritivo.

 

Solução 1 – Customizando o ViewCell

Uma das maneiras mais fáceis é não utilizar o ImageCell e customizar a célula a ser renderizada, tendo assim flexibilidade para manipular cada elemento adicionado.

Desta forma, conseguimos obter um resultado satisfatório, vejamos:

viewcell-image-label-no-ios

viewcell-image-label-no-android

 

 

 

 

 

 

 

 

 

 

Funcionou para o Android, porém, acredito que essa solução ainda não seja a ideal. Se prestarmos atenção, iremos perceber que na renderização do iOS houve uma pequena diferença. Vamos analisar a renderização do ImageCell padrão e do ViewCell customizado, recém criado.

Note que na imagem da esquerda ( renderizado com ImageCell ) a linha que delimita as células começa a partir do texto, enquanto na imagem da direita ( renderizado com ViewCell customizado ) essa linha começa juntamente com a imagem.

comparacao-imagecell-e-viewcell-no-ios

Isso parece ser um detalhe simples, mas na minha opinião, é uma evidência clara de que não estamos utilizando o padrão que a plataforma propõe. Além disso, em grandes listas, poderemos ter problemas com performance na renderização destas células customizadas. Se você conferir na documentação, a sugestão do Xamarin é sempre utilizar built-in cells, ou seja, ImageCell, TextCell…

Então, o que fazer? Vamos analisar a solução 2 para descobrir.

 

Solução 2 – Implementando ImageCellRenderer no Android

Vamos ter um pouco mais de trabalho para essa implementação, mas iremos garantir um melhor comportamento em ambas as plataformas.

Primeiro, vamos criar nosso próprio custom control do ImageCell:

Em seguida, vamos atualizar o XAML para referenciar o custom control recém criado:

Agora, basta personalizarmos a aparência do nosso custom control na plataforma Android.

O mais importante aqui é a configuração que estamos aplicando para a imagem, localizado na linha 17, onde aplicamos o ScaleType Center. Com isso, já conseguimos realizar a renderização mais adequada no Android:

imagecell-padrao-no-ios

custom-imagecell-renderer-no-android

 

 

 

 

 

 

 

 

 

 

Note que não personalizamos a aparência no iOS, somente especificamos a aparência no Android, portanto, no iOS continua a renderização do ImageCell padrão, que já estava adequada.

Pronto! O que achou? Deixe seu comentário, sendo critica ou sugestão.

Você também pode baixar o projeto e testar cada cenário relatado no post. O repositório é este https://github.com/ionixjunior/XFImageCellApp

Por hoje é só, abraço!

14 ideias sobre “Xamarin.Forms – Corrigindo a renderização do ImageCell no Android

  1. Olá Junior.

    Vim parar aqui no post por engano, estava procurando por outra coisa (referente aos imagecells) e por sorte seu post vem calhar não somente pra resolver o problema que estava ocorrendo como também pra solucionar a questão das imagens no imagecell (coisa que eu ainda não estava tentando solucionar). Valeu, muito bom o post , bem detalhado e fácil de entender.

    • Olá Brian,

      Muito obrigado! Essa questão dos ImageCells sempre tive dúvidas quando iniciei o desenvolvimento com Xamarin.Forms, então, comecei a tentar resolver e acabei criando este post para compartilhar a solução com outros desenvolvedores.

      Obrigado pelo feedback. Fico a disposição para dúvidas e/ou sugestões.

    • Olá, as imagens contidas neste exemplo são de 20×20. Você pode encontra-las nas pastas iOS/Resources e Droid/Resources/drawable. Neste exemplo, cada plataforma tem as suas próprias imagens.

  2. Muito obrigado pela rápida resposta.

    Estou tentanto implementar a solução 1, num Menu FlyOut, mas não tou conseguindo
    fazer os textos ficarem alinhados. porque minhas imagens tÊm tamanhos diferentes. Sabe alguma forma de conseguir isso.
    Thnks

    • Na minha opinião, seria mais adequado você padronizar o tamanho das imagens que utiliza. Então, se vai utilizar as imagens em um menu flyout, estabeleça um padrão de tamanho para as imagens e crie-as, sem fazer quaisquer tratamentos na tela do app.

      Mas se isso não for possível, você pode especificar no objeto Image o atributo HeightRequest. Veja branch dev2-imagens-desproporcionais. Existem as imagens padrão 20×20 e adicionei mais 2 com tamanhos diferentes. Então, nessas imagens com tamanhos diferentes, você pode declarar o atributo HeightRequest especificando que a imagem será renderizada com altura 20. Assim você resolve o problema dos textos ficarem desalinhados.

  3. Ione, parabéns pelo artigo, muito útil para mim. 😉

    Uma coisa, pode me dar “o caminho das pedras” de como eu poderia fazer para usar uma ImageCell, mas com aquele efeito de arredondar as imagens? Sei que poderia facilmente fazer com uma ViewCell, mas seria interessante se eu pudesse usar uma ImageCell para usar todas as características cross-platform dela, simplemente deixando as imagens arredondadas.

    Grande abraço e parabéns mais uma vez.

    • Olá Jonatas, muito obrigado!

      Para essa customização não existe um caminho muito fácil. Será necessário alterar o comportamento do ImageCellRenderer para as imagens ficarem arredondadas no control ImageCell, e isso pode ser um pouco complicado, pois vai exigir conhecimento mais aprofundado em cada uma das plataformas que você quer esse comportamento.

      Como alternativa, eu sugiro que você utilize um ViewCell e faça uso deste plugin para tornar a imagem do seu componente com bordas redondas.

      Assim que eu tiver um tempo, vou ver se isso é muito complicado de implementar e te aviso, caso dê certo.

      Abraço!

    • Jonatas, tem algumas novos recursos sendo desenvolvidos, um deles se chama DataPages. Ainda está em preview, e você precisará instalar os pacotes que ainda são pré-releases para testar.

      Existe um componente chamado ListItemControl, ele faz exatamente o que você quer, veja aqui.

      Tem também um vídeo do Angelo Belchior que mostra como usa alguns recursos do DataPages, sugiro você dar uma conferida, link do vídeo, vale a pena.

      Espero ter ajudado!

Deixe uma resposta

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