Day15 - RecycleView使用方法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 15

Mobile Development

Android studio使用過程與開發說明系列第 15 篇

Day15 - RecycleView使用方法

15th鐵人賽

aa30742030

團隊nutc_imac_function

2023-09-25 14:01:03

462 瀏覽

分享至

前言

當你在開發一個 Android 應用程式時，RecyclerView 是一個強大的工具，用於顯示具有相似結構的數據集，例如列表或網格。它提供了高度的自定義性和性能優化，能夠有效地處理大量的數據項目，同時也支援動態數據的更新。

以下是 RecyclerView 的主要功能和使用場景：

主要功能：

靈活的佈局管理器（LayoutManager）： RecyclerView 允許你使用不同的佈局管理器來定義數據項目的排列方式，例如垂直列表、水平列表、網格、瀑布流等。
分離數據和視圖： RecyclerView 強制實現 MVC (Model-View-Controller) 模式，這意味著數據和視圖是分離的。你需要創建一個 Adapter 來將數據映射到實際的視圖項目。
高效的數據重用：通過使用 Adapter 和 ViewHolder 模式，RecyclerView 可以高效地重用視圖項目，減少內存消耗和性能問題。
項目動畫： RecyclerView 支援內置的項目動畫，讓你可以在數據集變更時添加各種動畫效果，提升使用者體驗。
點擊和長按處理： RecyclerView 提供了點擊和長按事件的處理機制，方便你對數據項目進行互動。
分割線和裝飾：你可以自定義分割線來美化列表，並且還可以添加項目裝飾來實現更多視覺效果。

使用場景：

列表和網格視圖：最常見的使用場景是顯示列表或網格風格的數據，如聯絡人列表、產品目錄等。
動態數據更新：如果你的數據集會動態地變化，例如聊天應用中的消息列表，RecyclerView 可以處理這些更新，並且能夠平滑地添加、移除和更新數據項目。
多種類型的數據項目： RecyclerView 允許你在同一個列表中顯示不同類型的數據項目，這對於消息列表、社交媒體動態等場景非常有用。
應用內的圖片瀏覽：如果你的應用需要顯示圖片列表，RecyclerView 可以配合圖片瀏覽庫實現高效的圖片瀏覽功能。

總之，RecyclerView 是 Android 開發中不可或缺的一個工具，它提供了強大的功能來管理和顯示數據集，同時保證了良好的性能和用戶體驗。

功能
我會將重複的子畫面重複利用。如下圖:

操作步驟

在res/layout/ 建立recyclewView的字畫面layout
在java Main code的資料夾裡創建一個MyAdapter Class

MyAdapter Class Code

package com.example.recycleviewdemo;

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

import java.util.ArrayList;
import java.util.HashMap;

//RecycleView Adapter
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private ArrayList<HashMap<String,String>> dataList; // 數據集合
    private Context context;

    // 構造函數，傳入數據和上下文
    public MyAdapter(ArrayList<HashMap<String,String>> dataList, Context context) {
        this.dataList = dataList;
        this.context = context;
    }

    // 創建新的 ViewHolder，並將佈局文件實例化為視圖
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.recycleview_layout, parent, false);
        return new ViewHolder(view);
    }

    // 將數據綁定到 ViewHolder 上
    //設定TextView的地方
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        //dataList.get(position);
        holder.id_textview.setText("編號:" + dataList.get(position).get("id"));
        holder.name_textview.setText("姓名" + dataList.get(position).get("name"));
        holder.score_textview.setText("總成績" + dataList.get(position).get("score"));
        holder.age_textview.setText("年齡"+ dataList.get(position).get("age"));
        holder.student_id_textview.setText("學號" + dataList.get(position).get("student_id"));
    }

    // 返回數據集的大小
    @Override
    public int getItemCount() {
        return dataList.size();
    }

    // 定義 ViewHolder 類
    public class ViewHolder extends RecyclerView.ViewHolder {
        //宣告變數
        TextView id_textview,name_textview,score_textview,age_textview,student_id_textview;

        //綁訂元件
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            id_textview = itemView.findViewById(R.id.id_textView);
            name_textview = itemView.findViewById(R.id.name_textView);
            score_textview = itemView.findViewById(R.id.score_textveiw);
            age_textview = itemView.findViewById(R.id.age_textview);
            student_id_textview = itemView.findViewById(R.id.student_id_textview);
        }
    }
}

MainActivity code 寫上

package com.example.recycleviewdemo;

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.HashMap;

public class MainActivity extends AppCompatActivity {
    //宣告變數
    private RecyclerView recyclerView;//宣告RecycleView變數
    private ArrayList<HashMap<String,String>> arrayList = new ArrayList<>();//建立空間


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setMyRecycleView();//設定RecycleView
    }

    //設定RecycleView
    public void setMyRecycleView(){
        recyclerView = findViewById(R.id.recycleView);//綁訂元件
        CreateFalseData();//建立假資料

        //recyclerView它的RecycleView Adapter
        MyAdapter adapter = new MyAdapter(arrayList,this);
        recyclerView.setAdapter(adapter);

        // 設置線性佈局管理器
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
    }

    //建立假資料
    public void CreateFalseData(){
        //建立30筆假資料
        for(int i = 0; i < 30; i++){
            HashMap<String,String> hashMap = new HashMap<>();
            hashMap.put("id",Integer.toString(i));// (key,value)
            hashMap.put("name","小名");
            hashMap.put("score","99");
            hashMap.put("age","18");
            hashMap.put("student_id","s1234");
            arrayList.add(hashMap);//把建好的一筆假資料放進 arrayList
        }
    }
}

---main_activity.xml---

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textSize="40sp"
        android:gravity="center"
        android:textColor="@color/black"
        android:text="RecycleViewDemo" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9" />
</LinearLayout>

---recycleview_layout.xml---

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="100sp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/id_textView"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="編號:"
                android:background="@drawable/mycustomer_border"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/name_textView"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="20sp"
                android:background="@drawable/mycustomer_border"
                android:textColor="@color/black"

                android:text="姓名:" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/score_textveiw"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="總成績:"
                android:textColor="@color/black"
                android:background="@drawable/mycustomer_border"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/age_textview"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="年齡:"
                android:textColor="@color/black"
                android:background="@drawable/mycustomer_border"
                android:textSize="20sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@drawable/mycustomer_border"
            android:orientation="horizontal">

            <View
                android:id="@+id/view"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2" />

            <TextView
                android:id="@+id/student_id_textview"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:gravity="fill_vertical"
                android:text="學號:"
                android:textColor="@color/black"
                android:textSize="20sp" />
        </LinearLayout>

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/black"
            android:layout_weight="0.5" />
    </LinearLayout>
</LinearLayout>

解說

setMyRecycleView():這裡是用來設定基本RecycleView基本設定

MyAdapter adapter = new MyAdapter(arrayList,this):我自訂義的adapter建立它的建構元把資料傳入MyAdapter class做使用(arrayList,this)分別為(ArrayList變數,context)在MyAdapter class可以看見我建構元的寫法。
recyclerView.setAdapter(adapter):設RecycleView的管理者，用來管理它的子畫面生成
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this):RecyclerView 的佈局管理器，用來定義 RecyclerView 中數據項目的排列方式。在你的代碼片段中，你使用了線性佈局管理器（LinearLayoutManager），這會將數據項目按照垂直或水平的方向排列。
recyclerView.setLayoutManager(layoutManager):設定部局的管理者
補充
- 1.創建 LayoutManager 實例：你通過創建 LinearLayoutManager 類的實例，來定義 RecyclerView 中數據項目的排列方式。這裡的 this 可能代表的是 Activity 或上下文對象。
- 2.設置佈局管理器：通過 recyclerView.setLayoutManager(layoutManager) 將創建的佈局管理器設置給 RecyclerView。這告訴 RecyclerView 使用特定的佈局管理器來管理和展示數據項目。

    //設定RecycleView
    public void setMyRecycleView(){
        recyclerView = findViewById(R.id.recycleView);//綁訂元件
        CreateFalseData();//建立假資料

        //recyclerView它的RecycleView Adapter
        MyAdapter adapter = new MyAdapter(arrayList,this);
        recyclerView.setAdapter(adapter);

        // 設置線性佈局管理器
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
    }

MyAdapter
基本框架

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<String> dataList; // 數據集合
    private Context context;

    // 構造函數，傳入數據和上下文
    public MyAdapter(List<String> dataList, Context context) {
        this.dataList = dataList;
        this.context = context;
    }

    // 創建新的 ViewHolder，並將佈局文件實例化為視圖
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false);
        return new ViewHolder(view);
    }

    // 將數據綁定到 ViewHolder 上
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        String data = dataList.get(position);
        holder.textView.setText(data);
    }

    // 返回數據集的大小
    @Override
    public int getItemCount() {
        return dataList.size();
    }

    // 定義 ViewHolder 類
    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.text_view);
        }
    }
}

public class ViewHolder extends RecyclerView.ViewHolder

用來綁定recycleview_layout子畫面的元件使用的

RecycleView基本框架

管理RecycleView的部分

    // 創建新的 ViewHolder，並將佈局文件實例化為視圖
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false);
        return new ViewHolder(view);
    }

    // 將數據綁定到 ViewHolder 上
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        String data = dataList.get(position);
        holder.textView.setText(data);
    }

    // 返回數據集的大小
    @Override
    public int getItemCount() {
        return dataList.size();
    }

結語
這次介紹就到這邊，不要說為甚麼我不介紹建構元的部分，這很基本請去看看其他文章介紹建構元使用部分，希望這次寫出來的RecycleView使用方法大家都可以受用，邊框的部分請看Day13的部分。那就到這邊拉掰掰。