Search

2015-10-17

Android - RecyclerView 與 SwipeRefreshLayout 以及捲動加載下一頁資料的完整建置

2015-10-17 11:10 AM

RecyclerView 是 Android 釋出用以取代 ListView 的元件

他比 ListView 效能更好 資源運用更靈活

不過在初始化方面是稍微複雜了點

現在我們就來一步步介紹該怎麼加入 RecyclerView 並使用 SwipeRefreshLayout

實作向下滑動更新的功能

首先我們先來看看 xml layout 的部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <RelativeLayout
            android:id="@+id/favItemHolder"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/pullToRefreshCateRecycler"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="visible">

            <android.support.v7.widget.RecyclerView
                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/cateRecyclerView"
                    android:layout_centerVertical="true"
                    android:layout_centerHorizontal="true"/>

        </android.support.v4.widget.SwipeRefreshLayout>

    </RelativeLayout>
</LinearLayout>

這時你會看到右方預覽介面是空白的



這是正常的結果所以不用擔心

接下來我們要新增 RecyclerView 裡面的 Item Layout

並將內容置中

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/fav_item_background_shape"
             android:layout_marginBottom="5px"
             android:layout_marginTop="10px"
             android:layout_marginLeft="5px"
             android:layout_marginRight="5px">

    <LinearLayout
            android:paddingLeft="5dp"
            android:paddingTop="3dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <TextView
                    android:id="@+id/cateItemTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:textColor="#E7E7E7"
                    android:layout_centerVertical="true"
                    android:layout_centerHorizontal="true"
                    android:text="Title"/>

        </RelativeLayout>

        <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10px">

            <TextView
                    android:id="@+id/cateItemDesc"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Description of this item."
                    android:textColor="#E1E1E1"
                    android:layout_centerVertical="true"
                    android:layout_centerHorizontal="true"/>

        </RelativeLayout>

    </LinearLayout>

</FrameLayout>

看起來就會像這樣



那麼介面完成了 現在就要開始程式碼的部分

RecyclerView 需要一個 Adapter 配合

主要用途是 Item 的操作, 以及 layout 的載入

我們先來看 Adapter 該如何建立

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.ihad.ptt.model.bean.CategoryBean;

import java.util.Map;
import java.util.Set;

public class CateRecyclerAdapter extends RecyclerView.Adapter<CateRecyclerAdapter.ItemHolder> {

    // 物件儲存 Map
    private Map<Integer, CategoryBean> categoryBeans;
    // 點擊處理
    private ItemHolder.IClickHandler clickHandler;

    public CateRecyclerAdapter(Map<Integer, CategoryBean> categoryBeans, ItemHolder.IClickHandler handler) {
        this.categoryBeans = categoryBeans;
        this.clickHandler = handler;
    }

    // 載入 Layout
    @Override
    public ItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // create a new view
        View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.cate_item, parent, false);

        // create ViewHolder
        ItemHolder viewHolder = new ItemHolder(itemLayoutView, clickHandler);
        return viewHolder;
    }

    // 更新 View
    @Override
    public void onBindViewHolder(ItemHolder holder, int position) {

        CategoryBean categoryBean = categoryBeans.get( position + 1 );

        if( categoryBean == null ) return;

        holder.cateItemTitle.setText( categoryBean.getName() );
        holder.cateItemDesc.setText( categoryBean.getDesc() );

    }

    // 取得已加入 Item 數量
    @Override
    public int getItemCount() {
        return categoryBeans.size();
    }

    // 取得 Item
    public CategoryBean getItem(int key){
        return categoryBeans.get( key );
    }

    // 已加入 Item 是否重複判斷
    public boolean isDuplicate( Map<Integer, CategoryBean> categoryBeanMap ){

        if( !categoryBeans.isEmpty() ){
            Set<Integer> keySet = categoryBeanMap.keySet();
            int foundCount = 0;

            for (Integer key : keySet) {
                if ( categoryBeans.containsKey(key) ) foundCount++;
            }

            if ( foundCount == categoryBeanMap.size() ) return true;
        }

        return false;
    }

    // 加入 Item
    public void addItem(CategoryBean categoryBean){
        categoryBeans.put( categoryBean.getSerialNum(), categoryBean );
    }

    // 清除所有 Item
    public void clear(){
        this.notifyItemRangeRemoved( 0, categoryBeans.size() );
        categoryBeans.clear();
    }

    // Item
    public static class ItemHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        public TextView cateItemTitle;
        public TextView cateItemDesc;
        public IClickHandler clickHandler;

        public ItemHolder(View view, IClickHandler handler) {
            super(view);
            view.setOnClickListener(this);
            cateItemTitle = (TextView) view.findViewById(R.id.cateItemTitle);
            cateItemDesc = (TextView) view.findViewById(R.id.cateItemDesc);

            clickHandler = handler;
        }

        @Override
        public void onClick(View view) {
            int position = getLayoutPosition();

            clickHandler.onClick(view, position);
        }

        public interface IClickHandler {
            void onClick(View caller, int position);
        }
    }
}

這個部分應該沒什麼問題

接下來我們來看該如何連結所有的 Layout 及 Adapter 並將 Item 讀入 RecyclerView

import android.os.Bundle;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.Toast;
import cmc.toolkit.CTrace;
import com.ihad.ptt.model.bean.CategoryBean;
import com.ihad.ptt.model.bean.FavoriteBoardBean;
import roboguice.fragment.RoboFragment;

import java.util.LinkedHashMap;
import java.util.Map;
import java.util.Set;

public class CategoryFragment extends RoboFragment {

    public static final String CATE_PAGE = "CATE_PAGE";
    private int mPage;

    // 滑動更新用
    private SwipeRefreshLayout cateSwipeRefreshLayout;
    private SwipeRefreshLayout cateSubSwipeRefreshLayout;

    // RecyclerView 的呈現方式
    // 有線性(LinearLayoutManager), 塊狀(GridLayoutManager) 以及不規則塊狀(StaggeredGridLayoutManager) 三種
    private LinearLayoutManager mCateLinearLayoutManager;
    // Adapter
    private CateRecyclerAdapter mCateAdapter;

    // 是否正在讀取
    private boolean isCateLoading   = false;
    // 是否已讀取完整資料
    private boolean noCateMoreData  = false;

    // 若是在 Activity 中建立的不需要管這個 本例為使用 Fragment 加載
    public static CategoryFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(CATE_PAGE, page);
        CategoryFragment fragment = new CategoryFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(CATE_PAGE);

        // 分類目錄
        mCateAdapter = new CateRecyclerAdapter( new LinkedHashMap<Integer, CategoryBean>(), new CateRecyclerAdapter.ItemHolder.IClickHandler() {
            @Override
            public void onClick(View view, int position) {
                // 使用 Position 取得物件 這裡 +1 是因為我使用 1 based 方式建立的序號
                CategoryBean categoryBean = mCateAdapter.getItem( position + 1 );

                if( categoryBean == null ) {
                    Toast.makeText(view.getContext(), "Find nothing", Toast.LENGTH_SHORT).show();
                }
                else{
                    // 點擊後的處理 可自行設定 若是在 Activity 新增則不須再取得 Activity
                    MainActivity mainActivity = (MainActivity) getActivity();
                    mainActivity.goCateSubList(categoryBean);
                }
            }
        });
    }

    // 取得 Layout 並初始化各項元件
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // 這個是放 RecyclerView 的 Layout
        View view = inflater.inflate(R.layout.cate_frag_page, container, false);

        cateSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.pullToRefreshCateRecycler);

        // 設定滑動更新 loader 的顏色 預設為黑色
        cateSwipeRefreshLayout.setColorSchemeColors(0xFF4FC3F7, 0xFF8558E0, 0xFFFF326F, 0xFFF9F765);

        // 滑動更新監聽設定
        cateSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // 清除所有 Item
                mCateAdapter.clear();

                // 呼叫重新整理 function
                MainActivity mainActivity = (MainActivity) getActivity();
                mainActivity.reloadCatePage();

                // 設定為尚有資料
                noCateMoreData = false;
            }
        });

        // new 一個 LinearLayoutManager 結果將呈現為縱向捲動清單
        mCateLinearLayoutManager = new LinearLayoutManager(getActivity());
        mCateLinearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

        // 取得 RecyclerView
        RecyclerView cateRecyclerView = (RecyclerView) view.findViewById(R.id.cateRecyclerView);

        // 底下一併介紹其他呈現方式的設定方法
        // List layout
        cateRecyclerView.setLayoutManager(mCateLinearLayoutManager);
        // Grid layout
        //cateRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));
        // StaggeredGrid layout
        //cateRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL));

        // 將 Adapter 指定給 RecyclerView
        cateRecyclerView.setAdapter(mCateAdapter);
        // 加入動畫 若指定 null 就不會有動畫
        cateRecyclerView.setItemAnimator(new DefaultItemAnimator());

        // 向下捲動自動加載新資料
        cateRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {

                int visibleItemCount = mCateLinearLayoutManager.getChildCount();
                int totalItemCount = mCateLinearLayoutManager.getItemCount();
                int pastVisiblesItems = mCateLinearLayoutManager.findFirstVisibleItemPosition();

                // 視情況修改在第幾項 Item 顯示時自動讀取下一頁
                // 本範例為單次讀取 20 筆資料, 捲動至第 10 筆時自動讀取下一頁
                if( totalItemCount > 10 ){
                    totalItemCount = totalItemCount - 10;
                }

                // 確保為向下捲動
                if( dy < 0 ) return;

                // 用來控制重複讀取以及已無新資料的狀況
                if (!isCateLoading && !noCateMoreData) {
                    // 顯示項目已超過十項 自動讀取資料
                    if ((visibleItemCount + pastVisiblesItems) >= totalItemCount) {
                        isCateLoading = true;
                        // 呼叫讀取下一頁資料的 function
                        MainActivity mainActivity = (MainActivity) getActivity();
                        mainActivity.nextCatePage();
                    }
                }
            }
        });

        return view;
    }

    // 設定為讀取中 顯示 loader
    public void cateRefreshing(boolean refreshing){
        if( cateSwipeRefreshLayout == null ) return;

        cateSwipeRefreshLayout.setRefreshing(refreshing);
    }

    // 加入讀取完成的資料
    public boolean addCateItems(Map<Integer, CategoryBean> categoryBeanMap){

        Set<Integer> keySet = categoryBeanMap.keySet();

        for( Integer key : keySet ){
            CategoryBean categoryBean = categoryBeanMap.get(key);
            mCateAdapter.addItem(categoryBean);
            // 因資料建立時是使用 1 based 方式所以需要 - 1
            mCateAdapter.notifyItemChanged(categoryBean.getSerialNum() - 1);
        }

        return false;
    }

    // 資料已加入 設定為可讀取下一頁資料
    public void addCateFinished(){
        isCateLoading = false;
    }

}

到這裡就完成了

本範例使用的雖然是 Fragment 但大致上使用方式使相同的

若要在直接在 Activity 中加入 RecyclerView 方法是一樣的

但 Adapter 的建立就不需要分開在不同的地方

Fragment 是因為若不先在 OnCreate 時建立 Adapter

而在 OnCreateView 內建立的話會有問題

Log 會顯示 RecyclerView 沒有配對的 Adapter 將忽略載入

這種情況即使你有將物件加入 Adapter 也會呈現空白的資料

原因目前還不清楚 但若在 Activity 內就不會有這個問題

以下是在 Activity 內建立的範例


@InjectView(R.id.pullToRefreshCateRecycler)
private SwipeRefreshLayout cateSwipeRefreshLayout;

@InjectView(R.id.cateRecyclerView)
private RecyclerView cateRecyclerView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

 mCateAdapter = new CateRecyclerAdapter( new LinkedHashMap<Integer, CategoryBean>(), new CateRecyclerAdapter.ItemHolder.IClickHandler() {
     @Override
     public void onClick(View view, int position) {

         CategoryBean categoryBean = mCateAdapter.getItem( position + 1 );

         if( categoryBean == null ) {
             Toast.makeText(view.getContext(), "Find nothing", Toast.LENGTH_SHORT).show();
         }
         else{
             goCateSubList(categoryBean);
         }
     }
 });

 cateSwipeRefreshLayout.setColorSchemeColors(0xFF4FC3F7, 0xFF8558E0, 0xFFFF326F, 0xFFF9F765);

 cateSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
     @Override
     public void onRefresh() {
         mCateAdapter.clear();
         reloadCatePage();
         noCateMoreData = false;
     }
 });

 mCateLinearLayoutManager = new LinearLayoutManager(getActivity());
 mCateLinearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

 RecyclerView cateRecyclerView = (RecyclerView) view.findViewById(R.id.cateRecyclerView);

 cateRecyclerView.setAdapter(mCateAdapter);
 cateRecyclerView.setItemAnimator(new DefaultItemAnimator());

 cateRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
     @Override
     public void onScrolled(RecyclerView recyclerView, int dx, int dy) {

         int visibleItemCount = mCateLinearLayoutManager.getChildCount();
         int totalItemCount = mCateLinearLayoutManager.getItemCount();
         int pastVisiblesItems = mCateLinearLayoutManager.findFirstVisibleItemPosition();

         if( totalItemCount > 10 ){
             totalItemCount = totalItemCount - 10;
         }

         if( dy < 0 ) return;

         if (!isCateLoading && !noCateMoreData) {
             if ((visibleItemCount + pastVisiblesItems) >= totalItemCount) {
                 isCateLoading = true;
                 nextCatePage();
             }
         }
     }
 });
}

就這樣囉

一開始可能稍嫌複雜, 但習慣後其實滿方便的

同一個 Adapter 可以重複使用

寫程式的效率也自然跟著變高了

以上就是這次落落長的教學文...

各項資料連結
Creating Lists and Cards
Android RecyclerView
於
標籤： , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)