自定义View——利用下拉刷新组件实现上拉加载
注：本文demo已经提交github，地址完整代码如下，demo工程已经上传至GitHub，
github地址https://github.com/wsclwps123/UpLoadSwipeRefreshLayout
感谢大家支持！
在Android开发中，我们经常会用到列表下拉刷新和上拉加载的功能。
Google在support.v4包中提供了一个组件可以用来进行下来刷新，这个组件是SwipeRefreshLayout。
下面我们来看一下这个组件的使用：
在布局文件中加上xml代码
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</android.support.v4.widget.SwipeRefreshLayout>在MainActivity.java代码中添加代码：
/**
* 添加变量
* /
private SwipeRefreshLayout swipeRefreshLayout;
private ListView listView;
private ArrayList<String> list = new ArrayList<>();
private ArrayAdapter<String> adapter;在Activity的onCreate方法中初始化实例
/** * 实例化变量，此处省略initList()方法 * 此方法内容为添加了N个字符串"item" */
initList();
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
listView = (ListView) findViewById(R.id.list_view);
adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
listView.setAdapter(adapter);接下来给SwipeRefreshLayout添加OnRefreshListener监听
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
Toast.makeText(MainActivity.this, "is refreshing!", Toast.LENGTH_SHORT).show();
}
});运行效果如图所示
但是在日常开发中，我们不仅需要下拉刷新的功能，还应该有上拉继续加载的功能，但是Google并没有给我们提供上拉加载的方法，那怎么办呢？我们可以自定义一个View，自己添加上拉加载方法。
我们模仿Swiperefreshlayout的使用下拉刷新的方法，去设计上拉加载的方法。添加了上拉加载的代码形式大约为
view.setOnLoadListener(new OnLoadListener() {
@Override
public void onLoad() {
//在此执行上拉加载的逻辑
view.setloading(false); //逻辑执行完毕后停止上拉加载
}
});所以，我们在重写下拉刷新组件前先写一个接口OnLoadListener
public interface OnLoadListener {
public void onLoad(); //需要用户重写的方法
}我们写一个UpLoadSwipeRefreshLayout类，继承SwipeRefershLayout类。我们应该在什么时候开始上拉加载呢？当然是在子ListView滑动到最底部的时候，所以，我们可以开始进行上拉加载的时候应该满足一下条件：
① 判断listview已经滑动到了最底部
② 判断手指是在向上滑动
③ 当前上拉加载不正在进行
编写类
代码如下：
public class UpLoadSwipeRefreshLayout extends SwipeRefreshLayout {
private ListView mListView; //子view
private boolean isCanLoading = false; //是否正可以加载，默认不可用
private OnLoadListener mOnLoadListener;
private View mFooterView; //上拉加载的视图
private int firstY;
private int lastY;
private int mTouchSlop; //最短的滑动距离
private int footerResource; //加载视图的资源ID
public UpLoadSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); //获取系统默认的最短滑动距离
}
}因为ListView是此组件的子view，那么我们应该在开始的时候去检测，子view是否是listview。
重写onLayout()方法，获取子类
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mListView == null) {
getListView(); //获取子view
}
}构造一个getListView方法
private void getListView() {
int childs = getChildCount();
if (childs > 0) {
View childView = getChildAt(0); //获取第一个子view
if (childView instanceof ListView) {
/** * 如果子view的类型是ListView */
mListView = (ListView) childView;
//给子listview设置滑动监听
mListView.setOnScrollListener(this);
}
}
}重写事件拦截事件，防止滑动事件发生冲突
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
/** * 获得触摸事件刚刚开始的时候，手指触摸的坐标 */
firstY = (int) ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
/** * 获得触摸事件结束的时候，手指离开时候的坐标 */
lastY = (int) ev.getRawY();
break;
case MotionEvent.ACTION_UP:
if (isCanLoad()) {
loadData();
}
break;
default:
break;
}
return super.onInterceptTouchEvent(ev);
}为了获取子listview的滑动情况，使用我们应该让组件实现OnScrollListener接口。
即
class UpLoadSwipeRefreshLayout extends SwipeRefreshLayout implements AbsListView.OnScrollListener {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {}
/** * 重写滑动时间 * / @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if (isCanLoad()) { /** * 滑动过程中如果可以加载数据 * 就执行加载数据的函数 */
loadData();
}
}
}编写isCanLoad()方法，这里就用到了上方我们需要满足的三个条件
private boolean isCanLoad() {
return isBottom() && isPushUp() && !isCanLoading;
}依次编写2个方法
/** * 判断listview是否到了底部 */
private boolean isBottom() {
if (mListView != null && mListView.getAdapter() != null) {
/** * 当前可加的最后一项就是listview的末尾项 * 说明滑动到了最底部 */
return mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
}
return false;
}/** * 判断是否正在上拉 */
private boolean isPushUp() {
/** * 往上滑动的距离大于系统默认的滑动距离 */
return firstY - lastY >= mTouchSlop;
}这时候我们还需要编写loadData()方法
/** * 加载数据 */
private void loadData() {
if (mOnLoadListener != null) {
setLoading(true);
/** * 处理加载的逻辑 * 具体逻辑在回调中完成 */
mOnLoadListener.onLoad();
}
}编写设置可加载的方法setLoading()
public void setLoading(boolean isCanLoad) {
this.isCanLoading = isCanLoad;
if (isCanLoad == true) {
/** * 加载，添加底部的正在加载视图 */
mListView.addFooterView(mFooterView);
} else {
/** * 不在加载中，将底部的加载中视图移除 */
mListView.removeFooterView(mFooterView);
firstY = 0;
lastY = 0;
}
}对了，还没添加设置上拉加载监听的方法！
编写setOnUpLoadListener()方法
public void setOnLoadListener(OnLoadListener onLoadListener) {
this.mOnLoadListener = onLoadListener;
}这个类我对外提供了一个变量，代表listview的底视图的资源id
可以通过setFooterResource方法进行添加并实例化此底部view
编写此方法
public void setFooterResource(int footerResource) {
this.footerResource = footerResource;
/** * 实例化布局view */
this.mFooterView = LayoutInflater.from(getContext()).inflate(footerResource, null, false);
}这时候这个类我们就编写好了，完整的代码我会在博客的结尾放出。
我们先来看看这段代码的使用
将刚才的布局文件修改成如下：
<com.example.chenglei.myapplication.UpLoadSwipeRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"</ListView>
</com.example.chenglei.myapplication.UpLoadSwipeRefreshLayout>添加尾视图的资源id文件，layout_up_load_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="80dp" android:background="@android:color/white">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="horizontal">
<ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" android:indeterminateDuration="1500" />
<TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:layout_margin="5dp" android:gravity="center" android:text="正在加载中..." />
</LinearLayout>
</RelativeLayout>修改MainActivity.java的代码
swipeRefreshLayout.setFooterResource(R.layout.layout_up_load_view); //添加正在加载中的视图
swipeRefreshLayout.setOnLoadListener(new OnLoadListener() {
@Override
public void onLoad() {
//上拉加载的操作
}
});运行效果如图：
完整代码如下，demo工程已经上传至GitHub
github地址https://github.com/wsclwps123/UpLoadSwipeRefreshLayout
package com.example.chenglei.myapplication;
import android.content.Context;
import android.support.v4.widget.SwipeRefreshLayout;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.AbsListView;
import android.widget.ListView;
/** * Created by chenglei on 2016/4/20. * 重写下拉刷新组件，添加上拉加载的功能 */
public class UpLoadSwipeRefreshLayout extends SwipeRefreshLayout implements AbsListView.OnScrollListener {
private ListView mListView; //子view
private boolean isCanLoading = false; //是否正可以加载，默认不可用
private OnLoadListener mOnLoadListener;
private View mFooterView; //上拉加载的视图
private int firstY;
private int lastY;
private int mTouchSlop; //最短的滑动距离
private int footerResource;
public UpLoadSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); //获取系统默认的最短滑动距离
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mListView == null) {
getListView();
}
}
/** * 获取子view */
private void getListView() {
int childs = getChildCount();
if (childs > 0) {
View childView = getChildAt(0); //获取第一个子view
if (childView instanceof ListView) {
/** * 如果子view的类型是ListView */
mListView = (ListView) childView;
//给子listview设置滑动监听
mListView.setOnScrollListener(this);
}
}
}
/** * 触摸事件拦截 */
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
/** * 获得触摸事件刚刚开始的时候，手指触摸的坐标 */
firstY = (int) ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
/** * 获得触摸事件结束的时候，手指离开时候的坐标 */
lastY = (int) ev.getRawY();
break;
case MotionEvent.ACTION_UP:
if (isCanLoad()) {
loadData();
}
break;
default:
break;
}
return super.onInterceptTouchEvent(ev);
}
/** * 判断是否可以进行加载 */
private boolean isCanLoad() {
return isBottom() && isPushUp() && !isCanLoading;
}
/** * 判断listview是否到了底部 */
private boolean isBottom() {
if (mListView != null && mListView.getAdapter() != null) {
/** * 当前可加的最后一项就是listview的末尾项 * 说明滑动到了最底部 */
return mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
}
return false;
}
/** * 判断是否正在上拉 */
private boolean isPushUp() {
/** * 往上滑动的距离大于系统默认的滑动距离 */
return firstY - lastY >= mTouchSlop;
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
int totalItemCount) {
if (isCanLoad()) {
/** * 滑动过程中如果可以加载数据 * 就执行加载数据的函数 */
loadData();
}
}
/** * 加载数据 */
private void loadData() {
if (mOnLoadListener != null) {
setLoading(true);
/** * 处理加载的逻辑 * 具体逻辑在回调中完成 */
mOnLoadListener.onLoad();
}
}
/** * 设置可加载 */
public void setLoading(boolean isCanLoad) {
this.isCanLoading = isCanLoad;
if (isCanLoad == true) {
/** * 加载，添加底部的正在加载视图 */
mListView.addFooterView(mFooterView);
} else {
/** * 不在加载中，将底部的加载中视图移除 */
mListView.removeFooterView(mFooterView);
firstY = 0;
lastY = 0;
}
}
/** * 设置上拉加载监听 */
public void setOnLoadListener(OnLoadListener onLoadListener) {
this.mOnLoadListener = onLoadListener;
}
/** * 设置上拉加载的布局 */
public void setFooterResource(int footerResource) {
this.footerResource = footerResource;
/** * 实例化布局view */
this.mFooterView = LayoutInflater.from(getContext()).inflate(footerResource, null, false);
}
}