Xamarin Android - Exibindo Imagens e dando um Zoom

  Neste artigo vou mostrar como exibir imagens em uma aplicação Xamarin Android e ainda dar um zoom na imagem.

Para exibir imagens em aplicações Xamarin Android podemos usar o Widget ImageView.

Podemos usar a 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 assim:

1- Usar a 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 :

<?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>
 
        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);
        }

 
Main.axml MainActivity.cs

É 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 :

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  em Manage Nuget Packages for Solution..:

Clique na guia Browse e localize o pacote Xamarin.Android.Support.v7.AppCompat e a seguir 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 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.

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.

A seguir 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)

(disse Jesus) 'Todavia digo-vos a verdade, que vos convém que eu vá; porque, se eu não for, o Consolador não virá a vós; mas, quando eu for, vo-lo enviarei.'
João 16:7

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti