วิธีเพิ่มหัวข้อ (Header) สำหรับ ListView ใน Android

ตัวอย่าง: การเพิ่มหัวข้อ (Header) สำหรับ ListView ใน Android

ตัวอย่างนี้สาธิตวิธีเพิ่มรายการหัวข้อ (Header) ไว้ด้านบน ListView

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

ไปที่ File → New Project แล้วกรอกรายละเอียดที่จำเป็น

ขั้นตอนที่ 2: เพิ่มโค้ดใน res/layout/activity_main.xml

<?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 = "match_parent"
    android:layout_height = "match_parent"
    tools:context = ".MainActivity"
    android:orientation = "vertical">
    <EditText
        android:id = "@+id/name"
        android:layout_width = "match_parent"
        android:hint = "Enter Name"
        android:layout_height = "wrap_content" />
    <LinearLayout
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content">
        <Button
            android:id = "@+id/save"
            android:text = "Save"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content" />
        <Button
            android:id = "@+id/refresh"
            android:text = "Refresh"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content" />
    </LinearLayout>
    <ListView
        android:id = "@+id/listView"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">
    </ListView>
</LinearLayout>

โค้ดข้างต้นใช้ EditText สำหรับชื่อ กด Save เพื่อเก็บข้อมูลใน ArrayList กด Refresh เพื่อแสดงการเปลี่ยนแปลงของ ListView

ขั้นตอนที่ 3: เพิ่มโค้ดใน src/MainActivity.java

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashSet;
import java.util.Set;

public class MainActivity extends AppCompatActivity {
    EditText name;
    ArrayAdapter arrayAdapter;
    ArrayList<String> array_list;
    Set set = new HashSet();
    private ListView listView;

    @Override
    protected void onCreate(Bundle readdInstanceState) {
        super.onCreate(readdInstanceState);
        setContentView(R.layout.activity_main);
        array_list = new ArrayList<String>();
        array_list.ensureCapacity(20);
        name = findViewById(R.id.name);
        listView = findViewById(R.id.listView);

        findViewById(R.id.refresh).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                arrayAdapter.notifyDataSetChanged();
                listView.invalidateViews();
                listView.refreshDrawableState();
            }
        });

        findViewById(R.id.save).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!name.getText().toString().isEmpty()) {
                    set.add(name.getText().toString());
                    array_list.clear();
                    if (array_list.isEmpty()) {
                        array_list.add(0, "HEADER");
                        array_list.addAll(set);
                        Collections.sort(array_list, new Comparator<String>() {
                            @Override
                            public int compare(String o1, String o2) {
                                return o1.compareTo(o2);
                            }
                        });
                        array_list.trimToSize();
                        arrayAdapter = new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, array_list);
                        listView.setAdapter(arrayAdapter);
                    } else {
                        listView.setVisibility(View.GONE);
                    }
                    Toast.makeText(MainActivity.this, "Inserted", Toast.LENGTH_LONG).show();
                } else {
                    name.setError("Enter NAME");
                }
            }
        });
    }
}

การทดสอบแอปพลิเคชัน

รันแอปพลิเคชันจาก Android Studio เลือกอุปกรณ์มือถือ แล้วตรวจสอบหน้าจอเริ่มต้น

ในผลลัพธ์ข้างต้น แสดงหัวข้อ "HEADER" ร่วมกับรายการลูกใน ListView

สรุป

วิธีง่ายที่สุดในการเพิ่ม Header ให้ ListView คือการเพิ่มรายการพิเศษ (เช่น "HEADER") เข้าไปใน ArrayList ที่ตำแหน่งแรก (index 0) ก่อนรายการข้อมูลจริง อย่างไรก็ตาม วิธีนี้จะทำให้ Header ถูกจัดเรียงร่วมกับข้อมูลอื่นๆ หากใช้ Collections.sort() สำหรับ Header ที่ต้องคงอยู่ตำแหน่งแรกเสมอ แนะนำให้ใช้ ListView.addHeaderView() แทน ซึ่งเป็นวิธีมาตรฐานของ Android ที่แยก Header ออกจาก Adapter ทำให้ Header ไม่ถูกเลื่อนหาย และสามารถปรับแต่งรูปแบบได้อิสระ