探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
songjian89
8年前
<p>在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个基础上进行改写。今天尝试一下使用SwipeRefreshLayout配合自定义ListView实现下拉刷新、滑到底部自动加载更多的功能。</p> <p>效果图如下所示,在进入页面的时候加载自动刷新,滑到底部自动加载更多,当数据已经加载完成则显示已经加载完成,,否则上拉任可继续加载</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7ba4392139fb885a06d9640051e146bb.gif"></p> <p>先贴一下项目结构图吧,这样可能对于整个项目的了解会比较清晰一些</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d139c3272c09e6b4f0a0ef6fd0965d4c.png"></p> <p><strong>1.在效果图中我们可以看到在头部刷新时候的进度条ProgressBar的颜色本身是可以改变的,所以在color.xml中定义头部刷新时候的四种颜色,用于通过此颜色资源文件设置进度条动画的颜色</strong></p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <resources> <!-- 灰色 --> <color name="grey">#FF999999</color> <!--头部刷新时候的四种颜色--> <color name="refresh_color_1">#ff00ddff</color> <color name="refresh_color_2">#ff99cc00</color> <color name="refresh_color_3">#ffffbb33</color> <color name="refresh_color_4">#ffff4444</color> </resources></code></pre> <p><strong>2.重写SwipeRefreshLayout下拉刷新控件</strong></p> <pre> <code class="language-java">package com.xiaolijuan.swiperefreshlayoutdome.widget; import android.content.Context; import android.content.res.Resources; import android.support.v4.widget.SwipeRefreshLayout; import android.util.AttributeSet; import android.view.MotionEvent; import com.xiaolijuan.swiperefreshlayoutdome.R; /** * 项目名称:SwipeRefreshLayoutDome * 类描述:配合LoadMoreListView 完成下拉刷新、滑到底部自动加载更多 * 创建人:xiaolijuan * 创建时间:2015/12/12 9:00 */ public class RefreshAndLoadMoreView extends SwipeRefreshLayout { private LoadMoreListView mLoadMoreListView; /** * 构造方法,用于在布局文件中用到这个自定义SwipeRefreshLayout控件 * @param context * @param attrs */ public RefreshAndLoadMoreView(Context context, AttributeSet attrs) { super(context, attrs); Resources res = getResources(); //通过颜色资源文件设置进度动画的颜色资源 setColorSchemeColors(res.getColor(R.color.refresh_color_1), res.getColor(R.color.refresh_color_2), res.getColor(R.color.refresh_color_3), res.getColor(R.color.refresh_color_4)); } public void setLoadMoreListView(LoadMoreListView mLoadMoreListView) { this.mLoadMoreListView = mLoadMoreListView; } /** * 触屏事件,如果ListView不为空且数据还在加载中,则继续加载直至完成加载才触摸此事件 * @param ev * @return */ @Override public boolean onTouchEvent(MotionEvent ev) { if (mLoadMoreListView != null && mLoadMoreListView.isLoading()) { return false; } return super.onTouchEvent(ev); } }</code></pre> <p><strong>3.在update_loading_progressbar.xml定义进度条旋转的动画效果,用于设置绘制不显示进度的进度条的Drawable对象</strong></p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <!--画面转移旋转动画效果:以组件的中点为中心顺时针从0度旋转到720度--> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@mipmap/default_ptr_rotate_gray" android:duration="700" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="720" /></code></pre> <p><strong>4.pull_to_load_footer.xml这是在ListView中载入的头部布局</strong></p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <View style="@style/horizontalDivider" /> <LinearLayout android:layout_width="match_parent" android:layout_height="48dp" android:gravity="center"> <ProgressBar android:id="@+id/footer_progressbar" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginRight="8dp" android:gravity="center" android:indeterminateDrawable="@anim/update_loading_progressbar" android:visibility="visible" /> <TextView android:id="@+id/footer_hint_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="正在加载中" android:textColor="#999999" android:textSize="14dp" /> </LinearLayout> </LinearLayout></code></pre> <p><strong>5.重写ListView,用于配合RefreshAndLoadMoreView 完成下拉刷新、滑到底部自动加载更多</strong></p> <pre> <code class="language-java">package com.xiaolijuan.swiperefreshlayoutdome.widget; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.AbsListView; import android.widget.ListView; import android.widget.ProgressBar; import android.widget.TextView; import com.xiaolijuan.swiperefreshlayoutdome.R; /** * 项目名称:SwipeRefreshLayoutDome * 类描述:配合RefreshAndLoadMoreView 完成下拉刷新、滑到底部自动加载更多 * 创建人:xiaolijuan * 创建时间:2015/12/12 9:02 */ public class LoadMoreListView extends ListView implements AbsListView.OnScrollListener { private View rooterView; private boolean isHaveMoreData = true;// 是否有更多数据(默认为有) private ProgressBar progressBar; private TextView tipContext; private RefreshAndLoadMoreView mRefreshAndLoadMoreView; private boolean isLoading = false;// 是否正在加载 private OnLoadMoreListener mOnLoadMoreListener; public LoadMoreListView(Context context, AttributeSet attrs) { super(context, attrs); //动态载入底部布局 rooterView = LayoutInflater.from(context).inflate( R.layout.pull_to_load_footer, null); progressBar = (ProgressBar) rooterView.findViewById(R.id.footer_progressbar); tipContext = (TextView) rooterView.findViewById(R.id.footer_hint_textview); //向listView的底部添加布局(此时当给listView设置Item点击事件的时候,默认不触发这个添加的布局的点击事件) addFooterView(rooterView, null, false); setOnScrollListener(this); } public void setRefreshAndLoadMoreView(RefreshAndLoadMoreView mRefreshAndLoadMoreView) { this.mRefreshAndLoadMoreView = mRefreshAndLoadMoreView; } /** * 设置是否还有更多数据 * * @param isHaveMoreData */ public void setHaveMoreData(boolean isHaveMoreData) { this.isHaveMoreData = isHaveMoreData; if (!isHaveMoreData) { tipContext.setText("只有这么多啦"); progressBar.setVisibility(View.GONE); } else { tipContext.setText("正在加载"); progressBar.setVisibility(View.VISIBLE); } } /** * 加载完成 */ public void onLoadComplete() { isLoading = false; } public boolean isLoading() { return isLoading; } @Override public void onScrollStateChanged(AbsListView view, int scrollState) { if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) { if (view.getLastVisiblePosition() == view.getCount() - 1 && (mRefreshAndLoadMoreView != null && !mRefreshAndLoadMoreView.isRefreshing()) && !isLoading && mOnLoadMoreListener != null && isHaveMoreData) { isLoading = true; mOnLoadMoreListener.onLoadMore(); } } } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { } /** * 加载更多的监听 */ public static interface OnLoadMoreListener { public void onLoadMore(); } /** * 设置加载监听 * * @param mOnLoadMoreListener */ public void setOnLoadMoreListener(OnLoadMoreListener mOnLoadMoreListener) { this.mOnLoadMoreListener = mOnLoadMoreListener; } }</code></pre> <p><strong>6.MyAdapter</strong></p> <pre> <code class="language-java">package com.xiaolijuan.swiperefreshlayoutdome.adapter; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; import com.xiaolijuan.swiperefreshlayoutdome.R; import java.util.List; /** * 项目名称:SwipeRefreshLayoutDome * 类描述:适配器 * 创建人:xiaolijuan * 创建时间:2015/12/12 22:09 */ public class MyAdapter extends BaseAdapter { private Context context; private List<String> mTitleArray;// 标题数组 private int layoutId; /** * 构造方法 * @param context 上下文对象 * @param mTitleArray 标题数组 * @param layoutId 布局Id */ public MyAdapter(Context context, List<String> mTitleArray, int layoutId) { this.context = context; this.mTitleArray = mTitleArray; this.layoutId = layoutId; } /** * 获取Item总数 * @return */ @Override public int getCount() { return mTitleArray.size(); } /** * 获取一个Item对象 * @param position * @return */ @Override public Object getItem(int position) { return mTitleArray.get(position); } /** * 获取指定item的Id * @param position * @return */ @Override public long getItemId(int position) { return position; } /** * 绘制的内容均在此实现 * @param position position就是位置从0开始 * @param convertView convertView是Spinner中每一项要显示的view * @param parent parent就是父窗体了,也就是ListView * @return */ @Override public View getView(int position, View convertView, ViewGroup parent) { View item = convertView != null ? convertView : View.inflate(context, layoutId, null); TextView txt_name = (TextView) item.findViewById(R.id.txt_title); txt_name.setText(mTitleArray.get(position)); return item; } }</code></pre> <p><strong>7.具体代码,代码写的很详细</strong></p> <pre> <code class="language-java">package com.xiaolijuan.swiperefreshlayoutdome.activits; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.view.View; import android.widget.AdapterView; import android.widget.Toast; import com.xiaolijuan.swiperefreshlayoutdome.R; import com.xiaolijuan.swiperefreshlayoutdome.adapter.MyAdapter; import com.xiaolijuan.swiperefreshlayoutdome.widget.LoadMoreListView; import com.xiaolijuan.swiperefreshlayoutdome.widget.RefreshAndLoadMoreView; import java.util.ArrayList; import java.util.List; /** * 项目名称:SwipeRefreshLayoutDome * 类描述:主界面 * 创建人:xiaolijuan * 创建时间:2015/12/12 20:00 */ public class MainActivity extends Activity { private Context mContext; private int pageIndex = 0; private MyAdapter adapter; private LoadMoreListView mLoadMoreListView; private RefreshAndLoadMoreView mRefreshAndLoadMoreView; private List<String> datas = new ArrayList<String>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mContext = this; mLoadMoreListView = (LoadMoreListView) findViewById(R.id.load_more_list); mRefreshAndLoadMoreView = (RefreshAndLoadMoreView) findViewById(R.id.refresh_and_load_more); adapter = new MyAdapter(mContext, datas, R.layout.item_layout); mLoadMoreListView.setAdapter(adapter); initData(); } private void initData() { //程序开始就加载第一页数据 loadData(1); mRefreshAndLoadMoreView.setLoadMoreListView(mLoadMoreListView); mLoadMoreListView.setRefreshAndLoadMoreView(mRefreshAndLoadMoreView); //设置下拉刷新监听 mRefreshAndLoadMoreView.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { loadData(1); } }); //设置加载监听 mLoadMoreListView.setOnLoadMoreListener(new LoadMoreListView.OnLoadMoreListener() { @Override public void onLoadMore() { loadData(pageIndex + 1); } }); mLoadMoreListView.setOnItemClickListener(new ItemClickListener()); } /** * 加载数据 */ private void loadData(final int tempPageIndex) { new Handler().postDelayed(new Runnable() { @Override public void run() { if (tempPageIndex == 1) { datas.clear(); } getDatas(tempPageIndex); //在这里我设置当加载到第三页时设置已经加载完成 if (tempPageIndex == 3) { mLoadMoreListView.setHaveMoreData(false); } else { mLoadMoreListView.setHaveMoreData(true); } pageIndex = tempPageIndex; adapter.notifyDataSetChanged(); //当加载完成之后设置此时不在刷新状态 mRefreshAndLoadMoreView.setRefreshing(false); mLoadMoreListView.onLoadComplete(); } }, 1000); } /** * 模拟一些数据源 * * @return */ private List<String> getDatas(final int tempPageIndex) { switch (tempPageIndex) { case 1: for (int i = 0; i < 10; i++) { datas.add("这是第" + (i + 1) + "个Item"); } break; case 2: for (int i = 0; i < 10; i++) { datas.add("这是第" + (i + 11) + "个Item"); } break; case 3: for (int i = 0; i < 10; i++) { datas.add("这是第" + (i + 21) + "个Item"); } break; default: break; } return datas; } /** * 为ListView每个Item添加点击事件 */ public class ItemClickListener implements AdapterView.OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(getApplicationContext(), datas.get(position), Toast.LENGTH_LONG).show(); } } }</code></pre> <p> </p> <p> </p> <p> </p> <p>来自:http://www.jianshu.com/p/305929729e4c</p> <p> </p>