美文网首页
上拉加载更多的ListView

上拉加载更多的ListView

作者: Tommy_清风 | 来源:发表于2017-07-07 17:53 被阅读0次

项目用途

1.由于现在 Android design 的出现,很多情况下design里面的下拉刷新其实更实用。
2.那么问题来了,用了design的下拉加载更多,跟传统的上下拉刷新的ListView框架就会有所冲突了,其实给ListView加一个footer就可以了,没必要去搞一大堆框架不容易理解。

Demo截图

这年头你没个动态截图贴上来都没人会往下看了~

实现方式

  • 首先看下页面布局
<?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">
    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/fra_one_refresh" >

        <com.tommy.recyclerview.view.LoadMoreListView
            android:id="@+id/fra_one_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
  • 说明

用Android design 自己的下拉刷新包裹住一个自定义的上拉加载更多的ListView

  • 自定义ListView的代码如下
public class LoadMoreListView extends ListView implements AbsListView.OnScrollListener {
    private int totalItemCount;// 总数量
    private int lastVisibleItem;// 最后一个可见的item;
    private boolean isLoading = false;// 判断变量
    private RelativeLayout mRv_footer;
    private TextView mTv_footer;
    private ProgressBar mPb_footer;
    public OnRefreshInterface loadListener;// 接口变量
    // 加载更多数据的回调接口
    public interface OnRefreshInterface {
        public void onLoad();
    }
    // 设置监听
    public void setOnRefreshInterface(OnRefreshInterface loadListener) {
        this.loadListener = loadListener;
    }
    // 加载完成
    public void refreshComplete() {
        isLoading = false;
        mRv_footer.setVisibility(View.GONE);
    }
    // 加载没有更多
    public void refreshNoMore() {
        isLoading = false;
        mPb_footer.setVisibility(View.GONE);
        mTv_footer.setText("没有更多");
    }
    public LoadMoreListView(Context context) {
        super(context);
        initView(context);
    }
    public LoadMoreListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }
    public LoadMoreListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }
    private void initView(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View footer = inflater.inflate(R.layout.list_loadmore_footer, null);
        mRv_footer = (RelativeLayout) footer.findViewById(R.id.list_load_more_footer);
        mTv_footer = (TextView) footer.findViewById(R.id.list_load_textView);
        mPb_footer = (ProgressBar) footer.findViewById(R.id.list_load_progress);
        mRv_footer.setVisibility(View.GONE);

        this.addFooterView(footer);
        this.setOnScrollListener(this);
    }
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (totalItemCount == lastVisibleItem && scrollState == SCROLL_STATE_IDLE) {
            if (!isLoading) {
                isLoading = true;
                mRv_footer.setVisibility(View.VISIBLE);
                loadListener.onLoad();
            }
        }
    }
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        this.lastVisibleItem = firstVisibleItem + visibleItemCount;
        this.totalItemCount = totalItemCount;
    }
}
  • 说明

这里面只涉及到一个 ListView footer 的布局

  • 代码如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_load_more_footer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <ProgressBar
            android:id="@+id/list_load_progress"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:layout_gravity="center" />

        <TextView
            android:id="@+id/list_load_textView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:gravity="center"
            android:textSize="14dp"
            android:textColor="#666666"
            android:text="加载更多..." />
    </LinearLayout>
</RelativeLayout>
  • Android design 的刷新方式调用代码如下
        //找view
        SwipeRefreshLayout fraOneRefresh = (SwipeRefreshLayout)findViewById(R.id.fra_one_refresh);
        //设置loading那个图标的变换颜色
        fraOneRefresh.setColorSchemeResources(R.color.colorAccent, R.color.colorPrimaryDark,R.color.orange);
        fraOneRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                fraOneRefresh.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        fraOneRefresh.setRefreshing(false);  //消失掉刷新
                    }
                },3000);
            }
        });
  • ListView的上拉加载更多的监听
        LoadMoreListView fraOneList = (LoadMoreListView)findViewById(R.id.fra_one_list);
        fraOneList.setAdapter(adapter); //Adapter自己定义咯,这个太简单就不多说了
        fraOneList.setOnRefreshInterface(new LoadMoreListView.OnRefreshInterface() {
            @Override
            public void onLoad() {
                fraOneList.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        fraOneList.refreshComplete();
                    }
                },2000);
            }
        });

总结

整个上拉加载的ListView到此结束了,感谢您的耐心看完~
这种布局刷新方式其实就跟简书APP的发现那里很像了,我也觉得这种设计模式非常简洁、轻量~
只恨大部分产品发现不了 Android design 的好(总是跑过来跟你说,做跟IOS的一样),安卓有他很好的design非要全部改成IOS风格,可悲~
好了,就啰嗦这么多了,源码就不放上来了,上面除了Adapter其他代码都有了~

相关文章

网友评论

      本文标题:上拉加载更多的ListView

      本文链接:https://www.haomeiwen.com/subject/ighrhxtx.html