自定义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);
}
}