ANDROID TRANSITION

B. ImageSwitcher

Prinsip kerja Imageswitcher adalah gabungan antara ImageView

dan gallery. Hasil akhir dari project ini adalah menampilkan
gambar dalam bentuk thumbnail, kemudian bila diklik akan
muncul previewnya di bagian bawah.

Perhatikan gambar disamping : Tampilan aplikasi menggunakan

ImageSwitcher

1. Siapkan project baru

Project name ImageSwitcherSimple

Build Target Android 2.2
Aplication name ImageSwitcherSimple
Package name Com.img.switcher
Create Activity ImageSwitcherSimpleActivity
Min SDK version 8

2. Masukkan sejumlah gambar ke folder /res/drawable.

Perhatikan contoh berikut gambar disamping

3. Buat file attr.xml di folder res/values. Kemudian isikan kode

berikut :

<?xml version="1.0" encoding="utf-8"?>

<resources>
<declare-styleable name="Gallery1">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>

4. Buat Layout di main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:orientation="vertical" >

<ImageSwitcher
android:id="@+id/imageSwitcher1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" >
</ImageSwitcher>

<Gallery
android:id="@+id/gallery1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:gravity="center_vertical" />

</RelativeLayout>
 5. Berikut kode bagian activity-nya

package com.img.switcher;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
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.Gallery.LayoutParams;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class ImageSwitcherSimpleActivity extends Activity implements

ViewFactory, OnItemClickListener {
private ImageSwitcher is;
Gallery gall;
Integer[] idGambar = { R.drawable.anjing, R.drawable.gajah,
R.drawable.kucing, R.drawable.kuda, R.drawable.sapi };

/** Called when the activity is first created. */

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
is.setFactory(this);
is.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
is.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
gall = (Gallery) findViewById(R.id.gallery1);
gall.setAdapter(new ImageAdapter(this));
gall.setOnItemClickListener(this);
}

public class ImageAdapter extends BaseAdapter {

private Context context;
private int itemBg;

public ImageAdapter(Context c) {
context = c;

TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBg = a.getResourceId(
R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
}

public int getCount() {

// TODO Auto-generated method stub
return idGambar.length;
}

public Object getItem(int position) {

// TODO Auto-generated method stub
return position;
}
 public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub
ImageView imgView = new ImageView(context);
imgView.setImageResource(idGambar[position]);
imgView.setScaleType(ImageView.ScaleType.FIT_XY);
imgView.setLayoutParams(new Gallery.LayoutParams(150, 120));
imgView.setBackgroundResource(itemBg);

return imgView;
}

public View makeView() {

// TODO Auto-generated method stub
ImageView iv = new ImageView(this);
iv.setBackgroundColor(0xFF000000);
iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
iv.setLayoutParams(new
ImageSwitcher.LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));

return iv;
}

public void onItemClick(AdapterView parent, View v, int posisi, long id) {

// TODO Auto-generated method stub
is.setImageResource(idGambar[posisi]);
}
}

Pembahasan Program

Pada latihan ini kita menggunakan 2 komponen, yaitu Gallery dan Image switcher. Gallery
digunakan untuk menampilkan thumbnail, sedangkan Imageswitcher dipakai untuk menampilkan
preview thumbnail yang diklik.

Thumbnail gallery terdiri dari sejumlah gambar yang berderet. Dalam pemrograman dituliskan
sebagai array bertipe integer seperti berikut ini

Integer[] idGambar = { R.drawable.anjing, R.drawable.gajah,

R.drawable.kucing, R.drawable.kuda, R.drawable.sapi };

Array yang diberi nama idGambar mengambil semua gambar dari folder res/drawable

Perhatikan kode berikut ini

is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
is.setFactory(this);
is.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
is.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
Blok kode diatas adalah blok untuk mengeset widget ImageSwitcher seperti fade_in dan
fade_out. Jadi apabila thumbnail diklik, prewvie akan muncul dengan sedikit animasi fade_in

Perhatikan kode berikut ini

gall = (Gallery) findViewById(R.id.gallery1);

gall.setAdapter(new ImageAdapter(this));
gall.setOnItemClickListener(this);

Kode diatas adalah bagian untuk mengeset gallery. Untuk memasukkan array idGambar tadi,
kita buat inner class bernama ImageAdapter. Kelas ImageAdapter terdapat pada kode
berikut ini

public class ImageAdapter extends BaseAdapter {

private Context context;
private int itemBg;

public ImageAdapter(Context c) {
context = c;

TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBg = a.getResourceId(
R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
}

public int getCount() {

// TODO Auto-generated method stub
return idGambar.length;
}

public Object getItem(int position) {

// TODO Auto-generated method stub
return position;
}

public long getItemId(int position) {

// TODO Auto-generated method stub
return position;
}

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub
ImageView imgView = new ImageView(context);
imgView.setImageResource(idGambar[position]);
imgView.setScaleType(ImageView.ScaleType.FIT_XY);
imgView.setLayoutParams(new Gallery.LayoutParams(150, 120));
imgView.setBackgroundResource(itemBg);

return imgView;
}
}

Dimana Kelas ini akan meng-extends kelas BaseAdapter(), yang memiliki 4 buah method dan
sebuah Constructor Image Adapter seperti yang tertulis pada kode berikut ini

public ImageAdapter(Context c) {
context = c;
TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
itemBg = a.getResourceId(
R.styleable.Gallery1_android_galleryItemBackground, 0);
a.recycle();
}