Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีใช้ RecyclerView ร่วมกับฐานข้อมูล SQLite ใน Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการใช้ RecyclerView ร่วมกับฐานข้อมูล SQLite (ผ่าน SQLiteOpenHelper) เพื่อแสดง แก้ไข ลบ ข้อมูลผู้ติดต่อ (Contacts) ใน Android ด้วย Kotlin

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

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

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

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    android:padding="4dp"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/myContactList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        android:paddingBottom="8dp" />
    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="4dp"
        android:padding="2dp"
        android:text="ADD" />
</FrameLayout>

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

import android.os.Bundle
import android.text.TextUtils
import android.view.LayoutInflater
import android.view.View
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    private lateinit var dataBase: SqliteDatabase

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

        val contactView: RecyclerView = findViewById(R.id.myContactList)
        contactView.layoutManager = LinearLayoutManager(this)
        contactView.setHasFixedSize(true)

        dataBase = SqliteDatabase(this)
        loadContacts()

        val btnAdd: Button = findViewById(R.id.btnAdd)
        btnAdd.setOnClickListener { addTaskDialog() }
    }

    private fun loadContacts() {
        val allContacts = dataBase.listContacts()
        val contactView: RecyclerView = findViewById(R.id.myContactList)
        if (allContacts.isNotEmpty()) {
            contactView.visibility = View.VISIBLE
            val adapter = ContactAdapter(this, allContacts.toMutableList(), dataBase)
            contactView.adapter = adapter
        } else {
            contactView.visibility = View.GONE
            Toast.makeText(this, "No contacts. Add some!", Toast.LENGTH_LONG).show()
        }
    }

    private fun addTaskDialog() {
        val inflater = LayoutInflater.from(this)
        val subView = inflater.inflate(R.layout.add_contacts, null)
        val nameField: EditText = subView.findViewById(R.id.enterName)
        val noField: EditText = subView.findViewById(R.id.enterPhoneNum)

        AlertDialog.Builder(this)
            .setTitle("Add new CONTACT")
            .setView(subView)
            .setPositiveButton("ADD CONTACT") { _, _ ->
                val name = nameField.text.toString().trim()
                val phoneNum = noField.text.toString().trim()
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(this, "Please enter name", Toast.LENGTH_LONG).show()
                } else {
                    dataBase.addContacts(Contacts(name, phoneNum))
                    loadContacts() // Refresh
                }
            }
            .setNegativeButton("CANCEL") { _, _ -> Toast.makeText(this, "Cancelled", Toast.LENGTH_SHORT).show() }
            .show()
    }

    override fun onDestroy() {
        super.onDestroy()
        dataBase.close()
    }
}

ขั้นตอนที่ 4: สร้างคลาสโมเดลและช่วยเหลือ

Contacts.kt (Data Class)

data class Contacts(
    var id: Int = 0,
    var name: String = "",
    var phno: String = ""
)

ContactViewHolder.kt

import android.view.View
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class ContactViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val tvName: TextView = itemView.findViewById(R.id.contactName)
    val tvPhoneNum: TextView = itemView.findViewById(R.id.phoneNum)
    val deleteContact: ImageView = itemView.findViewById(R.id.deleteContact)
    val editContact: ImageView = itemView.findViewById(R.id.editContact)
}

ContactAdapter.kt

import android.app.Activity
import android.content.Context
import android.text.TextUtils
import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.EditText
import android.widget.Filter
import android.widget.Filterable
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.recyclerview.widget.RecyclerView

class ContactAdapter(
    private val context: Context,
    private var contactList: MutableList<Contacts>,
    private val database: SqliteDatabase
) : RecyclerView.Adapter<ContactViewHolder>(), Filterable {

    private val fullList = contactList.toMutableList()

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ContactViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.contact_list_layout, parent, false)
        return ContactViewHolder(view)
    }

    override fun onBindViewHolder(holder: ContactViewHolder, position: Int) {
        val contact = contactList[position]
        holder.tvName.text = contact.name
        holder.tvPhoneNum.text = contact.phno

        holder.editContact.setOnClickListener { editContactDialog(contact) }
        holder.deleteContact.setOnClickListener {
            database.deleteContact(contact.id)
            loadContactsInActivity()
        }
    }

    private fun loadContactsInActivity() {
        (context as Activity).runOnUiThread {
            contactList.clear()
            contactList.addAll(database.listContacts())
            notifyDataSetChanged()
        }
    }

    override fun getFilter(): Filter = object : Filter() {
        override fun performFiltering(constraint: CharSequence?): FilterResults {
            val query = constraint?.toString()?.lowercase() ?: ""
            val filtered = if (query.isEmpty()) fullList else fullList.filter { it.name.lowercase().contains(query) }
            return FilterResults().apply { values = filtered; count = filtered.size }
        }

        override fun publishResults(constraint: CharSequence?, results: FilterResults?) {
            contactList.clear()
            contactList.addAll(results?.values as? MutableList<Contacts> ?: emptyList())
            notifyDataSetChanged()
        }
    }

    override fun getItemCount(): Int = contactList.size

    private fun editContactDialog(contact: Contacts) {
        val inflater = LayoutInflater.from(context)
        val subView = inflater.inflate(R.layout.add_contacts, null)
        val nameField: EditText = subView.findViewById(R.id.enterName)
        val phoneField: EditText = subView.findViewById(R.id.enterPhoneNum)
        nameField.setText(contact.name)
        phoneField.setText(contact.phno)

        AlertDialog.Builder(context)
            .setTitle("Edit Contact")
            .setView(subView)
            .setPositiveButton("UPDATE") { _, _ ->
                val name = nameField.text.toString().trim()
                val phone = phoneField.text.toString().trim()
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(context, "Name required", Toast.LENGTH_LONG).show()
                } else {
                    database.updateContacts(Contacts(contact.id, name, phone))
                    loadContactsInActivity()
                }
            }
            .setNegativeButton("CANCEL") { _, _ -> Toast.makeText(context, "Cancelled", Toast.LENGTH_SHORT).show() }
            .show()
    }
}

SqliteDatabase.kt

import android.content.ContentValues
import android.content.Context
import android.database.Cursor
import android.database.sqlite.SQLiteDatabase
import android.database.sqlite.SQLiteOpenHelper

class SqliteDatabase(context: Context?) : SQLiteOpenHelper(
    context, DATABASE_NAME, null, DATABASE_VERSION
) {

    override fun onCreate(db: SQLiteDatabase) {
        db.execSQL("CREATE TABLE $TABLE_CONTACTS ($COLUMN_ID INTEGER PRIMARY KEY, $COLUMN_NAME TEXT, $COLUMN_NO TEXT)")
    }

    override fun onUpgrade(db: SQLiteDatabase, oldVersion: Int, newVersion: Int) {
        db.execSQL("DROP TABLE IF EXISTS $TABLE_CONTACTS")
        onCreate(db)
    }

    fun listContacts(): List<Contacts> {
        val db = readableDatabase
        val cursor = db.rawQuery("SELECT * FROM $TABLE_CONTACTS", null)
        val contacts = mutableListOf<Contacts>()
        if (cursor.moveToFirst()) {
            do {
                contacts.add(Contacts(
                    cursor.getInt(0),
                    cursor.getString(1),
                    cursor.getString(2)
                ))
            } while (cursor.moveToNext())
        }
        cursor.close()
        return contacts
    }

    fun addContacts(contact: Contacts) {
        val db = writableDatabase
        val values = ContentValues().apply {
            put(COLUMN_NAME, contact.name)
            put(COLUMN_NO, contact.phno)
        }
        db.insert(TABLE_CONTACTS, null, values)
    }

    fun updateContacts(contact: Contacts) {
        val db = writableDatabase
        val values = ContentValues().apply {
            put(COLUMN_NAME, contact.name)
            put(COLUMN_NO, contact.phno)
        }
        db.update(TABLE_CONTACTS, values, "$COLUMN_ID = ?", arrayOf(contact.id.toString()))
    }

    fun deleteContact(id: Int) {
        writableDatabase.delete(TABLE_CONTACTS, "$COLUMN_ID = ?", arrayOf(id.toString()))
    }

    companion object {
        private const val DATABASE_VERSION = 1
        private const val DATABASE_NAME = "ContactsDB"
        private const val TABLE_CONTACTS = "Contacts"
        private const val COLUMN_ID = "_id"
        private const val COLUMN_NAME = "contactName"
        private const val COLUMN_NO = "phoneNumber"
    }
}

ขั้นตอนที่ 5: สร้าง Layout Resources

add_contacts.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">
    <EditText
        android:id="@+id/enterName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Name"
        android:inputType="text"
        android:maxLines="1"
        android:padding="12dp" />
    <EditText
        android:id="@+id/enterPhoneNum"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Enter Phone Number"
        android:inputType="phone"
        android:maxLines="1"
        android:padding="12dp" />
</LinearLayout>

contact_list_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="12dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">
            <TextView
                android:id="@+id/contactName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:textStyle="bold" />
            <TextView
                android:id="@+id/phoneNum"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="14sp" />
        </LinearLayout>
        <ImageView
            android:id="@+id/editContact"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_baseline_edit_24" />
        <ImageView
            android:id="@+id/deleteContact"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="8dp"
            android:src="@drawable/ic_baseline_delete_24" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

ขั้นตอนที่ 6: ตั้งค่า AndroidManifest.xml

ใช้การตั้งค่ามาตรฐาน

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

รันแอป กด ADD เพื่อเพิ่มผู้ติดต่อ ค้นหา/แก้ไข/ลบ ได้จาก RecyclerView

แนวทางทันสมัย (Modern Approach)

  • Room Database: Google แนะนำใช้ Room (ORM) แทน SQLiteOpenHelper ตรงๆ - Type-safe, Compile-time verification, LiveData/Flow support
  • ViewBinding: ใช้แทน findViewById
  • Coroutines/Flow: สำหรับ Database Operations บน Background Thread
  • DiffUtil: ใช้ใน RecyclerView.Adapter เพื่อ Animation และ Performance ดีกว่า notifyDataSetChanged()