Cara Membuat Griedvew Di Android (pertemuan 5.1) tanggal 23 november 2014

Gridview adalah komponen utama di android selain dari Listview. Gridview dan listview mempunyai model yang sama. Perbedaannya terletak pada layoutnya saja. Kali ini, saya akan menjelaskan teknik membuat gridview dengan contoh negara. Hah negara lagi? Aplikasi ini akan menampilkan bendera 4 negara (contoh datanya cuma 4 ) dan saat bendera di klik, maka akan menampilkan halaman wikipedia dari negara tersebut.

Tampilan Grid

Kiri:tampilan grid negara, kanan: tampilan wiki negara indonesia

Untuk membuat aplikasi ini kita membutuhkan 3 file XML dan 3 file java.

1. grid_item.xml dan GVCustomAdapter.java bertanggung jawab untuk menampilkan data. kedalam gridview.
2. activity_gird_view.xml dan GridViewActivity menampung gridItem dan menambahkan onclickListener di Grid
3. activity_wiki.xml dan WikiActivity, merupakan komponen WebView untuk menampilkan halaman wiki dari wikipedia.org.
   

   Bagian CustomAdapter

   grid_item.xml

   ?

   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

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:orientation="vertical"     android:padding="5dp" >       <ImageView         android:id="@+id/imageView"         android:layout_width="50dp"         android:layout_height="50dp"         android:layout_marginRight="10dp"         android:src="@drawable/ic_launcher" >     </ImageView>       <TextView         android:id="@+id/textView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="5dp"         android:layout_gravity="center"         android:textSize="15sp" >     </TextView>   </LinearLayout>

   Perhatikan bahwa grid_item.xml terdiri dari 2 komponen yaitu imageView untuk menampung ikon bendera dan textview untuk menampung nama negara.
   

   Snipet code GVCustomAdapter.java

   Potongan dari adapter. Perhatikan disini, kita tidak mempunyai model data secara terpisah. Data di hardcode kedalam Adapter. Cara ini kurang bagus sebenarnya. Yang lebih bagus anda buat dulu modelnya lalu di panggil di adapter, seperti tutorial sebelumnya tentang customListview. Kode ini cocok untuk data yang sedikit dan statis, untuk data dinamis dari SQLite atau Webservice, silahkan disesuaikan sendiri (atau tunggu tutorialnya kalau saya sempet buat :).
   
   ?

   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

   @Override   public View getView(int position, View convertView, ViewGroup parent) {     View row = convertView;       if (row == null) {       LayoutInflater inflater = ((Activity) context).getLayoutInflater();       row = inflater.inflate(R.layout.grid_item, parent, false);         TextView textViewTitle = (TextView) row.findViewById(R.id.textView);       ImageView imageViewIte = (ImageView) row           .findViewById(R.id.imageView);       switch (position) {       case 0:         textViewTitle.setText("Indonesia");         imageViewIte.setImageResource(R.drawable.indonesia);         break;       case 1:         textViewTitle.setText("Saudi Arabia");         imageViewIte.setImageResource(R.drawable.saudi);         break;       case 2:         textViewTitle.setText("China");         imageViewIte.setImageResource(R.drawable.china);         break;       case 3:         textViewTitle.setText("Amerika serikat");         imageViewIte.setImageResource(R.drawable.us);         break;         }       }

   Bagian GridViewActivity

   Bagian ini akan menampilkan data grid kelayar.
   
   ?

   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

   ublic class GridViewActivity extends Activity {     GridView gridView;   GVCustomAdapter grisViewCustomeAdapter;     @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_grid_view);     setTitle("Grid Negara");     gridView = (GridView) findViewById(R.id.gridViewCustom);     // Create the Custom Adapter Object     grisViewCustomeAdapter = new GVCustomAdapter(this);     // Set the Adapter to GridView     gridView.setAdapter(grisViewCustomeAdapter);       // Handling touch/click Event on GridView Item     gridView.setOnItemClickListener(new OnItemClickListener() {       @Override       public void onItemClick(AdapterView<?> arg0, View arg1, int posisi,           long arg3) {         Intent intent = new Intent(getApplicationContext(),             WikiActivity.class);         //posisi negara         intent.putExtra("posisi", posisi);         startActivity(intent);         }     });     }     }

   Saat icon di klik maka sistem akan memanggil WikiActivity dengan menyertakan posisi array negara. Bagian WikiActivity tidak saya jelaskan karena itu hanya webview biasa.