Tutorial GridView dan ViewPager Android

Gridlayout

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.

Gridlayout
Gridlayout
Tampilan viewpager saat user menggeser gambar ke kanan atau kekiri
Tampilan viewpager saat user menggeser gambar ke kanan atau kekiri

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.

    Author: Candra Adi Putra

    Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

Tinggalin komentar dong!