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:
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:
- Xamarin.Android.Support.v7.AppCompat
- 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).