1. 程式人生 > >Android教程2020 - RecyclerView使用入門

Android教程2020 - RecyclerView使用入門

本文介紹RecyclerView的使用入門。這裡給出一種比較常見的使用方式。

Android教程2020 - 系列總覽

本文連結

想必讀者朋友對列表的表現形式已經不再陌生。手機上有聯絡人列表,檔案列表,簡訊列表等等。
本文講述的是在Android開發中用RecyclerView來實現列表效果。

使用步驟

引入RecyclerView

在app的build.gradle檔案中新增引用。我們使用的是androidx包。

dependencies {
    // ...
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

資料準備

先確定一下要顯示什麼樣的資料。是使用者資訊,聯絡人,或是檔案。這裡以字元為例。
寫程式碼前,我們先考慮一下需求,就是要如何顯示,怎麼顯示資料。日常工作中,一般會有UI效果圖。本文中的美術設計就由我們自己發揮了。

比如顯示 a 97

ViewHolder與layout

現在要顯示的資料已經確定了。來設計UI表現。layout與ViewHolder緊密相關。在設計Adapter類前,先寫ViewHolder類會比較好。

新建定義item(列表子項)的佈局檔案item_letter.xml

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

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000" />

</LinearLayout>

這裡使用內部類,把ViewHolder類寫在activity類裡面。

    private class VH extends RecyclerView.ViewHolder {
        TextView tv1;
        TextView tv2;

        public VH(@NonNull View itemView) {
            super(itemView);
            tv1 = itemView.findViewById(R.id.tv1);
            tv2 = itemView.findViewById(R.id.tv2);
        }
    }

從上面可以看出,ViewHolder和item的layout是緊密相關的。
layout裡面的id寫的比較簡單。實際專案中可以給一些更有意義的id命名。

在activity的layout中,新增RecyclerView。

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/re_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

設計Adapter

設計一個介面卡繼承自RecyclerView.Adapter<VH>。這裡的VH是我們上面寫好的ViewHolder。
LetterAdapter中持有它自己的資料列表。需要實現3個方法。

onCreateViewHolder方法,要求返回VH物件。這裡就是建立VH物件並返回。
而VH構造器要求傳入一個View,我們利用LayoutInflater建立一個view給它。當然,建立的根據就是前面設計好的item_letter

onBindViewHolder是把資料交給對應的VH來顯示。

getItemCount方法要求返回資料的數量。

    private class LetterAdapter extends RecyclerView.Adapter<VH> {

        private List<Character> dataList;

        public LetterAdapter(List<Character> dataList) {
            this.dataList = dataList;
        }

        @NonNull
        @Override
        public VH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            return new VH(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_letter, parent, false));
        }

        @Override
        public void onBindViewHolder(@NonNull VH holder, int position) {
            Character c = dataList.get(position);
            holder.tv1.setText(c.toString());
            holder.tv2.setText(String.valueOf(Integer.valueOf(c)));
        }

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

粗心大意的時候,可能會忘記初始化adapter裡的dataList。報一個null pointer異常。

設定RecyclerView

在Activity的onCreate方法裡進行了初始化。
RecyclerView需要2項設定,介面卡與LayoutManager。介面卡就是我們上面定的那個。
LayoutManager這裡用LinearLayoutManager,指定為垂直方向,這樣我們會得到一個上下滑動的列表。

        List<Character> characterList = new ArrayList<>();
        for (char c = 'a'; c <= 'z'; c++) {
            characterList.add(c);
        }

        mLetterAdapter = new LetterAdapter(characterList);
        RecyclerView letterReView = findViewById(R.id.re_view);
        letterReView.setAdapter(mLetterAdapter);
        letterReView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.VERTICAL, false));

觀察執行結果

執行到手機或者模擬器上,開啟這個activity。有的朋友就發現,為啥螢幕裡一個子項item就佔滿了整個螢幕?
因為我們前面設定的item佔滿螢幕。回到item_letter.xml,看一下根layout的設定。
layout_height="match_parent"裡的設定改為wrap_content
重新編譯執行一下再看看結果。

也可以給根layout設定固定的高度。具體視美術設計和需求而定。

小結

到這裡我們掌握了RecyclerView的基本使用方式。
接下來還要了解如何自定義它的表現形式。例如點選或長按item的反應;item之間新增分割線;增/刪/改資料;使用瀑布流樣式等等。
RecyclerView使用了介面卡模式。

可以參考官方的RecyclerView文件。

工程放這裡: https://github.com/AnRFDev/Tutorial2020

相關閱讀
RecyclerView - 使用入門
RecyclerView點選事件 - 如何設定點選事件
RecyclerView示例 - 實際使用
RecyclerView獲取滑動距離
RecyclerView顯示多種i