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.

Gridlayout

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

   ?

   source code

   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

   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

   ?

   source code

   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

   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();     } }