วิธีเพิ่มปุ่ม (Button) เข้า Layout แบบไดนามิกหลายแถวด้วย Kotlin

ตัวอย่างนี้สาธิตวิธี สร้างและเพิ่มปุ่ม (Button) เข้าไปใน Layout แบบโปรแกรมมัติ (Programmatically) โดยจัดเรียงเป็นหลายแถวหลายคอลัมน์ โดยไม่ต้องเขียน XML สำหรับแต่ละปุ่ม

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

Android Studio → File → New Project → Empty Activity → ตั้งชื่อโปรเจกต์ → Finish

ขั้นตอนที่ 2: Layout หลัก (activity_main.xml)

ใช้ LinearLayout แบบง่ายๆ เป็นคอนเทนเนอร์หลัก

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">
</LinearLayout>

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

import android.os.Bundle
import android.view.Gravity
import android.widget.Button
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Dynamic Buttons Demo"

        // สร้าง LinearLayout หลัก แนวตั้ง
        val mainLayout = LinearLayout(this).apply {
            orientation = LinearLayout.VERTICAL
            gravity = Gravity.CENTER
        }

        // สร้าง 3 แถว (i = 0, 1, 2)
        for (i in 0..2) {
            // สร้างแถว (Row) แนวนอน
            val row = LinearLayout(this).apply {
                layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT
                )
                gravity = Gravity.CENTER
            }

            // เพิ่มปุ่ม 4 ตัวในแต่ละแถว (j = 0..3)
            for (j in 0..3) {
                val btn = Button(this@MainActivity).apply {
                    layoutParams = LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.MATCH_PARENT
                    )
                    text = "Button ${j + 1 + i * 4}"
                    id = j + 1 + i * 4
                    setOnClickListener {
                        Toast.makeText(this@MainActivity, "Clicked ${text}", Toast.LENGTH_SHORT).show()
                    }
                }
                row.addView(btn)
            }
            mainLayout.addView(row)
        }

        // ตั้งค่า Content View ใหม่เป็น Layout ที่สร้างขึ้น
        setContentView(mainLayout)
    }
}

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

ใช้ Manifest มาตรฐาน ไม่ต้องเพิ่ม Permission พิเศษ

ผลลัพธ์

เมื่อรันแอป จะแสดงปุ่ม 12 ปุ่ม จัดเรียงเป็น 3 แถว แถวละ 4 ปุ่ม อยู่ตรงกลางหน้าจอ กดแต่ละปุ่มจะแสดง Toast แจ้งชื่อปุ่มที่ถูกกด

จุดสำคัญ

• ใช้ LinearLayout 巢狀 (Nested) เพื่อสร้างโครงสร้างแถว-คอลัมน์
• ใช้ apply { } เพื่อตั้งค่า Property ให้ View อย่างสั้นกระชับ
• คำนวณเลขลำดับปุ่มด้วยสูตร j + 1 + i * 4
• เรียก setContentView(layout) ทับทับ Layout เดิมจาก XML