การทำ GridView บน Android แบบง่ายๆ

Font Credit: http://fontfabric.com/nexa-free-font/

วันนี้ขอนำเสนอตัวอย่าง Layout รูปแบบหนึ่งที่เป็นที่นิยมไม่แพ้ ListView เลย นั่นก็คือ GridView นั่นเอง ตัวอย่างของ GridView หน้าตาประมาณนี้

รูปจาก http://developer.android.com/

วิธีการสร้าง GridView

วิธีการสร้าง GridView นั้น ขั้นตอนการสร้างต่างๆ เหมือนกับการสร้าง ListView เลย หากใครเคยสร้าง ListView ต้องบอกว่าการทำ GridView นั้นง่ายมากๆครับ ขั้นตอนการทำ ไล่ไปทีละ Step ก็มีดังนี้ครับ

1. สร้าง GridView ไว้ในไฟล์ activity_main.xml
2. setAdapter() ให้กับ GridView
3. สร้าง CustomAdapter โดยทำการ extends BaseAdapter

Step 1: สร้าง GridView

เริ่มแรกเลย ก็ให้เปิดไฟล์ res/layout/activity_main.xml จากนั้นก็สร้างแท็ก GridView ขึ้นมา ดังนี้

1
<?xml version="1.0" encoding="utf-8"?>
2
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
3
          android:id="@+id/gridview"
4
          android:layout_width="match_parent"
5
          android:layout_height="match_parent"
6
          android:columnWidth="120dp"
7
          android:numColumns="auto_fit"
8
          android:verticalSpacing="4dp"
9
          android:horizontalSpacing="4dp"
10
          android:stretchMode="columnWidth"
11
          android:gravity="center" />

• columnWidth : คือความกว้างของ GridView มีขนาด 90dp
• numColumns : คือจำนวน Column ของ GridView ใช้ auto_fit คือจำนวนจะอ้างอิงตามหน้าจอ ยิ่งจอกว้าง Column ก็จะเยอะตาม
• verticalSpacing, horizontalSpacing : ช่องว่างระหว่างแนวตั้ง แนวนอน ของ GridView
• stretchMode : ควบคุมให้ไอเท็มใน GridView หากมีที่ว่างให้ยืดขยายจนเต็ม ความกว้างของ Column

Step 2: setAdapter ให้กับ GridView

ขั้นตอนนี้จะทำการตั้งค่าให้กับ GridView ที่ประกาศไว้ในไฟล์เลเอาท์ โดยการเปิดคลาส MainActivity.java ขึ้นมา แก้ไขเมธอด onCreate() ดังนี้

1
package com.devahoy.sample.gridview;
2

3
import android.os.Bundle;
4
import android.support.v7.app.ActionBarActivity;
5
import android.view.View;
6
import android.widget.AdapterView;
7
import android.widget.AdapterView.OnItemClickListener;
8
import android.widget.GridView;
9
import android.widget.Toast;
10

11

12
public class MainActivity extends ActionBarActivity {
13

14
    @Override
15
    protected void onCreate(Bundle savedInstanceState) {
16
        super.onCreate(savedInstanceState);
17
        setContentView(R.layout.activity_main);
18

19
        GridView gridview = (GridView) findViewById(R.id.gridview);
20
        gridview.setAdapter(new CustomAdapter(this));
21

22

23
        gridview.setOnItemClickListener(new OnItemClickListener() {
24
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
25
                Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
26
            }
27
        });
28
    }
29
}

โค๊ดจะยัง error อยู่ เนื่องจากยังไม่ได้สร้างคลาส CustomAdapter นะครับ

โค๊ดด้านบนไม่มีอะไร แค่ทำการเชื่อม GridView ในโค๊ดจาวากับที่ประกาศไว้ในเลเอาท์ จากนั้นก็ใช้ setAdapter() โดยใช้ CustomAdapter ซึ่งตัวนี้จะเป็นตัวที่เอาไว้แสดงเนื้อหา เหมือนกับการทำ ListView เลย สุดท้าย ก็ใช้ setOnItemClickListener() เพื่อโชว์ข้อความเมื่อกดที่ GridView

Step 3: สร้าง CustomAdapter

ในส่วนนี้จะเป็นการแสดงรูปภาพด้วย GridView แต่ว่าผมขี้เกียจหาไฟล์รูปภาพมาหลายๆภาพ ก็เลยเอามันเป็นรูปเดียวไปเลยละกันครับ เพราะฉะนั้น ก็จะใช้ไฟล์รูปภาพ chai.png ซึ่งก็คือรูปของผมเอง ส่วนใครจะใช้รูปอื่น ก็ตามสะดวกครับ แล้วเซฟไว้ใน res/drawable หรือ res/drawable-hdpi ก็ได้

ทำการสร้างคลาส CustomAdapter ขึ้นมา แล้วทำการ extends BaseAdapter ดังนี้

1
package com.devahoy.sample.gridview;
2

3
import android.content.Context;
4
import android.view.View;
5
import android.view.ViewGroup;
6
import android.widget.BaseAdapter;
7
import android.widget.GridView;
8
import android.widget.ImageView;
9

10
public class CustomAdapter extends BaseAdapter {
11
    private Context mContext;
12

13
    public CustomAdapter(Context context) {
14
        mContext = context;
15
    }
16

17
    public int getCount() {
18
        return 24;
19
    }
20

21
    public Object getItem(int position) {
22
        return null;
23
    }
24

25
    public long getItemId(int position) {
26
        return 0;
27
    }
28

29
    public View getView(int position, View convertView, ViewGroup parent) {
30
        ImageView imageView;
31

32
        if (convertView == null) {
33
            imageView = new ImageView(mContext);
34
            imageView.setLayoutParams(new GridView.LayoutParams(
35
                    ViewGroup.LayoutParams.MATCH_PARENT, 200));
36
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
37
            imageView.setPadding(4, 4, 4, 4);
38
        } else {
39
            imageView = (ImageView) convertView;
40
        }
41

42
        imageView.setImageResource(R.drawable.chai);
43
        return imageView;
44
    }
45

46
}

จากข้างบน ผมให้มันโชว์ GridView ทั้งหมด 24 รูป โดยใช้ getCount() ส่วนในเมธอด getView() ก็คือการสร้าง ImageView ขึ้นมา (ที่จริงใช้สร้างเป็น layout xml แล้วข้างในเป็น ImageView แล้วถึงใช้ findViewById ก็ได้เหมือนกัน) แต่วิธีนี้คือการสร้าง ImageView ในโค๊ดจาวาเลย setLayoutParams(width, height) มันก็เหมือนกับการประกาศ layout_width และ layout_height ในไฟล์ xml เลยครับ ซึ่งผมกำหนด width เป็น match_parent และ height เท่ากับ 200dp ส่วน setScaleType() ก็มีค่าเท่ากับ android:scaleType="fitXY"

สุดท้าย เมื่อทดสอบรันโปรแกรม ผลที่ได้จะเป็นดังนี้

ฝากไว้ไปคิดนิดนึง สำหรับผู้ที่เข้ามาอ่านทุกท่านครับ บทความนี้ก็แสดงวิธีการใช้ GridView ไปแล้ว แต่ว่ามันยังไม่สมบูรณ์คือ มันมีแค่รูปเดียวเอง ก็เลยอยากฝากไว้ไปลอง ให้มันแสดงรูปหลายๆรูปหน่อยครับ (ใบ้ให้นิดนึงว่า รูปเซฟไว้ใน res/drawable แล้วก็เก็บ รูปแต่ละรูปไว้ใน array ครับ)

เดี๋ยวบทความต่อไป ผมจะนำมาประยุกต์กับการใช้ GridView + โหลดรูปจาก URI กันครับ