Android Image Gallery (include infinitescroll)

Posted: 5 November 2010 in Mobile, Programming
Tag:, , ,

Dalam membuat aplikasi android, terkadang dibutuhkan suatu mekanisme untuk menampilkan gambar dalam bentuk yang menarik yaitu berupa galeri gambar secara horizontal yang dapat digeser, sebagai contoh pada gambar berikut :

Android Gallery

Android Gallery

Pada gambar di atas, galeri gambar ditempatkan pada suatu dialog dimana proses pembuatan dialog tidak di bahas pada artikel ini. Untuk membuat tampilan galeri gambar seperti di atas (lingkaran hijau), android menyediakan kelas “Gallery” yang dapat menampilkan koleksi gambar dalam bentuk terkait. Dalam penggunaannya, dikarenakan “Gallery” membutuhkan viewadapter untuk menampilkan kumpulan view (dalam artikel ini view berupa gambar beserta string label) maka kita perlu membuat suatu adapter untuk mendefenisikan penampilan setiap komponen (gambar dan label terkait) di dalam Gallery.

Terkait dengan viewadapter, kita dapat mendefenisikan layout yang akan dipakai oleh kelas viewadapter dalam sebuah file berformat XML (imggalleryitem.xml) dan disimpan di folder terkait (pada IDE Netbeans di /res/layout) dimana contoh bentuk layout yang bersesuaian dengan gambar di atas adalah sebagai berikut :

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget144key"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="5dip"
    android:background="@drawable/border2">
    <ImageSwitcher
            android:id="@+id/imggalleryitemIcon"
            android:inAnimation="@android:anim/fade_in"
            android:outAnimation="@android:anim/fade_out"
            android:layout_width="80px"
            android:layout_height="100px" />
    <TextView
        android:id="@+id/imggalleryitemLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:textStyle="bold"
        android:textSize="12sp"
        android:textColor="#ffffff"
        android:textColorHighlight="#656565">
    </TextView>
</LinearLayout>

Selanjutnya adalah implementasi kelas viewadapter berikut yang bersesuaian dengan gambar di atas dan memakai layout imggalleryitem.xml (menggunakan layoutinflater). Adapun setiap gambar disimpan sebagai instansiasi dari kelas ImageItem yang memiliki atribut icon (gambar drawable) dan label (string)  :

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 *
 * @author parlin144
 */
public class ImageGalleryAdapter extends BaseAdapter {
    private Context mContext;
    private ImageItem[] C;
    private boolean loopInfinite;
    public static class ImageItem {
        private String label;
        private Drawable icon;
        public ImageItem (String _label, Drawable _icon) {
            this.label = _label;
            this.icon = _icon;
        }
        public String getLabel() {
            return label;
        }
        public Drawable getIcon() {
            return icon;
    }
    }
    public static class ViewHolder {
        public ImageView img;
        public TextView text;
    }

    public ImageGalleryAdapter(Context c, ImageItem[] _C){
        this.mContext = c;
        this.C = _C;
        this.loopInfinite = false; // default no infinite looping
    }

    public void setInfiniteLoop (boolean _loopInfinite) {
        this.loopInfinite = _loopInfinite;
    }

    public boolean isInfiniteLoop () {
        return this.loopInfinite;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        if (isInfiniteLoop()) return Integer.MAX_VALUE;
        return getRealSize();
    }

    public int getRealSize() {
        return C.length;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder;
        if (convertView == null) {
            LayoutInflater vi = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = vi.inflate(R.layout.imggalleryitem, null);
            holder = new ViewHolder();
            holder.img = (ImageView) convertView.findViewById(R.id.imggalleryitemIcon);
            holder.text = (TextView) convertView.findViewById(R.id.imggalleryitemLabel);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        ImageItem o = C[getRealPosition(isInfiniteLoop(), position, getRealSize())];
        if (o != null)
        {
            if (holder.text != null) holder.text.setText(o.getLabel());
			if (o.getIcon() != null) holder.img.setImageDrawable(o.getIcon());
        }
        return convertView;
    }

    public static int getRealPosition(boolean isInfinite, int position, int nbElmt){
        if (isInfinite) {
            int tmpPos = position % nbElmt;
            if (tmpPos < 0) tmpPos = tmpPos + nbElmt;
            return tmpPos;
        }
        return position;
    }

    public Object getItem(int arg0) {
        return C[getRealPosition(isInfiniteLoop(), arg0, getRealSize())];
    }

    public long getItemId(int arg0) {
        return getRealPosition(isInfiniteLoop(), arg0, getRealSize());
    }
}

Implementasi viewadapter diatas juga sudah menangani efek infinitescroll (jika diinginkan dengan menggunakan method setInfiniteLoop) dimana jika ketika Gallery nantinya discrolling dan posisi fokus objek ImageItem sudah berada pada elemen terakhir dari Gallery maka selanjutnya akan ditampilkan (fokus) ke posisi elemen pertama kembali. Dengan demikian akan ada kesan bahwa kumpulan ImageItem tidak terbatas jumlahnya.

Setelah viewadapter terdefenisi maka Gallery siap untuk dipakai dalam menampilkan koleksi gambar (array of ImageItem) seperti yang diimplementasikan pada cuplikan kode dari turunan kelas Activity di bawah ini. Dalam hal ini Gallery menggunakan instansiasi kelas ImageGalleryAdapter sebagai view adapternya. Yang perlu diperhatikan adalah bahwa sebelum adapter ImageGalleryAdapter digunakan digunakan maka array ImageItem diinisialisasi terlebih dahulu dengan gambar-gambar dan label-label terkait.

        ImageGalleryAdapter.ImageItem[] OBJ = new ImageGalleryAdapter.ImageItem[12];

        // ...
        // Inisiasi Setiap Resource Gambar beserta labelnya
        // Misal :
        OBJ[1] = new ImageGalleryAdapter.ImageItem("1", Drawable.createFromPath("page1.png"));
        // ...

        if (OBJ != null) {
            Gallery pageGallery = new Gallery(this);
            pageGallery.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
            pageGallery.setSpacing(2);
            pageGallery.setUnselectedAlpha(0.75f);
            pageGallery.setGravity(Gravity.CENTER);
            ImageGalleryAdapter IGA = new ImageGalleryAdapter(this, OBJ);
            pageGallery.setAdapter(IGA);
            pageGallery.setOnItemClickListener(new OnItemClickListener() {
                public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                    // MELAKUKAN AKSI TERTENTU
                }
            });
            LinearLayout galleryImageLayout = new LinearLayout(this));
            galleryImageLayout.setOrientation(LinearLayout.VERTICAL);
            galleryImageLayout.setGravity(Gravity.CENTER);
            galleryImageLayout.addView(pageGallery);
            setContentView(galleryImageLayout);
        }

Selanjutnya property-property layout item-item Gallery (pada file xml) maupun Gallery terkait bisa diatur agar lebih menarik, misalnya untuk menampilkan galeri gambar sebagai berikut :

Another Gallery Template

Another Gallery Template

Another Gallery Style

Another Gallery Style

Komentar
  1. Ren mengatakan:

    Bisa gak minta source code lengkapnya? thx before…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s