工作日誌 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. 自己摸索