Menampilkan Gambar dengan Menggunakan 'ImageSwitcher'

Latihan sebelumnya menampilkan gambar-gambar dengan menggunakan 'Gallery' dan 'ImageView' adalah untuk menampilkan beberapa gambar dan bila salah satu dipilih, gambar tersebut akan ditampilkan di dalam 'ImageView'. Tetapi, kadang-kadang kita ingin gambar yang dipilih di dalam 'Gallery' bisa muncul lebih menarik mirip transisi animasi dan tidak muncul tiba-tiba dan kelihatan kasar. Untuk hal seperti ini kita bisa menggunakan 'ImageSwitcher' bersama dengan 'Gallery".

Contoh latihan menampilkan gambar-gambar dengan menggunakan 'ImageSwitcher':

File xml layout: activity_main.xml:

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

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Gambar-gambar di San Francisco" /> 

<Gallery
android:id="@+id/gallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> 

<ImageSwitcher
android:id="@+id/switcher1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" /> 

</LinearLayout>

Selanjutnya, klik kanan pada folder "res/values/" dan pilih "New->File". Beri nama file tersebut attrs.xml. Kemudian di dalam file attrs.xml tersebut tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Gallery1">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>

Kemudian siapkan beberapa image/gambar dan beri nama pic1.png, pic2.png, dan seterusnya. Kemudian copy dan paste (atau drag-and-drop) semua gambar ke folder "res/drawable". 

Catatan:

Untuk memastikan bahwa ukuran gambar sesuai dengan layar, kita perlu memastikan bahwa kita punya banyak versi gambar sesuai dengan folder "drawable" untuk masing-masing ukuran layar. Untuk latihan ini akan diabaikan, dan hanya menggunakan salah satu jenis ukuran resolusi layar saja.

File java: MainActivity.java:

package com.example.imageswitcher; 

import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends AppCompatActivity implements ViewFactory { 

//--gambar yang akan ditampilkan--
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
}; 

private ImageSwitcher imageSwitcher; 

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
imageSwitcher.setFactory(this);
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out)); 

Gallery gallery = (Gallery) findViewById(R.id.gallery1);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView parent, View v, int position, long id)
{
imageSwitcher.setImageResource(imageIDs[position]);
}
});
} 

public View makeView()
{
ImageView imageView = new ImageView(this);
imageView.setBackgroundColor(0xFF000000);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
return imageView;
} 

public class ImageAdapter extends BaseAdapter
{
private Context context;
private int itemBackground;
public ImageAdapter(Context c)
{
context = c;
//--membuat setting style--
TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
} 

//--return jumlah gambar
public int getCount()
{
return imageIDs.length;
} 

//--return item
public Object getItem(int position)
{
return position;
} 

//--return ID item--
public long getItemId(int position)
{
return position;
} 

//--return ImageView--
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView = new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150,120));
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}
}

Jalankan app tersebut di emulator Android Studio. Hasilnya lihat seperti gambar di bawah:

Hasil tampilan menggunakan
'ImageSwitcher' di emulator

Penjelasan

Hal pertama yang perlu dicatat dalam contoh latihan ini adalah bahwa 'MainActivity' tidak hanya menerapkan 'extends AppCompatActivity' tetapi juga menambahkab 'implements ViewFactory'. Untuk menggunakan 'ImageSwitcher, kita perlu mengimplementasikan 'interface ViewFactory' yang berfungsi untuk membuat tampilan yang menggunakan 'ImageSwitcher'. Untuk itu, kita perlu mengimplementasikan method 'makeView()':

public View makeView()
{
ImageView imageView = new ImageView(this); 

imageView.setBackgroundColor(0xFF000000);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); 

return imageView;
}

Method tersebut akan membuat 'View' baru untuk ditambahkan ke 'ImageSwitcher' dimana dalam hal ini adalah 'ImageView'.

Seperti pada contoh latihan sebelumnya tentang membuat 'Gallery', kita juga perlu mengimplementasikan class 'ImageAdapter' sehingga bisa mengikatkan 'Gallery' dan 'ImageView'.

Di dalam method 'onCreate()', kita mendapatkan acuan ke view 'ImageSwitcher' dan menentukan animasinya, bagaimana gambar-gambar akan tampak 'fade-in' dan 'fade-out'. Terakhir, ketika suatu gambar dipilih dari view 'Gallery', gambar tersebut ditampilkan di dalam view 'ImageSwitcher' seperti berikut:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 

imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
imageSwitcher.setFactory(this);
imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));
Gallery gallery = (Gallery) findViewById(R.id.gallery1);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView parent, View v, int position, long id)
{
imageSwitcher.setImageResource(imageIDs[position]);
}
});
}

Dalam contoh latihan ini, ketika gambar dipilih di dalam view 'Gallery', gambar tersebut akan muncul secara 'fade-in'. Ketika gambar berikutnya dipilih, gambar yang saat itu hilang secara 'fade-out'. Bila kita ingin menggeser masuk gambar dari kiri dan menggeser keluar ke kanan ketika gambar dipilih, kita perlu mencoba animasi berikut di bawah ini:

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left));
imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right));