Android開發丶萬能適配器BaseQuickAdapter和刷新控件SmartRefreshLayout搭配Recyclerview實現列表界面

幾乎每個app都離不開列表界面,實現的方式也是各種五花八門,隨着技術的日新月異,各種相關的控件封裝的也越來越徹底,功能越來越強大,本文則詳細記錄了時下最火的萬能適配器BaseQuickAdapter、刷新控件SmartRefreshLayout搭配Recyclerview實現列表的步驟。

國際慣例,先看效果圖:

1.首先我們引入各類依賴

打開build.gradle

//recyclerview
implementation 'androidx.recyclerview:recyclerview:1.0.0'
//列表刷新加載控件
implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0'
//列表適配器
implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30'

打開project.gradle,添加maven { url "https://jitpack.io" }

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

加載,無報錯即添加依賴成功

2.在視圖Activity的xml文件中添加控件,即給recyclerview外面套一層刷新控件smartRefreshLayout。

<com.scwang.smartrefresh.layout.SmartRefreshLayout
    android:id="@+id/main_smartrefreshlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/main_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

3.接下來新建列表的適配器adapter,繼承BaseQuickAdapter

畫一個item的xml文件,很簡單,就放一個TextView

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_nameTv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:textColor="#333333"
    android:padding="@dimen/dp_10"
    android:text="---" />

編輯adapter,通過setText來設置文字,addOnClickListener來設置點擊監聽。
/**
 * 列表適配器
 * @author created by fantasychong
 * @date 2020-03-06
 */
public class ContentAdapter extends BaseQuickAdapter<ContentBean, BaseViewHolder> {

    public ContentAdapter(@Nullable List<ContentBean> list) {
        super(R.layout.item_main, list);
    }

    @Override
    protected void convert(BaseViewHolder helper, ContentBean item) {
        helper.setText(R.id.item_nameTv, item.getName())
                .addOnClickListener(R.id.item_nameTv);
    }
}

怎麼樣?相比BaseAdapter很簡潔吧。

4.回到視圖Activity,先讓列表顯示出來,這裏就是常規的Recyclerview設置

recyclerview = findViewById(R.id.main_recyclerview);
recyclerview.setLayoutManager(new LinearLayoutManager(this));
contentAdapter = new ContentAdapter(new ArrayList<ContentBean>());
recyclerview.setAdapter(contentAdapter);

配置數據,由setNewData賦值,即可顯示列表。

/**
 * 配置數據
 */
private void initData() {
    list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        list.add(new ContentBean("zhangsan"));
    }
    if (contentAdapter != null) {
        contentAdapter.setNewData(list);
    }
}

跑起來~

給列表設置點擊監聽。

contentAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
    @Override
    public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
        switch (view.getId()) {
            case R.id.item_nameTv:
                Toast.makeText(MainActivity.this, ((ContentBean)  
                adapter.getData().get(position)).getName(), Toast.LENGTH_SHORT).show();
                break;
        }
    }
});

5.下面設置下空佈局

View view = LayoutInflater.from(this).inflate(R.layout.view_empty, null);
contentAdapter.setEmptyView(view);

我們把測試數據調成空,運行!

6.接下來我們設置下SmartRefreshLayout的上拉加載和下拉刷新監聽。

smartrefreshlayout = findViewById(R.id.main_smartrefreshlayout);
smartrefreshlayout.setOnRefreshLoadMoreListener(new OnRefreshLoadMoreListener() {
    @Override
    public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
        if (contentAdapter != null) {
            contentAdapter.addData(list);
            smartrefreshlayout.finishLoadMore(200);
        }
    }
    @Override
    public void onRefresh(@NonNull RefreshLayout refreshLayout) {
        initData();
        smartrefreshlayout.finishRefresh(200);
    }
});

運行

功能實現了,同時SmartRefreshLayout爲我們提供了很多刷新動畫,我們修改成經典的文字日期式樣的

smartrefreshlayout.setRefreshHeader(new ClassicsHeader(this));
smartrefreshlayout.setRefreshFooter(new ClassicsFooter(this));

運行

至此全部完成,demo附上!

資源下載

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章