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

ตัวอย่างนี้สาธิตวิธีสร้าง GridView Layout ในแอป Android โดยใช้ภาษา Kotlin GridView เหมาะสำหรับการแสดงข้อมูลในรูปแบบกริด เช่น แกลเลอรี่รูปภาพ หรือเมนูไอคอน

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

เปิด Android Studio → File → New Project → เลือก Empty Activity → กรอกข้อมูลโปรเจกต์ให้ครบ → Finish

ขั้นตอนที่ 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" />

</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ดหลัก (MainActivity.kt)

import android.os.Bundle
import android.widget.AdapterView.OnItemClickListener
import android.widget.GridView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var gridView: GridView
    private val playerNames = arrayOf(
        "Cristiano Ronaldo", "Joao Felix", "Bernado Silva",
        "Andre Silve", "Bruno Fernandez", "William Carvalho",
        "Nelson Semedo", "Pepe", "Rui Patricio"
    )
    private val playerImages = intArrayOf(
        R.drawable.ronaldo, R.drawable.felix, R.drawable.bernado,
        R.drawable.andre, R.drawable.bruno, R.drawable.carvalho,
        R.drawable.semedo, R.drawable.pepe, R.drawable.patricio
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Kotlin GridView Demo"

        gridView = findViewById(R.id.gridView)
        val adapter = MainAdapter(this, playerNames, playerImages)
        gridView.adapter = adapter

        gridView.onItemClickListener = OnItemClickListener { _, _, position, _ ->
            Toast.makeText(applicationContext, "You Clicked ${playerNames[position]}", Toast.LENGTH_SHORT).show()
        }
    }
}

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

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

internal class MainAdapter(
    private val context: Context,
    private val names: Array<String>,
    private val images: IntArray
) : BaseAdapter() {

    private var inflater: LayoutInflater? = null

    override fun getCount(): Int = names.size

    override fun getItem(position: Int): Any? = null

    override fun getItemId(position: Int): Long = 0L

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View? {
        var view = convertView
        if (inflater == null) {
            inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        }
        if (view == null) {
            view = inflater!!.inflate(R.layout.row_item, null)
        }

        val imageView = view!!.findViewById<ImageView>(R.id.imageView)
        val textView = view.findViewById<TextView>(R.id.textView)

        imageView.setImageResource(images[position])
        textView.text = names[position]
        return view
    }
}

ขั้นตอนที่ 5: สร้าง Layout สำหรับแต่ละรายการ (row_item.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:gravity="center"
    android:padding="8dp">

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="10dp"
        android:textAlignment="center"
        android:gravity="center"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        android:textStyle="bold" />

</LinearLayout>

ขั้นตอนที่ 6: ตรวจสอบ AndroidManifest.xml

ไฟล์ Manifest มาตรฐาน ไม่ต้องแก้ไขเพิ่มเติมสำหรับตัวอย่างนี้

ทดสอบการทำงาน

เชื่อมต่ออุปกรณ์ Android จริงหรือใช้ Emulator → กดปุ่ม Run ▶️ → เลือกอุปกรณ์ → จะเห็น GridView แสดงรายชื่อนักฟุตบอลพร้อมรูปภาพ 2 คอลัมน์