iT邦幫忙

2023 iThome 鐵人賽
DAY 15
1
Mobile Development

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

Day15 - RecycleView使用方法

15th鐵人賽
604 瀏覽

  • 分享至 

  • xImage
    •  

前言

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

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

主要功能：

  1. 靈活的佈局管理器（LayoutManager）： RecyclerView 允許你使用不同的佈局管理器來定義數據項目的排列方式，例如垂直列表、水平列表、網格、瀑布流等。

  2. 分離數據和視圖： RecyclerView 強制實現 MVC (Model-View-Controller) 模式，這意味著數據和視圖是分離的。你需要創建一個 Adapter 來將數據映射到實際的視圖項目。

  3. 高效的數據重用： 通過使用 Adapter 和 ViewHolder 模式，RecyclerView 可以高效地重用視圖項目，減少內存消耗和性能問題。

  4. 項目動畫： RecyclerView 支援內置的項目動畫，讓你可以在數據集變更時添加各種動畫效果，提升使用者體驗。

  5. 點擊和長按處理： RecyclerView 提供了點擊和長按事件的處理機制，方便你對數據項目進行互動。

  6. 分割線和裝飾： 你可以自定義分割線來美化列表，並且還可以添加項目裝飾來實現更多視覺效果。

使用場景：

  1. 列表和網格視圖： 最常見的使用場景是顯示列表或網格風格的數據，如聯絡人列表、產品目錄等。

  2. 動態數據更新： 如果你的數據集會動態地變化，例如聊天應用中的消息列表，RecyclerView 可以處理這些更新，並且能夠平滑地添加、移除和更新數據項目。

  3. 多種類型的數據項目： RecyclerView 允許你在同一個列表中顯示不同類型的數據項目，這對於消息列表、社交媒體動態等場景非常有用。

  4. 應用內的圖片瀏覽： 如果你的應用需要顯示圖片列表，RecyclerView 可以配合圖片瀏覽庫實現高效的圖片瀏覽功能。

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

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

操作步驟

  1. 在res/layout/ 建立recyclewView的字畫面layout
    https://ithelp.ithome.com.tw/upload/images/20230828/20161502xaDIXHjTxL.png
  2. 在java Main code的資料夾裡創建一個MyAdapter Class
    https://ithelp.ithome.com.tw/upload/images/20230828/20161502w9pbTMa9Mz.png
  • 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);
        }
    }
}
  1. 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>

解說

  1. 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);
        }
    }
}
  1. public class ViewHolder extends RecyclerView.ViewHolder
  • 用來綁定recycleview_layout子畫面的元件使用的
  1. 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的部分。那就到這邊拉掰掰。


上一篇
Day14 - CheckBox製作簡單的選擇問卷
下一篇
Day16 - ViewPager2 + TabLayout
系列文
Android studio使用過程與開發說明 共 30 篇
  1. 26
    Day26 - SharedPreferences 記住帳密
  2. 27
    Day27 - Android Studio 模糊搜尋
  3. 28
    Day28 - 使用Firebase與Android studio實現登入(上篇)
  4. 29
    Day29 - 使用Firebase與Android studio實現登入 (下篇)
  5. 30
    Day30 - 完賽結言
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22192 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙