Android教程2020 - RecyclerView實際使用

示例，用RecyclerView的item做出一個列表。

Android教程2020 - 系列總覽

本文鏈接

前面我們已經知道如何用RecyclerView顯示一列數據。這裏我們做出一個具體的例子。儘量做好看一點。

這個示例會分爲以下幾個步驟：

• 確定數據。這裏用的是模擬數據。
• 設計UI和表現形式。
• 編寫layout與適配器。

模擬數據

先模擬一個數據。新建一個類DataTest，它有4個屬性。

public class DataTest {
    private String timezone;
    private int number;
    private int personCount;
    private int count;

    public DataTest(String timezone, int number, int personCount, int count) {
        this.timezone = timezone;
        this.number = number;
        this.personCount = personCount;
        this.count = count;
    }
// getter setter...
}

設計item的佈局

設計UI，在一行裏顯示4個屬性值。item用的是item_recy2.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="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv1"
        style="@style/RePage2Header"
        android:layout_marginEnd="@dimen/re_2_half_gap" />

    <TextView
        android:id="@+id/tv2"
        style="@style/RePage2Header"
        android:layout_marginStart="@dimen/re_2_half_gap"
        android:layout_marginEnd="@dimen/re_2_half_gap" />

    <TextView
        android:id="@+id/tv3"
        style="@style/RePage2Header"
        android:layout_marginStart="@dimen/re_2_half_gap"
        android:layout_marginEnd="@dimen/re_2_half_gap" />

    <TextView
        android:id="@+id/tv4"
        style="@style/RePage2Header"
        android:layout_marginStart="@dimen/re_2_half_gap" />

</LinearLayout>

準備顏色，尺寸等資源

相關的style和顏色，尺寸配置文件，在res/values目錄下。

style文件style.xml。

    <style name="RePage2Header">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_weight">2</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:gravity">center</item>
        <item name="android:background">@color/rePage2Item</item>
    </style>

我們給layout裏的每個TextView都設置了layout_width爲0dp。是爲了使用layout_weight屬性。
讓它們4個TextView按比例分割父View的寬度。

顏色配置文件color.xml，添加如下顏色設置。

    <color name="rePage2Item">#082941</color>

尺寸配置dimens.xml。

    <dimen name="re_2_gap">4dp</dimen>
    <dimen name="re_2_half_gap">2dp</dimen>

設計ViewHolder

資源文件和layout準備妥當，開始寫對應的viewHolder。這裏也是把VH類和Adapter類放在activity類裏面。

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

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

設計Adapter類

適配器Adapter類。

    private class Adapter extends RecyclerView.Adapter<VH> {

        private List<DataTest> dataList = new ArrayList<>();

        public Adapter() {
        }

        public void setDataList(List<DataTest> dataList) {
            this.dataList = dataList;
            notifyDataSetChanged();
        }

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

        @Override
        public void onBindViewHolder(@NonNull VH holder, int position) {
            DataTest dataTest = dataList.get(position);
            holder.tv1.setText(dataTest.getTimezone());
            holder.tv2.setText(String.valueOf(dataTest.getNumber()));
            holder.tv3.setText(String.valueOf(dataTest.getPersonCount()));
            holder.tv4.setText(String.valueOf(dataTest.getCount()));
        }

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

配置RecyclerView

設置recyclerview。

    private Adapter mAdapter = new Adapter();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_recy_2);
        RecyclerView recyclerView = findViewById(R.id.re_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, RecyclerView.VERTICAL, false));
        recyclerView.setAdapter(mAdapter);
        mAdapter.setDataList(genDataTestList());
        recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
            @Override
            public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
                super.getItemOffsets(outRect, view, parent, state);
                outRect.top = getResources().getDimensionPixelOffset(R.dimen.re_2_gap);
            }
        });
    }

    // 生成模擬數據
    private List<DataTest> genDataTestList() {
        List<DataTest> list = new ArrayList<>();
        for (int i = 1; i <= 60; i++) {
            DataTest d = new DataTest("時區" + i, i, i, i);
            list.add(d);
        }
        return list;
    }

在onCreate方法中配置recyclerView。
recyclerView.addItemDecoration方法是給item設置間隔樣式。
getItemOffsets可以設置子項的間距。這裏給子項底部一個間距值。具體數值設置在dimen中。
genDataTestList()是生成模擬的數據。

運行效果

運行起來即可看到效果。

使用include修改layout

看到效果圖，有的朋友問：表頭和item的結構是一樣的，可以複用嗎？
其實是可以的。我們可以在layout中使用include標籤，把另一個layout文件“包含”進來。
複製act_recy_2.xml粘貼得到act_recy_2_include.xml，把原來的表頭的LinearLayout改成include。

<include layout="@layout/item_recy2" />

給include設定layout，即我們定義的item的佈局item_recy2。
當我們想添加個margin-top的時候，比如這樣

    <include
        android:layout_marginTop="4dp"
        layout="@layout/item_recy2" />

as會彈出警告：

Layout parameter layout_marginTop ignored unless both layout_width and layout_height are also specified on tag

也就是在include標籤中，如果要設置其他屬性，需要先設置layout_width和layout_height。
修改一下，再加個id，變成這樣。

    <include
        android:id="@+id/header"
        layout="@layout/item_recy2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp" />

讓Activity使用這個layout。修改一下RecyclerViewDemo2Act。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_recy_2_include);
        initHeader();
        // 配置RecyclerView的部分
    }

    private void initHeader() {
        View header = findViewById(R.id.header);
        TextView tv1 = header.findViewById(R.id.tv1);
        tv1.setText("時區");
        TextView tv2 = header.findViewById(R.id.tv2);
        tv2.setText("序號");
        TextView tv3 = header.findViewById(R.id.tv3);
        tv3.setText("人員");
        TextView tv4 = header.findViewById(R.id.tv4);
        tv4.setText("數量");
    }

我們添加了一個方法initHeader()。裏面先把header找到，通過header找到它的子view，也就是那4個TextView。
分別設置文字即可。

運行看看效果，是不是和前面的一樣。

工程放這裏： https://github.com/AnRFDev/Tutorial2020
相關閱讀
RecyclerView - 使用入門
RecyclerView點擊事件 - 如何設置點擊事件
RecyclerView示例 - 實際使用
RecyclerView獲取滑動距離
RecyclerView顯示多種item