[48→100]列表展示页面模型：ListNetFragment

问题场景

上篇文章，我们讨论了一个常规的Android页面模型：NetFragment，完成了网络加载的一系列逻辑，那么更常见的一类网络数据加载页面是列表数据展示页。比如简书的专题展示页：

列表展示页

对于这类页面，变化的部分往往只有以下几个：

  1. 加载后台数据。
  2. 和数据的绑定的界面是什么。
  3. 数据和界面怎么绑定。

不需要的变化的逻辑部分为：

  1. 页面滑到顶部时，下拉刷新整体数据；
  2. 页面滑到底部时，上拉加载下一页数据。
  3. 数据都加载完了，再次上拉界面，执行数据加载完成的接口。

怎么实现呢？

一、设计供上层实现的抽象接口：

/**
 * 加载list数据
 *
 * @param startIndex 起始数据位置
 * @param pageSize   预期加载多少个数据
 * @return
 */
protected abstract ListNetResultInfo<O> onDoInBackgroundSafely(int startIndex, int pageSize);

/**
 * 获取对应Item布局的id
 * @return
 */
public abstract int getItemLayoutId();

/**
 * 将view和数据绑定
 * @param position
 * @param view
 * @param parent
 * @return
 */
public abstract View bindView(int position, View view, ViewGroup parent);

/**
 * 获取item布局中一个textview的id （这是因为底层采用ArrayAdapter，所以初始化时需要用到一个textview的id）
 * @return
 */
public abstract int getItemTextViewResourceId();

二、 选用上拉、下拉控件

这里选择使用开源组件BGARefreshLayout
同样采用了约定id名的方式来进行集成，

  • ListView界面 R.id.net_listview

所以界面如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- 下拉刷新、上拉加载下一页样例 -->
<cn.bingoogolapple.refreshlayout.BGARefreshLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/net_result"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/net_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/width_720_1280_20"
        android:layout_marginRight="@dimen/width_720_1280_20"
        android:clipToPadding="false"
        android:divider="#EEEEEE"
        android:dividerHeight="@dimen/height_720_1280_26"
        android:paddingTop="@dimen/height_720_1280_25"></ListView>
</cn.bingoogolapple.refreshlayout.BGARefreshLayout>

相关的配置代码如下：

protected void configRefreshLayout() {
    mRefreshLayout = (BGARefreshLayout) mViewResult;
    if (mRefreshLayout == null) {
        return;
    }
    mListView = (ListView) mViewResult.findViewById(R.id.net_list);

    // 设置下拉刷新和上拉加载更多的风格     参数1：应用程序上下文，参数2：是否具有上拉加载更多功能
    BGARefreshViewHolder refreshViewHolder = new BGANormalRefreshViewHolder(getActivity(), true);
    // 设置下拉刷新和上拉加载更多的风格
    mRefreshLayout.setRefreshViewHolder(refreshViewHolder);
    mRefreshLayout.setDelegate(new BGARefreshLayout.BGARefreshLayoutDelegate() {
        @Override
        public void onBGARefreshLayoutBeginRefreshing(BGARefreshLayout refreshLayout) {
            useSecondModel = false;
            loadNetData(useSecondModel);
        }

        @Override
        public boolean onBGARefreshLayoutBeginLoadingMore(BGARefreshLayout refreshLayout) {
            if (isLoadedAllNetData){
                onLoadAllNetData();
                return false;
            }
            loadNextPageNetData();
            return true;
        }

    });
  }

三、基于NetFragment封装相应的逻辑

  1. 记录加载数据的个数和位置；
  2. 透过ArrayAdapter将数据和Listview绑定。

最后完成的类文件如下：

package lib;

import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.freetek.deepsea.R;

import java.util.ArrayList;
import java.util.List;

import cn.bingoogolapple.refreshlayout.BGAMoocStyleRefreshViewHolder;
import cn.bingoogolapple.refreshlayout.BGANormalRefreshViewHolder;
import cn.bingoogolapple.refreshlayout.BGARefreshLayout;
import cn.bingoogolapple.refreshlayout.BGARefreshViewHolder;
import panda.android.lib.base.model.ListNetResultInfo;
import panda.android.lib.base.util.Log;


/**
 * 加载网络List数据的通用模型。
 *
 * @author shitianci
 */
public abstract class ListNetFragment<O> extends NetFragment<ListNetResultInfo<O>> {

    private static final String TAG = panda.android.lib.base.ui.fragment.ListNetFragment.class.getSimpleName();
    private int mStartIndex = 0; //开始数据
    private int mPageSize = 10;  //起始页的数据
    private ArrayList<O> mAllDataList = new ArrayList<O>();
    private boolean isLoadedAllNetData = false;
    protected Parcelable mViewResultState = null;
    private boolean useSecondModel = false;
    private BGARefreshLayout mRefreshLayout;
    private DataAdapter dataAdapter;
    private ListView mListView;

    /**
     * -------------------------
     * START: 最重要的流程方法
     * -------------------------
     */

    /**
     * 加载list数据
     *
     * @param startIndex 起始数据项
     * @param pageSize   预期加载多少项
     * @return
     */
    protected abstract ListNetResultInfo<O> onDoInBackgroundSafely(int startIndex, int pageSize);


    /**
     * 获取item布局中一个textview的id
     * @return
     */
    public abstract int getItemTextViewResourceId();

    /**
     * 获取对应Item布局的id
     * @return
     */
    public abstract int getItemLayoutId();

    /**
     * 将view和数据绑定
     * @param position
     * @param view
     * @param parent
     * @return
     */
    public abstract View bindView(int position, View view, ViewGroup parent);


    /**
     * -------------------------
     * END
     * -------------------------
     */

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = super.onCreateView(inflater, container, savedInstanceState);
        if (mViewResult instanceof BGARefreshLayout) {
            configRefreshLayout();
        } else {
            Log.e(TAG, "没有找到BGARefreshLayout");
        }
        return rootView;
    }


    protected void configRefreshLayout() {
        mRefreshLayout = (BGARefreshLayout) mViewResult;
        if (mRefreshLayout == null) {
            return;
        }
        mListView = (ListView) mViewResult.findViewById(R.id.net_list);

        // 设置下拉刷新和上拉加载更多的风格     参数1：应用程序上下文，参数2：是否具有上拉加载更多功能
        BGARefreshViewHolder refreshViewHolder = new BGANormalRefreshViewHolder(getActivity(), true);
        // 设置下拉刷新和上拉加载更多的风格
        mRefreshLayout.setRefreshViewHolder(refreshViewHolder);
        mRefreshLayout.setDelegate(new BGARefreshLayout.BGARefreshLayoutDelegate() {
            @Override
            public void onBGARefreshLayoutBeginRefreshing(BGARefreshLayout refreshLayout) {
                useSecondModel = false;
                loadNetData(useSecondModel);
            }

            @Override
            public boolean onBGARefreshLayoutBeginLoadingMore(BGARefreshLayout refreshLayout) {
                if (isLoadedAllNetData){
                    onLoadAllNetData();
                    return false;
                }
                loadNextPageNetData();
                return true;
            }

        });
    }

    /**
     * 显示list数据
     *
     * @param list 最近一次交互获取的数据
     */
    private void displayResult(List<O> list){
        Log.d(TAG, "displayResult: " + list.toString());
        if (dataAdapter == null) {
            dataAdapter = new DataAdapter(getActivity());
            mListView.setAdapter(dataAdapter);
        }
        android.util.Log.d(TAG, "displayResult: " + list.toString());
        for (int i = 0; i < list.size(); i++) {
            dataAdapter.add(list.get(i));
        }
        dataAdapter.notifyDataSetChanged();
    }

    //不同的订单的适配器
    public class DataAdapter extends ArrayAdapter<O> {

        public DataAdapter(Context context) {
            super(context, getItemLayoutId(), getItemTextViewResourceId());
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            return bindView(position, super.getView(position, convertView, parent), parent);
        }


    }

    public O getItem(int position) {
        if(dataAdapter == null){
            Log.d(TAG, "dataAdapter 没有初始化");
            return  null;
        }
        return dataAdapter.getItem(position);
    }


    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mRefreshLayout.beginRefreshing();
    }

    @Override
    public void onPreloadNetData(boolean useSecondModel) {
        super.onPreloadNetData(useSecondModel);
        if (!useSecondModel){
            mStartIndex = 0;
            mAllDataList.clear();
            isLoadedAllNetData = false;
        }
        mRefreshLayout.setVisibility(View.VISIBLE);
        //保存位置状态
        if (mViewResult != null) {
            if (mViewResult instanceof AbsListView) {
                mViewResultState = ((AbsListView) mViewResult.findViewById(R.id.net_list)).onSaveInstanceState();
                Log.d(TAG, "onSaveInstanceState, mViewResultState = " + mViewResultState);
            }
        }
    }

    @Override
    public void onPostloadNetData(boolean useSecondModel) {
        super.onPostloadNetData(useSecondModel);
        if(useSecondModel){
            mRefreshLayout.endLoadingMore();
        }else{
            mRefreshLayout.endRefreshing();
        }
    }

    /**
     * 加载下一页数据
     */
    public void loadNextPageNetData() {
        Log.d(TAG, "loadNextPageNetData, isLoadedAllNetData = " + isLoadedAllNetData);
        if (mStartIndex != mAllDataList.size()) {
            Log.w(TAG, "mStartIndex = " + mStartIndex);
            Log.w(TAG, "mAllDataList.size() = " + mAllDataList.size());
            mStartIndex = mAllDataList.size();
        }
        useSecondModel = true;
        super.loadNetData(useSecondModel);
    }


    /**
     * 所有数据加载完毕
     */
    public void onLoadAllNetData() {
        Log.d(TAG, "所有数据加载完毕");
    }

    @Override
    protected ListNetResultInfo<O> onDoInBackgroundSafely() {
        try {
            Thread.sleep(1000L);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        return onDoInBackgroundSafely(mStartIndex, mPageSize);
    }

    final protected void onDisplayResult(ListNetResultInfo<O> result) {
        if (result.getList() == null || result.getList().size() == 0) {
            showOnlyView(R.id.net_no_result, useSecondModel);
            return;
        }
        if (result.getList().size() < mPageSize) {
            Log.w(TAG, "onLoadAllNetData");
            isLoadedAllNetData = true;
            onLoadAllNetData();
        }
        List<O> list = result.getList();
        for (O o : list) {
            mAllDataList.add(o);
        }
        mStartIndex += list.size();
        displayResult(list);
        //恢复原来的位置状态
        if (mViewResult != null) {
            if (mViewResult instanceof AbsListView) {
                Log.d(TAG, "onRestoreInstanceState, mViewResultState = " + mViewResultState);
                ((AbsListView) mViewResult).onRestoreInstanceState(mViewResultState);
            }
        }
    }


    /**
     * 获取每一页数据的大小
     *
     * @return
     */
    public int getPageSize() {
        return mPageSize;
    }

    /**
     * 设置每一页数据的大小
     *
     * @param mPageSize
     */
    public void setPageSize(int mPageSize) {
        this.mPageSize = mPageSize;
    }

    /**
     * 获取下一次加载的其实位置
     *
     * @return
     */
    public int getStartIndex() {
        return mStartIndex;
    }

    /**
     * 设置下一次加载的其实位置
     *
     * @param mStartIndex
     */
    public void setStartIndex(int mStartIndex) {
        this.mStartIndex = mStartIndex;
    }

    /**
     * @return the mAllDataList
     */
    public ArrayList<O> getAllDataList() {
        return mAllDataList;
    }

    /**
     * @param mAllDataList the mAllDataList to set
     */
    public void setAllDataList(ArrayList<O> mAllDataList) {
        this.mAllDataList = mAllDataList;
    }

}

上层怎么使用呢？

  1. 界面里面增加BGARefreshLayout和ListView；
<?xml version="1.0" encoding="utf-8"?>
<!-- 下拉刷新、上拉加载下一页样例 -->
<cn.bingoogolapple.refreshlayout.BGARefreshLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/net_result"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/net_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/width_720_1280_20"
        android:layout_marginRight="@dimen/width_720_1280_20"
        android:clipToPadding="false"
        android:divider="#EEEEEE"
        android:dividerHeight="@dimen/height_720_1280_26"
        android:paddingTop="@dimen/height_720_1280_25"></ListView>
</cn.bingoogolapple.refreshlayout.BGARefreshLayout>
  1. 页面的Fragment继承ListNetFragment，实现四个抽象方法即可。

小小吐槽一下~

BGARefreshLayout这个组件有一个open的bug——正在刷新或加载更多时，用户上下滑动不会让下拉刷新视图和加载更多视图跟着滑动，效果有点挫，需要优化。

Panda
2016-06-12

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,907评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,987评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,298评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,586评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,633评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,488评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,275评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,176评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,619评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,655评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,265评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2赞 354

推荐阅读更多精彩内容