寫在前面的話

1、內容主要參考自：https://www.bilibili.com/video/BV1Dt411L74N
2、這部分的內容，主要是跟著視頻做例子走的，如果有不對的，希望可以指出或補充，
3、完成了類似于串列視圖（ListView）、網格視圖（GridView）以及瀑布流視圖的效果，
4、新知識，

一、概述

回圈器視圖（RecyclerView）能夠實作這些功能（如）：橫向滾動的ListView、橫向滾動的GridView、瀑布流控制元件，

Android 控制元件 RecyclerView

二、注意事項

1、各個部分id名稱定義成便于識別且好記的，

2、在復制更改相似代碼的時候，注意不同點的更改，尤其是id名稱，

3、要有一個整體的思路，

三、遇到的問題

一定要注意細節問題，
報錯顯示的錯誤地方（如圖框框里的）有可能只是受到了影響，不是主要原因，
找bug的方法是找caused by開頭的，從下往上找（轉），

1、在完成了ListView視圖效果部分的時候，進行運行時，出現如下顯示的錯誤，

嘗試自己看它對應的報錯部分，沒有發現問題，然后開始百度，也沒找到正確的解決方法，
突然想到會不會是導包問題，果然，
再找到對應的，

刪掉標出來的框框里的內容就可以了！

四、步驟展示

（一）檔案準備

先把需要用到的檔案以及圖片素材，建好放好，

注：
1.為了明顯的展示出瀑布流視圖的效果，所以準備了兩張不同大小的圖片（一個橫向、一個豎向的），
2.這里采用的自定義配接器（繼承基配接器），

（二）選單欄部分

這部分相當于是一個界面的互動視窗，連接著各個選項對應著的效果，

① 串列視圖效果部分（網格視圖效果部分、 瀑布流視圖效果部分同理，復制更改就行），

<item
        android:id="@+id/list_view"
        android:title="ListView效果">
        <menu>
            <item
                android:id="@+id/list_view_v"
                android:title="垂直" />
            <item
                android:id="@+id/list_view_v2"
                android:title="垂直反向" />
            <item
                android:id="@+id/list_view_h"
                android:title="水平" />
            <item
                android:id="@+id/list_view_h2"
                android:title="水平反向" />
        </menu>
    </item>

② 選單欄效果，如下，

（三）依賴部分

實作的視圖效果都會參考到的部分，

1、首先來看資料構造的部分（datas檔案夾），如下:

① 每個條目都是由圖片+標題組成的，

圖片數量任意多少都可以，為便于展現瀑布流視圖參差不齊的效果，圖片（橫向和豎向的圖片）是間隔插入的，

2、布區域分（layout檔案夾），如下：

在所有的布局上，整體都采用的是相對布局（也可以用別的方式），為了效果展示明顯些，將這里的背景顏色和其他布局中的測驗標題的字體顏色設成差別較大的顏色，

① 主布區域分，也就是參考RecyclerView控制元件的地方，

3、設配器部分（adapters檔案夾），如下：

① BaseAdapter，其他幾個都會繼承這個的，基本配接器，有了這個就可以大大減少代碼量了，

package com.example.testrecyclerview.adapters;

import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import com.example.testrecyclerview.R;
import com.example.testrecyclerview.datas.EachItem;
import java.util.List;

public abstract class BaseAdapter extends RecyclerView.Adapter<BaseAdapter.InnerHolder> {
    //成員變數   都可以呼叫
    private final List<EachItem> datas;
    //資料設定進來
    public BaseAdapter(List<EachItem> data){
        this.datas = data;
    }

    //創建條目
    @Override
    public BaseAdapter.InnerHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //sub自定義
        View view = getSubView(parent, viewType);
        return new InnerHolder(view);
    }

    protected abstract View getSubView(ViewGroup parent, int viewType);


    //系結holder的，一般是用來設定引數
    @Override
    public void onBindViewHolder(BaseAdapter.InnerHolder holder, int position) {
        //設定引數
        holder.setData(datas.get(position));
    }

    //回傳條目個數
    @Override
    public int getItemCount() {
        if (datas != null) {
            return datas.size();
        }
        return 0;
    }

    public class InnerHolder extends RecyclerView.ViewHolder{
        //成員變數
        private ImageView iconMy;
        private TextView titleMy;

        public InnerHolder(View itemView){
            super(itemView);

            //找到條目控制元件
            //也就是找到統一好了的id名稱
            iconMy = itemView.findViewById(R.id.icon);
            titleMy = itemView.findViewById(R.id.title);
        }

        //設定資料的
        public void setData(EachItem itemBean) {
            //設定引數
            iconMy.setImageResource(itemBean.img);
            titleMy.setText(itemBean.title);
        }
    }
}

（四）實作ListView效果

1、實作串列視圖效果的布區域分（item_list_view.xml），

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <!--卡片樣式，其實也可以用別的方式替代，待嘗試-->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:cardUseCompatPadding="true">
        <!--主要內容-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="110dp">

            <!--圖示部分-->
            <ImageView
                android:id="@+id/icon"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_margin="10dp"

                android:scaleType="fitXY"
                android:src="@mipmap/test_img" />
            <!--標題部分-->
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="150dp"

                android:text="測驗標題"
                android:textSize="30sp" />
        </RelativeLayout>
    </androidx.cardview.widget.CardView>

</RelativeLayout>

以上的效果如下：

2、 連接串列視圖布局的（ListViewAdapter），

其他幾個視圖配接器同理設定，如下的框框部分就是需要更改的點（改成相對應的名稱），

GridView效果以及瀑布流效果的實作略，

五、效果展示

① 運行主視窗（MainActivity.java）

這里實作了：模擬資料，加載選單并點擊實作相應的點擊事件，ListView、GridView以及瀑布流的水平垂直正向反向的布局效果，

package com.example.testrecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import com.example.testrecyclerview.adapters.GridViewAdapter;
import com.example.testrecyclerview.adapters.ListViewAdapter;
import com.example.testrecyclerview.adapters.StaggerAdapter;
import com.example.testrecyclerview.datas.DatasImg;
import com.example.testrecyclerview.datas.EachItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

      private RecyclerView listMy;
      private List<EachItem> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //呼叫主界面
        setContentView(R.layout.layout_main);

        //找到recyclerview控制元件
        listMy = (RecyclerView) this.findViewById(R.id.recycler_view);
        //資料準備  模擬資料
        initData();
        //設定默認的顯示樣式為ListView
        showList(true,false);
    }
    //模擬資料
    private void initData(){
        //創建資料集合
        datas = new ArrayList<>();

        //創建模擬資料
        for (int i = 0; i < DatasImg.icons.length; i++) {
            //資料物件
            EachItem data = new EachItem();
            data.img = DatasImg.icons[i];
            data.title = i+"只貓";
            //添加到集合里面
            datas.add(data);
        }
    }

    //加載選單的
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //一個引數用于指定通過什么資源檔案來創建選單，第二個引數用于指定選單項添加到哪一個Menu物件當中，
        getMenuInflater().inflate(R.menu.menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    //選單點擊事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int itemId = item.getItemId();

        switch (itemId){
            //ListView效果
            case R.id.list_view_v:
                showList(true,false);
                break;
            case R.id.list_view_v2:
                showList(true,true);
                break;
            case R.id.list_view_h:
                showList(false,false);
                break;
            case R.id.list_view_h2:
                showList(false,true);
                break;

            //網格效果
            case R.id.grid_view_v:
                showGrid(true,false);
                break;
            case R.id.grid_view_v2:
                showGrid(true,true);
                break;
            case R.id.grid_view_h:
                showGrid(false,false);
                break;
            case R.id.grid_view_h2:
                showGrid(false,true);
                break;

            //瀑布流效果
            case R.id.stagger_view_v:
                showStagger(true,false);
                break;
            case R.id.stagger_view_v2:
                showStagger(true,true);
                break;
            case R.id.stagger_view_h:
                showStagger(false,false);
                break;
            case R.id.stagger_view_h2:
                showStagger(false,true);
                break;
        }

        return super.onOptionsItemSelected(item);
    }

    //用于顯示ListView效果
    private void showList(boolean isVertical,boolean isReverse) {
        //設定布局管理器（樣式）
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);

        //設定水平/垂直
        //設定一個布局管理器來控制
        layoutManager.setOrientation(isVertical?
                LinearLayoutManager.VERTICAL:LinearLayoutManager.HORIZONTAL);
        //默認是正向的（左到右，上到下）
        // 設定反向
        // 滑動方向
       layoutManager.setReverseLayout(isReverse);

        listMy.setLayoutManager(layoutManager);
        //創建配接器
        ListViewAdapter adapter = new ListViewAdapter(datas);
        //設定到RecyclerView控制元件里面去
        listMy.setAdapter(adapter);
    }

    //用于顯示GridView效果
    private void showGrid(boolean isVertical,boolean isReverse) {
        //創建布局管理器
        GridLayoutManager layoutManager = new GridLayoutManager(this,3);
        //設定水平/垂直
        layoutManager.setOrientation(isVertical ?
                LinearLayoutManager.VERTICAL:LinearLayoutManager.HORIZONTAL);
        //反向
        layoutManager.setReverseLayout(isReverse);

        //設定布局管理器
        listMy.setLayoutManager(layoutManager);
        //創建配接器
        GridViewAdapter adapter = new GridViewAdapter(datas);
        //設定到RecyclerView控制元件里面去
        listMy.setAdapter(adapter);
    }

    //實作瀑布流效果
    private void showStagger(boolean isVertical,boolean isReverse) {

        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,
                isVertical?StaggeredGridLayoutManager.VERTICAL:StaggeredGridLayoutManager.HORIZONTAL);
        layoutManager.setReverseLayout(isReverse);

        listMy.setLayoutManager(layoutManager);
        StaggerAdapter adapter = new StaggerAdapter(datas);
        listMy.setAdapter(adapter);
    }
}

② 運行效果（部分）如下：

六、補充內容

完整代碼鏈接（百度網盤）：https://pan.baidu.com/s/1fRtVsQFuBID9JaJ9lv2E2A
提取碼：0vyp