[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 然後給牠一個 id 叫 Ultimate_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. 自己摸索