Tutorial GridView dan ViewPager Android

GridView adalah komponen android yang menampikan data dalam format table yang biasanya terdiri dari beberapa kolom dan baris. GridView di android sering digunakan untuk menampilkan data yang formatnya gambar atau kombinasi gambar dan teks. Dalam tutorial kali ini, saya akan menjelaskan tentang Viewpager.

Loh kok tidak menjelaskan gridview? karena gridview sudah cukup jelas dan tutorial tentang cara membuat gridview sudah sangat banyak, jadi yang saya tekankan ada pada viewpager. Viewpager adalah komponen android yang sering dipakai untuk menampilkan data dalam format full screen dan use bisa berpindah antar data dengan menggeser ke kiri atau kekanan. COntohnya adalah saat kita membuka galeri image.

Tutorial ini sebenarnya adalah pengembangan dari tutorial Gridview yang ada di Androidhive dengan judul Android Gridview layout tutorial. Silahkan membacanya sendiri, dsitu sudah sangat gamblang tentang konsep gridview.

File XML yang dibutuhkan

1. grid_layout.xml, bertanggung jawab data dalam format grid
2. full_image.xml , bertanggung jawab untuk menampilkan gambar full screen
3. viewpager_main.xml, bertanggung jawab untuk mengelola perpindahan halaman.

File Java

1. MainGridActivity.java, menampilkan grid gambar.
2. ImageAdapter.java , mengelola model data dan menampilkannya di gridview.
3. FullPagerActivity.java, menampilkan gambar full screen
4. ViewPagerAdapter.java, mengelola model data dari viewpager agar bisa ditampilan dengan benar.
   

   Kode ViewPagerAdapter.java

   
   package com.candralab.viewpager;
   
   import android.content.Context;
   import android.support.v4.view.PagerAdapter;
   import android.support.v4.view.ViewPager;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.view.ViewGroup;
   import android.widget.ImageView;
   import android.widget.RelativeLayout;
   
   public class ViewPagerAdapter extends PagerAdapter {
   
   	Context context;
   
   	int[] anArray;
   	LayoutInflater inflater;
   
   	public ViewPagerAdapter(Context context, int[] flag) {
   		this.context = context;
   
   		this.anArray = flag;
   	}
   
   	@Override
   	public int getCount() {
   		return anArray.length;
   	}
   
   	@Override
   	public boolean isViewFromObject(View view, Object object) {
   		return view == ((RelativeLayout) object);
   	}
   
   	@Override
   	public Object instantiateItem(ViewGroup container, int position) {
   
   		ImageView img;
   
   		inflater = (LayoutInflater) context
   				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   		View itemView = inflater.inflate(R.layout.full_image, container, false);
   
   		img = (ImageView) itemView.findViewById(R.id.full_image_view);
   
   		img.setImageResource(anArray[position]);
   
   		((ViewPager) container).addView(itemView);
   
   		return itemView;
   	}
   
   	@Override
   	public void destroyItem(ViewGroup container, int position, Object object) {
   		((ViewPager) container).removeView((RelativeLayout) object);
   
   	}
   }
   

   FullPageActivity

   package com.candralab.viewpager;
   
   import android.app.Activity;
   import android.content.Intent;
   import android.os.Bundle;
   import android.support.v4.view.PagerAdapter;
   import android.support.v4.view.ViewPager;
   import android.util.Log;
   import android.view.Menu;
   
   public class FullPagerActivity extends Activity {
   
   	// Declare Variables
   	ViewPager viewPager;
   	PagerAdapter adapter;
   
   	int[] flag;
   
   	@Override
   	public void onCreate(Bundle savedInstanceState) {
   		super.onCreate(savedInstanceState);
   		setContentView(R.layout.viewpager_main);
   
   		Intent i = getIntent();
   		 Integer position = i.getExtras().getInt("id");
   		Log.d("posisi",position.toString());
   		
   		ImageAdapter imageAdapter = new ImageAdapter(this);
   		flag = imageAdapter.wallpaper;
   		
   		viewPager = (ViewPager) findViewById(R.id.pager);
   		adapter = new ViewPagerAdapter(this, flag);
   		viewPager.setAdapter(adapter);
   		
   		viewPager.setCurrentItem(position);
   	}
   	@Override
   	  public void onPause()
   	  {
   	    super.onPause();
   
   	    System.gc();
   	  }
   }
   

   Download source code

   Silahkan download code lengkapnya disini.