Xamarin Android – Exibindo imagens e dando um zoom

Neste artigo vou mostrar como exibir imagens em uma aplicação Xamarin Android e dar um zoom na imagem. Para exibir imagens em aplicações Xamarin Android, podemos usar o ImageView de forma declarativa no código XML, usando o atributo android:src ou podemos fazer isso via código, usando a propriedade SetImageResource.

Para exibir uma imagem com o nome de ImagemDemo.png na pasta drawable. Podemos fazer da seguinte forma:

1- Usar o atributo android:src e exibir a imagem diretamente no arquivo de layout Main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
   
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/demoImageView"
        android:src="@drawable/ImagemDemo"
        android:scaleType="fitCenter"/>
</LinearLayout>

2 – Definir a ImageView e via código atribuir a imagem usando a propriedade SetImageResource na classe MainActivity.cs:

main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">   
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/demoImageView"
        android:scaleType="fitCenter"/>
</LinearLayout>

MainActivity.cs

 protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Main);
            imageView = FindViewById<ImageView>(Resource.Id.demoImageView);
            Drawable bitmap = Resources.GetDrawable(Resource.Drawable.ImageDemo);
            imageView.SetImageDrawable(bitmap);
        }

É muito simples. Podemos usar um componente de terceiros para aplicar um zoom na imagem. Neste exemplo, vamos usar o componente PhotoView para aplicar um efeito de Zoom em um ImageView.

Para mais detalhes sobre o PhotoView, acesse o link:

• https://components.xamarin.com/gettingstarted/photoview

Recursos usados

• Visual Studio 2017 Community

Criando a aplicação Xamarin Android

• Abra o VS 2017 Community e clique em Visual C# -> Android;
• Escolha o template Blank App (Android) e informe o nome Droid_Foto:

A seguir, vamos incluir dois pacotes em nosso projeto:

1. Xamarin.Android.Support.v7.AppCompat
2. Xamarin.PhotoView.Android

No menu Tools, clique em Nuget Packager Manager e a seguir, em Manage Nuget Packages for Solution:

Depois clique na guia Browse e localize o pacote Xamarin.Android.Support.v7.AppCompat, e clique em Install:

Repita o procedimento para o pacote Xamarin.PhotoView.Android.

Abra o arquivo de layout Main.axml na pasta Resources/Layout e inclua o código abaixo :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">
  
<Button
        android:id="@+id/btnMudarImagem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Alterar Imagem"/>
 
 <uk.co.senab.photoview.PhotoView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter" />

</LinearLayout>

Esta página de layout será a página inicial da aplicação apresentando um botão para carregar e alterar a imagem inicial que será apresentada. Antes de prosseguir, inclua duas imagens que deseja exibir na pasta Resources/drawable.

Exibindo imagens e dando um zoom

Para concluir, abra o arquivo MainActivity e inclua o código abaixo:

using Android.App;
using Android.Widget;
using Android.OS;
using UK.CO.Senab.Photoview;
using Android.Graphics.Drawables;
namespace Droid_Foto
{
    [Activity(Label = "Droid_Foto", MainLauncher = true, Icon = "@drawable/icon", Theme ="@style/Theme.AppCompat.Light.NoActionBar")]
    public class MainActivity : Activity
    {
        ImageView imageView;
        PhotoViewAttacher photoViewAttacher;
        Button btnMudarImagem;
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Main);
            imageView = FindViewById<ImageView>(Resource.Id.imageView);
            btnMudarImagem = FindViewById<Button>(Resource.Id.btnMudarImagem);
            Drawable bitmap = Resources.GetDrawable(Resource.Drawable.potw1706a);
            imageView.SetImageDrawable(bitmap);
            photoViewAttacher = new PhotoViewAttacher(imageView);
            btnMudarImagem.Click += BtnMudarImagem_Click;
        }
        private void BtnMudarImagem_Click(object sender, System.EventArgs e)
        {
            var imageView = FindViewById<ImageView>(Resource.Id.imageView);
            Drawable bitmap = Resources.GetDrawable(Resource.Drawable.hubble_friday_05132016);
            imageView.SetImageDrawable(bitmap);
            photoViewAttacher = new PhotoViewAttacher(imageView);
        }
    };
}

Neste código, primeiro exibimos a imagem potw1706a usando o ImageView e o PhotoView e depois, no evento Click do botão de comando, apenas alteramos a imagem usando o mesmo código.

Executando o projeto iremos obter o seguinte resultado:

Primeiro carregamos a imagem inicial, depois clicando duas vezes na imagem damos um zoom. Clicamos no botão para alterar a imagem e depois clicamos duas vezes na imagem para dar um zoom.

Pegue o projeto completo aqui: Droid_Foto.zip (sem as referências).