วิธีสร้าง Custom Adapter สำหรับ ListView ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตการสร้าง Custom Adapter โดยการ Extends BaseAdapter เพื่อแสดงข้อมูลแบบกำหนดเองใน ListView (รูปภาพ, ชื่อ, เบอร์โทร) พร้อม Model Class แยกต่างหาก

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

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอหลัก (activity_main.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="match_parent"
    android:orientation="vertical">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp"/>

</LinearLayout>

ขั้นตอนที่ 3: สร้าง Model Class (MyData.java)

public class MyData {
    private int serialNum;
    private String name;
    private String mobileNumber;

    public MyData(int serialNum, String name, String mobileNumber) {
        this.serialNum = serialNum;
        this.name = name;
        this.mobileNumber = mobileNumber;
    }

    // Getters
    public int getSerialNum() { return serialNum; }
    public String getName() { return name; }
    public String getMobileNumber() { return mobileNumber; }

    // Setters
    public void setSerialNum(int serialNum) { this.serialNum = serialNum; }
    public void setName(String name) { this.name = name; }
    public void setMobileNumber(String mobileNumber) { this.mobileNumber = mobileNumber; }
}

ขั้นตอนที่ 4: สร้าง Layout Item (row.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">

    <TextView
        android:id="@+id/serialNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Number"
        android:textColor="@color/colorPrimary"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/studentName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Name"
        android:textColor="#000000"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/mobileNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Mobile Number"
        android:textColor="@color/colorAccent"
        android:textSize="14sp" />

</LinearLayout>

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

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

import java.util.ArrayList;

public class MyAdapter extends BaseAdapter {

    private final Context context;
    private final ArrayList dataList;
    private final LayoutInflater inflater;

    public MyAdapter(Context context, ArrayList dataList) {
        this.context = context;
        this.dataList = dataList;
        this.inflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public MyData getItem(int position) {
        return dataList.get(position);
    }

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

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

        // ViewHolder Pattern - ใช้งานร่วมกับ convertView เพื่อประสิทธิภาพ
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.row, parent, false);
            holder = new ViewHolder();
            holder.serialNumber = convertView.findViewById(R.id.serialNumber);
            holder.name = convertView.findViewById(R.id.studentName);
            holder.mobileNumber = convertView.findViewById(R.id.mobileNumber);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        // Bind Data
        MyData item = getItem(position);
        holder.serialNumber.setText(String.valueOf(item.getSerialNum()));
        holder.name.setText(item.getName());
        holder.mobileNumber.setText(item.getMobileNumber());

        return convertView;
    }

    static class ViewHolder {
        TextView serialNumber;
        TextView name;
        TextView mobileNumber;
    }
}

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

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private ArrayList dataList = new ArrayList<>();
    private MyAdapter adapter;

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

        listView = findViewById(R.id.listView);

        // เพิ่มข้อมูลตัวอย่าง
        dataList.add(new MyData(1, "Mashu", "987576443"));
        dataList.add(new MyData(2, "Azhar", "8787576768"));
        dataList.add(new MyData(3, "Niyaz", "65757657657"));

        adapter = new MyAdapter(this, dataList);
        listView.setAdapter(adapter);

        // ตัวอย่าง: จัดการคลิก Item
        listView.setOnItemClickListener((parent, view, position, id) -> {
            MyData item = dataList.get(position);
            // ทำงานต่อไปที่นี่ เช่น เปิด Detail Activity
        });
    }
}

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

    </application>
</manifest>

การทดสอบ

รันแอป → จะแสดง ListView 3 รายการ พร้อมลำดับ ชื่อ และเบอร์โทร

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

ListView เป็น Legacy Component แล้ว Google แนะนำให้ใช้ RecyclerView ซึ่ง:

• บังคับ ViewHolder Pattern (เร็วกว่า, 省หน่วยความจำ)
• รองรับ LayoutManager หลากหลาย (Linear, Grid, Staggered)
• มี ItemAnimator, ItemDecoration, SnapHelper
• รองรับ DiffUtil สำหรับอัปเดตข้อมูลแบบ Smart

// RecyclerView Adapter (Kotlin) - สั้นกว่าและปลอดภัยกว่า
class MyAdapter(private val dataList: List) : 
    RecyclerView.Adapter() {

    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val serialNumber: TextView = view.findViewById(R.id.serialNumber)
        val name: TextView = view.findViewById(R.id.studentName)
        val mobileNumber: TextView = view.findViewById(R.id.mobileNumber)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = dataList[position]
        holder.serialNumber.text = item.serialNum.toString()
        holder.name.text = item.name
        holder.mobileNumber.text = item.mobileNumber
    }

    override fun getItemCount() = dataList.size
}