วิธาสร้าง GridView Layout ในแอป Android

ภาพรวม

ตัวอย่างนี้สาธิตการสร้าง GridView แบบ 2 คอลัมน์ พร้อม Custom Adapter เพื่อแสดงรูปภาพและข้อความ คล้ายเมนูแอปพลิเคชันหรือแกลเลอรี่รูปภาพ

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2"
        android:verticalSpacing="8dp"
        android:horizontalSpacing="8dp"
        android:stretchMode="columnWidth"
        android:gravity="center"/>

</RelativeLayout>

ขั้นตอนที่ 3: เพิ่ม Dependency (build.gradle)

dependencies {
    // GridLayout library (ถ้าใช้ GridLayout แทน GridView)
    implementation 'com.android.support:gridlayout-v7:28.0.0'
    
    // สำหรับ RecyclerView (แนะนำให้ใช้แทน GridView ในปัจจุบัน)
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
}

ขั้นตอนที่ 4: สร้าง Layout สำหรับแต่ละ Item (rowitem.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Numbers"
        android:textSize="18sp"
        android:layout_marginTop="8dp"
        android:gravity="center"/>

</LinearLayout>

ขั้นตอนที่ 5: สร้าง Custom Adapter (MainAdapter.java)

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class MainAdapter extends BaseAdapter {

    private final Context context;
    private final String[] numbersInWords;
    private final int[] numberImages;
    private final LayoutInflater layoutInflater;

    public MainAdapter(Context context, String[] numbersInWords, int[] numberImages) {
        this.context = context;
        this.numbersInWords = numbersInWords;
        this.numberImages = numberImages;
        this.layoutInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return numbersInWords.length;
    }

    @Override
    public Object getItem(int position) {
        return numbersInWords[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {
            convertView = layoutInflater.inflate(R.layout.rowitem, parent, false);
            holder = new ViewHolder();
            holder.imageView = convertView.findViewById(R.id.imageView);
            holder.textView = convertView.findViewById(R.id.textView);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageView.setImageResource(numberImages[position]);
        holder.textView.setText(numbersInWords[position]);

        return convertView;
    }

    // ViewHolder Pattern เพื่อประสิทธิภาพ
    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }
}

ขั้นตอนที่ 6: เขียนโค้ด MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private GridView gridView;
    private final String[] numberInWords = {"One", "Two", "Three", "Four", "Five", 
                                            "Six", "Seven", "Eight", "Nine", "Ten"};
    private final int[] numberImages = {R.drawable.one, R.drawable.two, R.drawable.three,
                                        R.drawable.four, R.drawable.five, R.drawable.six,
                                        R.drawable.seven, R.drawable.eight, R.drawable.nine,
                                        R.drawable.ten};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = findViewById(R.id.gridView);
        
        MainAdapter adapter = new MainAdapter(this, numberInWords, numberImages);
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "You clicked: " + numberInWords[position], 
                              Toast.LENGTH_SHORT).show();
            }
        });
    }
}

ขั้นตอนที่ 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

การทดสอบ

เตรียมรูปภาพ one.png ถึง ten.png ใน res/drawable → รันแอป → จะแสดง Grid 2 คอลัมน์ → กดที่แต่ละ Item จะขึ้น Toast

💡 แนะนำ: ใช้ RecyclerView แทน GridView

ในปัจจุบัน Google แนะนำให้ใช้ RecyclerView + GridLayoutManager แทน GridView เพราะ:

• มี ViewHolder Pattern บังคับใช้ (ประสิทธิภาพดีกว่า)
• รองรับ Animation, ItemDecoration, SnapHelper
• ยืดหยุ่นกว่า (เปลี่ยนเป็น List, StaggeredGrid ได้ง่าย)
• รองรับ DiffUtil สำหรับอัปเดตข้อมูลแบบ Partial

// ตัวอย่าง RecyclerView Grid
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
recyclerView.setAdapter(new MyGridAdapter(dataList));