วิธีไฮไลท์รายการที่เลือกใน Android RecyclerView ให้ถูกต้อง

ภาพรวม

ตัวอย่างนี้สาธิตวิธีทำให้ RecyclerView ไฮไลท์ (Highlight) รายการที่ผู้ใช้เลือกอย่างถูกต้อง โดยใช้ Selector Drawable และ SparseBooleanArray เพื่อจัดการสถานะการเลือก (Selection State)

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

เปิด Android Studio ไปที่ File → New Project แล้วกรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: เพิ่ม Dependency

dependencies {
    implementation "androidx.recyclerview:recyclerview:1.3.2"
    implementation "androidx.cardview:cardview:1.0.0"
}

ขั้นตอนที่ 3: Layout หลัก (res/layout/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"
    android:padding="4dp"
    tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="8dp" />
</RelativeLayout>

ขั้นตอนที่ 3: Layout รายการ (res/layout/list_layout.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_selector"
    android:padding="16dp">
    <TextView
        android:id="@+id/awardTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="New Text"
        android:textSize="18sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/awardYear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/awardTitle"
        android:layout_alignStart="@+id/awardTitle"
        android:layout_marginTop="20dp"
        android:text="New Text"
        android:textColor="#000" />
    <TextView
        android:id="@+id/playerName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="New Text" />
</RelativeLayout>

ขั้นตอนที่ 4: Selector Drawable (res/drawable/background_selector.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- สถานะถูกเลือก -->
    <item android:drawable="@color/colorAccent" 
          android:state_pressed="false" 
          android:state_selected="true" />
    <!-- สถานะปกติ -->
    <item android:drawable="@android:color/white" 
          android:state_selected="false" />
</selector>

ขั้นตอนที่ 5: Divider Drawable (res/drawable/line_divider.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" 
       android:shape="rectangle">
    <size android:width="2dp" android:height="2dp" />
    <solid android:color="@color/colorPrimaryDark" />
</shape>

ขั้นตอนที่ 6: Model Class (ItemObject.java)

package com.app.sample;

public class ItemObject {
    private String awardTitle;
    private String awardYear;
    private String player;

    public ItemObject(String awardTitle, String awardYear, String player) {
        this.awardTitle = awardTitle;
        this.awardYear = awardYear;
        this.player = player;
    }

    public String getAwardTitle() { return awardTitle; }
    public String getAwardYear() { return awardYear; }
    public String getPlayer() { return player; }
}

ขั้นตอนที่ 7: RecyclerView Adapter (RecyclerViewAdapter.java)

package com.app.sample;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {
    private List<ItemObject> itemList;

    public RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
        this.itemList = itemList;
    }

    @NonNull
    @Override
    public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
        View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout, parent, false);
        return new RecyclerViewHolders(layoutView);
    }

    @Override
    public void onBindViewHolder(RecyclerViewHolders holder, int position) {
        holder.awardTitle.setText("Award Title: " + itemList.get(position).getAwardTitle());
        holder.awardYear.setText("Award Year: " + itemList.get(position).getAwardYear());
        holder.player.setText("Player Name: " + itemList.get(position).getPlayer());
    }

    @Override
    public int getItemCount() {
        return this.itemList.size();
    }
}

ขั้นตอนที่ 8: ViewHolder จัดการ Selection (RecyclerViewHolders.java)

package com.app.sample;

import android.util.SparseBooleanArray;
import android.view.View;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;

class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView awardTitle;
    TextView awardYear;
    TextView player;
    private SparseBooleanArray selectedItems = new SparseBooleanArray();

    RecyclerViewHolders(View itemView) {
        super(itemView);
        itemView.setOnClickListener(this);
        awardTitle = itemView.findViewById(R.id.awardTitle);
        awardYear = itemView.findViewById(R.id.awardYear);
        player = itemView.findViewById(R.id.playerName);
    }

    @Override
    public void onClick(View view) {
        int position = getAdapterPosition();
        if (selectedItems.get(position, false)) {
            // ยกเลิกการเลือก
            selectedItems.delete(position);
            view.setSelected(false);
        } else {
            // เลือก
            selectedItems.put(position, true);
            view.setSelected(true);
        }
    }
}

ขั้นตอนที่ 9: ItemDecoration สำหรับ Divider (SimpleItemDecoration.java)

package com.app.sample;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.core.content.ContextCompat;
import androidx.recyclerview.widget.RecyclerView;

class SimpleItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable drawable;

    SimpleItemDecoration(Context context) {
        drawable = ContextCompat.getDrawable(context, R.drawable.line_divider);
    }

    @Override
    public void onDrawOver(@NonNull Canvas canvas, RecyclerView parent, @NonNull RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + drawable.getIntrinsicHeight();
            drawable.setBounds(left, top, right, bottom);
            drawable.draw(canvas);
        }
    }
}

ขั้นตอนที่ 10: MainActivity (src/MainActivity.java)

package com.app.sample;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        RecyclerView recyclerView = findViewById(R.id.recyclerView);
        recyclerView.addItemDecoration(new SimpleItemDecoration(this));
        
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        
        List<ItemObject> posts = returnListItems();
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(this, posts);
        recyclerView.setAdapter(adapter);
    }

    private List<ItemObject> returnListItems() {
        List<ItemObject> items = new ArrayList<>();
        items.add(new ItemObject("Ballon'd'or", "2007", "Ricardo KaKa"));
        items.add(new ItemObject("Ballon'd'or", "2008", "Cristiano Ronaldo"));
        items.add(new ItemObject("Ballon'd'or", "2009 - 2012, 2015", "Lionel Messi"));
        items.add(new ItemObject("Ballon'd'or", "2013, 2014, 2016, 2017", "Cristiano Ronaldo"));
        items.add(new ItemObject("Ballon'd'or", "2018", "Luca Modric"));
        items.add(new ItemObject("Ballon'd'or", "2019", "Haven't decided yet"));
        return items;
    }
}

ขั้นตอนที่ 11: Manifest (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>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

แนวทางปฏิบัติที่ดีกว่า (Best Practice)

สำหรับการเลือกหลายรายการ (Multi-selection) ควรจัดการ Selection State ใน Adapter ไม่ใช่ใน ViewHolder:

// ใน Adapter
private SparseBooleanArray selectedItems = new SparseBooleanArray();

public void toggleSelection(int position) {
    if (selectedItems.get(position, false)) {
        selectedItems.delete(position);
    } else {
        selectedItems.put(position, true);
    }
    notifyItemChanged(position);
}

public boolean isSelected(int position) {
    return selectedItems.get(position, false);
}

// ใน onBindViewHolder
holder.itemView.setSelected(isSelected(position));

การทดสอบ

เชื่อมต่ออุปกรณ์ Android จริง ใน Android Studio คลิก Run - กดที่รายการจะไฮไลท์สี Accent กดอีกครั้งจะยกเลิก