【Android开发日记】SwipeRefreshLayout添加上拉加载功能

通知：完美代码已有小伙伴更新！

地址：/article/2219130.html

关于下拉刷新：

目前市场上下拉刷新大部分是基于handmark的pulltorefresh这一开源项目，直接导入包即可使用下拉刷新和上拉加载功能。当然也有基于这一项目而自己改写的Viewpager，ScrollView的下拉刷新。

SwipeRefreshLayout是google官方下拉刷新组件，俗称“彩虹条”。但是官方版本只有下拉刷新而没有上拉加载更多，因此我进行了改写的尝试。

如何改写：

1.更新Android SDK中的Android support library 版本到19.1



2.前往Android SDK 的support v4目录..android-sdk\extras\android\support\v4\src\java\android\support\v4\widget\

下将3个文件拷贝到自己的项目中



3.xml中 以自定义控件即包名引用的方式调用SwipeRefreshLayout

java文件中继承 SwipeRefreshLayout.OnRefreshListener,SwipeRefreshLayout.OnLoadListener接口，并实现

我的改写结果：

1.SwipeRefreshLayout中仿照OnRefresh添加了OnLoad

2.在布局底部新添加了另一个progressbar

3.新定义了onLoad Listener，在调用文件中实例化onRefresh()和onLoad()

存在的Bug：

1.在上拉操作但是上拉的距离不够未达到加载的高度时，下方progressbar没有加载动画。可参照下拉刷新动画。

2.上拉执行加载动作时，下方progressbar动画异常。可参照下拉刷新动画。

【因为个人学习安排原因没有时间继续修改，现将代码公布，仅供参考，也希望大家能将bug如何改进留言给我，谢谢！】

只修改了SwipeRefreshLayout的代码：

/*
* Copyright (C) 2013 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0 *
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package ...swiperefresh;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Transformation;
import android.widget.AbsListView;

/**
* The SwipeRefreshLayout should be used whenever the user can refresh the
* contents of a view via a vertical swipe gesture. The activity that
* instantiates this view should add an OnRefreshListener to be notified
* whenever the swipe to refresh gesture is completed. The SwipeRefreshLayout
* will notify the listener each and every time the gesture is completed again;
* the listener is responsible for correctly determining when to actually
* initiate a refresh of its content. If the listener determines there should
* not be a refresh, it must call setRefreshing(false) to cancel any visual
* indication of a refresh. If an activity wishes to show just the progress
* animation, it should call setRefreshing(true). To disable the gesture and progress
* animation, call setEnabled(false) on the view.
*
* <p> This layout should be made the parent of the view that will be refreshed as a
* result of the gesture and can only support one direct child. This view will
* also be made the target of the gesture and will be forced to match both the
* width and the height supplied in this layout. The SwipeRefreshLayout does not
* provide accessibility events; instead, a menu item must be provided to allow
* refresh of the content wherever this gesture is used.</p>
*/
public class SwipeRefreshLayout extends ViewGroup {
private static final long RETURN_TO_ORIGINAL_POSITION_TIMEOUT = 100;
private static final float ACCELERATE_INTERPOLATION_FACTOR = 1.5f;
private static final float DECELERATE_INTERPOLATION_FACTOR = 2f;
private static final float PROGRESS_BAR_HEIGHT = 4;
private static final float MAX_SWIPE_DISTANCE_FACTOR = .6f;
private static final int REFRESH_TRIGGER_DISTANCE = 120;

private SwipeProgressBar mProgressBarTop;
private SwipeProgressBar mProgressBarBottom;//the thing that shows progress is going
private View mTarget; //the content that gets pulled down
private int mOriginalOffsetTop;
private OnRefreshListener 	mRefreshListener;
private OnLoadListener 		mLoadListener;
private MotionEvent mDownEvent;
private int mFrom;
private boolean mRefreshing = false;
private boolean mLoading 	= false;
private int mTouchSlop;
private float mDistanceToTriggerSync = -1;
private float mPrevY;
private int mMediumAnimationDuration;
private float mFromPercentage = 0;
private float mCurrPercentage = 0;
private int mProgressBarHeight;
private int mCurrentTargetOffsetTop;
// Target is returning to its start offset because it was cancelled or a
// refresh was triggered.
private boolean mReturningToStart;
private final DecelerateInterpolator mDecelerateInterpolator;
private final AccelerateInterpolator mAccelerateInterpolator;
private static final int[] LAYOUT_ATTRS = new int[] {
android.R.attr.enabled
};

private final Animation mAnimateToStartPosition = new Animation() {
@Override
public void applyTransformation(float interpolatedTime, Transformation t) {
int targetTop = 0;
if (mFrom != mOriginalOffsetTop) {
targetTop = (mFrom + (int)((mOriginalOffsetTop - mFrom) * interpolatedTime));
}
int offset = targetTop - mTarget.getTop();
final int currentTop = mTarget.getTop();
if (offset + currentTop < 0) {
offset = 0 - currentTop;
}
setTargetOffsetTopAndBottom(offset);
}
};

private Animation mShrinkTriggerTop = new Animation() {
@Override
public void applyTransformation(float interpolatedTime, Transformation t) {
float percent = mFromPercentage + ((0 - mFromPercentage) * interpolatedTime);
mProgressBarTop.setTriggerPercentage(percent);
}
};

private Animation mShrinkTriggerBottom = new Animation() {
@Override
public void applyTransformation(float interpolatedTime, Transformation t) {
float percent = mFromPercentage + ((0 - mFromPercentage) * interpolatedTime);
mProgressBarBottom.setTriggerPercentage(percent);
}
};

private final AnimationListener mReturnToStartPositionListener = new BaseAnimationListener() {
@Override
public void onAnimationEnd(Animation animation) {
// Once the target content has returned to its start position, reset
// the target offset to 0
mCurrentTargetOffsetTop = 0;
}
};

private final AnimationListener mShrinkAnimationListener = new BaseAnimationListener() {
@Override
public void onAnimationEnd(Animation animation) {
mCurrPercentage = 0;
}
};

private final Runnable mReturnToStartPosition = new Runnable() {

@Override
public void run() {
mReturningToStart = true;
animateOffsetToStartPosition(mCurrentTargetOffsetTop + getPaddingTop(),
mReturnToStartPositionListener);
}

};

// Cancel the refresh gesture and animate everything back to its original state.
private final Runnable mCancelRefresh = new Runnable() {

@Override
public void run() {
mReturningToStart = true;
// Timeout fired since the user last moved their finger; animate the
// trigger to 0 and put the target back at its original position
if (mProgressBarTop != null) {
mFromPercentage = mCurrPercentage;
mShrinkTriggerTop.setDuration(mMediumAnimationDuration);
mShrinkTriggerTop.setAnimationListener(mShrinkAnimationListener);
mShrinkTriggerTop.reset();
mShrinkTriggerTop.setInterpolator(mDecelerateInterpolator);
startAnimation(mShrinkTriggerTop);
}
animateOffsetToStartPosition(mCurrentTargetOffsetTop + getPaddingTop(),
mReturnToStartPositionListener);
}

};

private final Runnable mCancelLoad = new Runnable() {

@Override
public void run() {
mReturningToStart = true;
// Timeout fired since the user last moved their finger; animate the
// trigger to 0 and put the target back at its original position
if (mProgressBarBottom != null) {
mFromPercentage = mCurrPercentage;
mShrinkTriggerBottom.setDuration(mMediumAnimationDuration);
mShrinkTriggerBottom.setAnimationListener(mShrinkAnimationListener);
mShrinkTriggerBottom.reset();
mShrinkTriggerBottom.setInterpolator(mDecelerateInterpolator);
startAnimation(mShrinkTriggerBottom);
}
animateOffsetToStartPosition(mCurrentTargetOffsetTop + getPaddingTop(),
mReturnToStartPositionListener);
}

};

/**
* Simple constructor to use when creating a SwipeRefreshLayout from code.
* @param context
*/
public SwipeRefreshLayout(Context context) {
this(context, null);
}

/**
* Constructor that is called when inflating SwipeRefreshLayout from XML.
* @param context
* @param attrs
*/
public SwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);

mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

mMediumAnimationDuration = getResources().getInteger(
android.R.integer.config_mediumAnimTime);

setWillNotDraw(false);
mProgressBarTop = new SwipeProgressBar(this);
mProgressBarBottom = new SwipeProgressBar(this);
final DisplayMetrics metrics = getResources().getDisplayMetrics();
mProgressBarHeight = (int) (metrics.density * PROGRESS_BAR_HEIGHT);
mDecelerateInterpolator = new DecelerateInterpolator(DECELERATE_INTERPOLATION_FACTOR);
mAccelerateInterpolator = new AccelerateInterpolator(ACCELERATE_INTERPOLATION_FACTOR);

final TypedArray a = context.obtainStyledAttributes(attrs, LAYOUT_ATTRS);
setEnabled(a.getBoolean(0, true));
a.recycle();
}

@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
removeCallbacks(mCancelRefresh);
removeCallbacks(mReturnToStartPosition);
}

@Override
public void onDetachedFromWindow() {
super.onDetachedFromWindow();
removeCallbacks(mReturnToStartPosition);
removeCallbacks(mCancelRefresh);
}

private void animateOffsetToStartPosition(int from, AnimationListener listener) {
mFrom = from;
mAnimateToStartPosition.reset();
mAnimateToStartPosition.setDuration(mMediumAnimationDuration);
mAnimateToStartPosition.setAnimationListener(listener);
mAnimateToStartPosition.setInterpolator(mDecelerateInterpolator);
mTarget.startAnimation(mAnimateToStartPosition);
}

/**
* Set the listener to be notified when a refresh is triggered via the swipe
* gesture.
*/
public void setOnRefreshListener(OnRefreshListener listener) {
mRefreshListener = listener;
}

public void setOnLoadListener(OnLoadListener listener) {
mLoadListener = listener;
}

private void setTopTriggerPercentage(float percent) {
Log.e("下拉", "TriggerPercentage=" + percent);
if (percent == 0f) {
// No-op. A null trigger means it's uninitialized, and setting it to zero-percent
// means we're trying to reset state, so there's nothing to reset in this case.
mCurrPercentage = 0;
return;
}
mCurrPercentage = percent;
mProgressBarTop.setTriggerPercentage(percent);
}

private void setBottomTriggerPercentage(float percent) {
Log.e("上拉", "TriggerPercentage=" + percent);
if (percent == 0f) {
// No-op. A null trigger means it's uninitialized, and setting it to zero-percent
// means we're trying to reset state, so there's nothing to reset in this case.
mCurrPercentage = 0;
return;
}
mCurrPercentage = percent;
mProgressBarBottom.setTriggerPercentage(percent);
}

/**
* Notify the widget that refresh state has changed. Do not call this when
* refresh is triggered by a swipe gesture.
*
* @param refreshing Whether or not the view should show refresh progress.
*/
public void setRefreshing(boolean refreshing) {
if (mRefreshing != refreshing) {
ensureTarget();
mCurrPercentage = 0;
mRefreshing = refreshing;
if (mRefreshing) {
mProgressBarTop.start();
} else {
mProgressBarTop.stop();
}
}
}

public void setLoading(boolean loading) {
if (mLoading != loading) {
ensureTarget();
mCurrPercentage = 0;
mLoading = loading;
if (mLoading) {
mProgressBarBottom.start();
} else {
mProgressBarBottom.stop();
}
}
}

/**
* Set the four colors used in the progress animation. The first color will
* also be the color of the bar that grows in response to a user swipe
* gesture.
*
* @param colorRes1 Color resource.
* @param colorRes2 Color resource.
* @param colorRes3 Color resource.
* @param colorRes4 Color resource.
*/
public void setColorScheme(int colorRes1, int colorRes2, int colorRes3, int colorRes4) {
ensureTarget();
final Resources res = getResources();
final int color1 = res.getColor(colorRes1);
final int color2 = res.getColor(colorRes2);
final int color3 = res.getColor(colorRes3);
final int color4 = res.getColor(colorRes4);
mProgressBarTop.setColorScheme(color1, color2, color3,color4);
mProgressBarBottom.setColorScheme(color1, color2, color3,color4);
}

/**
* @return Whether the SwipeRefreshWidget is actively showing refresh
*         progress.
*/
public boolean isRefreshing() {
return mRefreshing;
}
public boolean isLoading() {
return mLoading;
}

private void ensureTarget() {
// Don't bother getting the parent height if the parent hasn't been laid out yet.
if (mTarget == null) {
if (getChildCount() > 1 && !isInEditMode()) {
throw new IllegalStateException(
"SwipeRefreshLayout can host only one direct child");
}
mTarget = getChildAt(0);
mOriginalOffsetTop = mTarget.getTop() + getPaddingTop();

}
if (mDistanceToTriggerSync == -1) {
if (getParent() != null && ((View)getParent()).getHeight() > 0) {
final DisplayMetrics metrics = getResources().getDisplayMetrics();
mDistanceToTriggerSync = (int) Math.min(
((View) getParent()) .getHeight() * MAX_SWIPE_DISTANCE_FACTOR,
REFRESH_TRIGGER_DISTANCE * metrics.density);
}
}
}

@Override
public void draw(Canvas canvas) {
super.draw(canvas);
mProgressBarTop.draw(canvas);
mProgressBarBottom.draw(canvas);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
final int width =  getMeasuredWidth();
final int height = getMeasuredHeight();
mProgressBarTop.setBounds(0, 0, width, mProgressBarHeight);

mProgressBarBottom.setBounds(0, height-mProgressBarHeight, width, height);

if (getChildCount() == 0) {
return;
}
final View child = getChildAt(0);
final int childLeft = getPaddingLeft();
final int childTop = mCurrentTargetOffsetTop + getPaddingTop();
final int childWidth = width - getPaddingLeft() - getPaddingRight();
final int childHeight = height - getPaddingTop() - getPaddingBottom();
child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (getChildCount() > 1 && !isInEditMode()) {
throw new IllegalStateException("SwipeRefreshLayout can host only one direct child");
}
if (getChildCount() > 0) {
getChildAt(0).measure(
MeasureSpec.makeMeasureSpec(
getMeasuredWidth() - getPaddingLeft() - getPaddingRight(),
MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(
getMeasuredHeight() - getPaddingTop() - getPaddingBottom(),
MeasureSpec.EXACTLY));
}
}

/**
* @return Whether it is possible for the child view of this layout to
*         scroll up. Override this if the child view is a custom view.
*/
public boolean canChildScrollUp() {
if (android.os.Build.VERSION.SDK_INT < 14) {
if (mTarget instanceof AbsListView) {
final AbsListView absListView = (AbsListView) mTarget;
return absListView.getChildCount() > 0
&& (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
.getTop() < absListView.getPaddingTop());
} else {
return mTarget.getScrollY() > 0;
}
} else {
return ViewCompat.canScrollVertically(mTarget, -1);
}
}

/**
*
* @return
*/
public boolean canChildScrollDown() {
if (android.os.Build.VERSION.SDK_INT < 14) {
if (mTarget instanceof AbsListView) {
final AbsListView absListView = (AbsListView) mTarget;
return absListView.getChildCount() > 0
&& (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
.getTop() < absListView.getPaddingTop());
} else {
return mTarget.getScrollY() > 0;
}
} else {
return ViewCompat.canScrollVertically(mTarget, 1);
}
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
ensureTarget();
boolean handled = false;
if (mReturningToStart && ev.getAction() == MotionEvent.ACTION_DOWN) {
mReturningToStart = false;
}
if (isEnabled() && !mReturningToStart && (!canChildScrollUp()|| !canChildScrollDown())) {
handled = onTouchEvent(ev);
}
return !handled ? super.onInterceptTouchEvent(ev) : handled;
}

@Override
public void requestDisallowInterceptTouchEvent(boolean b) {
// Nope.
}

@Override
public boolean onTouchEvent(MotionEvent event) {
final int action = event.getAction();
boolean handled = false;
switch (action) {
case MotionEvent.ACTION_DOWN:
mCurrPercentage = 0;
mDownEvent = MotionEvent.obtain(event);
mPrevY = mDownEvent.getY();
break;
case MotionEvent.ACTION_MOVE:
if (mDownEvent != null && !mReturningToStart) {
final float eventY = event.getY();
float yDiff = eventY - mDownEvent.getY();
if (!canChildScrollDown()) {
yDiff = -eventY + mDownEvent.getY();
}
if (yDiff > mTouchSlop) {
// User velocity passed min velocity; trigger a refresh
if (yDiff > mDistanceToTriggerSync) {
// User movement passed distance; trigger a refresh
if(!canChildScrollUp())
startRefresh();
else if(!canChildScrollDown())
startLoad();

handled = true;
break;
} else {
// Just track the user's movement
if(!canChildScrollUp()){
setTopTriggerPercentage(mAccelerateInterpolator.getInterpolation(yDiff / mDistanceToTriggerSync));
float offsetTop = yDiff;
if (mPrevY > eventY)
offsetTop = yDiff - mTouchSlop;
updateContentOffsetTop((int) (offsetTop));
// Log.e("下拉", "offsetTop=" + offsetTop);
if (mPrevY > eventY && (mTarget.getTop() < mTouchSlop)) {
// If the user puts the view back at the top, we
// don't need to. This shouldn't be considered
// cancelling the gesture as the user can restart from the top.
removeCallbacks(mCancelRefresh);
} else {
updatePositionTimeout();
}

}
else if(!canChildScrollDown()){
setBottomTriggerPercentage(mAccelerateInterpolator.getInterpolation(yDiff / mDistanceToTriggerSync));
float offsetBottom = yDiff;
if (mPrevY > eventY)
offsetBottom = yDiff - mTouchSlop;

updateContentOffsetBottom((int) (offsetBottom));
if (mPrevY > eventY && (mTarget.getHeight()-mTarget.getBottom() < mTouchSlop)) {
removeCallbacks(mCancelLoad);
} else {
//updatePositionTimeout();
removeCallbacks(mCancelLoad);

postDelayed(mCancelLoad, RETURN_TO_ORIGINAL_POSITION_TIMEOUT);
}

}

mPrevY = event.getY();
handled = true;
}
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
if (mDownEvent != null) {
mDownEvent.recycle();
mDownEvent = null;
}
break;
}
return handled;
}

private void startRefresh() {
removeCallbacks(mCancelRefresh);
mReturnToStartPosition.run();
setRefreshing(true);
mRefreshListener.onRefresh();
}

private void startLoad() {
removeCallbacks(mCancelLoad);
mReturnToStartPosition.run();
setLoading(true);
mLoadListener.onLoad();
}

private void updateContentOffsetTop(int targetTop) {
final int currentTop = mTarget.getTop();
if (targetTop > mDistanceToTriggerSync) {
targetTop = (int) mDistanceToTriggerSync;
} else if (targetTop < 0) {
targetTop = 0;
}
Log.e("下拉", "mTarget.getTop()=" + mTarget.getTop());
Log.e("下拉", "offsetTopAndBottom=" + (targetTop - currentTop));
setTargetOffsetTopAndBottom(targetTop - currentTop);
}

private void updateContentOffsetBottom(int targetBottom) {
final int currentBottom = mTarget.getHeight()-mTarget.getBottom();
if (targetBottom > mDistanceToTriggerSync) {
targetBottom = (int) mDistanceToTriggerSync;
} else if (targetBottom < 0) {
targetBottom = 0;
}

Log.e("上拉", "currentBottom=" + currentBottom);
Log.e("上拉", "targetBottom=" + targetBottom);
Log.e("上拉", "offsetTopAndBottom=" + (currentBottom-targetBottom));
setTargetOffsetTopAndBottom((currentBottom-targetBottom)/10);
}

private void setTargetOffsetTopAndBottom(int offset) {
mTarget.offsetTopAndBottom(offset);
mCurrentTargetOffsetTop = mTarget.getTop();
}

private void updatePositionTimeout() {
removeCallbacks(mCancelRefresh);

postDelayed(mCancelRefresh, RETURN_TO_ORIGINAL_POSITION_TIMEOUT);
}

/**
* Classes that wish to be notified when the swipe gesture correctly
* triggers a refresh should implement this interface.
*/
public interface OnRefreshListener {
public void onRefresh();
}

public interface OnLoadListener {
public void onLoad();
}

/**
* Simple AnimationListener to avoid having to implement unneeded methods in
* AnimationListeners.
*/
private class BaseAnimationListener implements AnimationListener {
@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}
}
}