[Android Studio] UltimateRecyclerView 實現載入更多(Load More)與向上滑動刷新(Refresh)使用簡介

工作日誌 Day 11

※ 載入更多( Load More )

※ 向上滑動刷新 ( Refresh )


UltimateRecyclerView 是一個第三方套件

這個作者有點厲害,他在官方推出的RecyclerView的基礎上,加入了超多功能

除了我這篇文章會用到了 載入更多 向上滑動刷新

還有諸如向右滑可以把label滑掉,向左滑可以滑出另外的按鈕動畫等等

非常華麗!

詳細可以參考他的 GITHUB -> 連結

本篇文章只是稍微簡介他在 Load More Refresh 的用法而已

有興趣的人可以去研究它的更多功能

 

實現成品大概如下

把整個畫面往下滑的時候,最上面會出現轉圈圈的動畫,放開後頁面會重新整理

還有把畫面移到最下面的時候,最下方也會出現轉圈圈的圖案

然後譬如本來一個畫面只有10張圖片,他會再載入另外10張圖片(可以自己設定)

畫面一共就會有20張,主要是用來防止瞬間載入太多圖片的一個功能

 


開始介紹用法 (因為他的架構建立在 RecyclerView 上,強烈建議先把RecyclerView玩熟再來玩他)

Step 1 安裝

當然就是要安裝他

 build.gradle (Module:app) 內加入

compile 'com.marshalchen.ultimaterecyclerview:library:0.3.4'

Step 2 建立 UltimateAdapter (Java Class 檔)

跟RecyclerView一樣,要建立一個類別,我們通常取名叫Adapter

在此我就把他取名叫 UltimateAdapter

然後要繼承 UlitmateViewAdapter

像這樣

public class UltimateAdapter extends UltimateViewAdapter {

也跟RecyclerView一樣的

他要實作 

onCreateViewHolder 跟 onBindViewHolder getAdapterItemCount (RecyclerView 裡面是叫 getItemCount() )

public UltimateRecyclerviewViewHolder onCreateViewHolder(ViewGroup parent) 
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position)
public int getAdapterItemCount() {
    return ivs.size(); // 這邊要回傳你總共要產生幾個項目,在此我回傳的是我圖片的總數量
}

onCreateViewHolder 是用來連結和取得你 Layout 檔的物件 (你自訂要顯示樣式的那個Layout檔)

onBindViewHolder 就是在你onCreateViewHolder 取得連結後,把值傳入到這些你連結的物件上

getAdapterItemCount  會決定你 onBindViewHolder 執行的次數

 Ultimate 與以往不同的是 他必須多實作

public RecyclerView.ViewHolder onCreateHeaderViewHolder(ViewGroup parent) 
public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder, int position)
public long generateHeaderId(int position)

我們這個範例要實作的 載入更多 跟 向上滑動刷新 沒有使用到這三個 (但還是要實作)

所以 我們給他最簡單的設置

onBindHeaderViewHolder 因為是 viod (不用回傳值) 所以直接空白就行 像這樣

@Override
public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder, int position) {

}

onCreateHeaderViewHolder 我們給他回傳 null 即可

@Override
public RecyclerView.ViewHolder onCreateHeaderViewHolder(ViewGroup parent) {
    return null;
}

generateHeaderId 就直接回傳 0

@Override
public long generateHeaderId(int position) {
    return 0;
}

 

到這邊為止,其實都跟原本的RecyclerView沒有太大差別

onCreateViewHolder、onBindViewHolder 就套用以前在 RecyclerView的寫法即可

唯一要注意的是

onBindViewHolder 裡面的開頭要加這行

if (getItemViewType(position) == VIEW_TYPES.NORMAL) {

告訴 UltimateRecyclerView 我們目前要操作的 不是 VIEW_TYPES.HEADER 也不是 VIEW_TYPES.FOOTER 

 

Step 3 activity_main.xml 設置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fffffe"
    tools:ignore="MissingPrefix"
    android:padding="8dp">

    <com.marshalchen.ultimaterecyclerview.UltimateRecyclerView
        android:id="@+id/Ultimate_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fffffe" />

</RelativeLayout>

這邊用最簡單的布局,裡面就塞一個 UltimateRecyclerView 然後給牠一個 idUltimate_view 等等對他做連結

 

Step 4 MainActivity 設置

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();
}

private void init() {
    UltimateRecyclerView ultimateView = (UltimateRecyclerView)findViewById(R.id.Ultimate_view);
    UltimateAdapter ultimateAdapter = new UltimateAdapter(this);

    ultimateView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
    ultimateView.setDefaultOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            ultimateView.setRefreshing(false);
            // .... 放你在更新時想執行的動作
        }
    });
    ultimateView.enableLoadmore();
    ultimateView.setOnLoadMoreListener(loadMoreListener);
    ultimateView.setAdapter(ultimateAdapter);
}

就連主程式的設置也跟RecyclerView一樣!

這行就是指定我要使用瀑布流顯示兩行 而且是垂直顯示

ultimateView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

寫法完全跟原本一樣

差別在他多出了兩個新東西

1. enableLoadmore()  / disableLoadmore()

ultimateView.enableLoadmore();

這行是啟用 載入更多 ( Load More ) 功能 

你可以隨時配合

ultimateView.disableLoadmore();

關閉此功能

他也必須配合監聽使用

ultimateView.setOnLoadMoreListener(loadMoreListener);

loadMoreListener長這樣

private UltimateRecyclerView.OnLoadMoreListener loadMoreListener = new UltimateRecyclerView.OnLoadMoreListener() {
    @Override
    public void loadMore(int itemCount, int maxLastVisiblePosition) {
        //... 這邊設定你想做的事情
    }
};

2. serRefreshing()

ultimateView.setRefreshing(ture);
ultimateView.setRefreshing(false);

啟用/關閉 向上滑動刷新 功能

一樣要設置監聽

ultimateView.setDefaultOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        ultimateView.setRefreshing(false);
        // .... 放你在更新時想執行的動作
    }
});

 

以上全部都設定好,就可以執行看成果了!

 

 

 

資料來源

1. 公司元老程式

2. 自己摸索