我们经常看到有一些app有着炫酷的下拉刷新动画，比如美团外卖是骑着电车的袋鼠飞驰在路上，如下图：
美团外卖下拉刷新
那这么炫酷的效果是怎么做出来的呢，这里可以参照一下快速仿写京东、天猫下拉刷新的讲解。
我们的下拉刷新的效果是在android-Ultra-Pull-To-Refresh框架上做的扩展，这是一款非常强大的下拉刷新框架，有着默认的下拉刷新动画，当然如果我们要实现一些复杂的效果就需要我们自己动手了。android-Ultra-Pull-To-Refresh是支持修改下拉刷新头部布局的。
首先我们自定义一个view继承FrameLayout并实现PtrUIHandler接口，在构造方法中加载需要的布局文件，
public MeituanRefreshHeader(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
private void initView() {
View view = LayoutInflater.from(getContext()).inflate(R.layout.meituanptr_head, null);
ptrHead = (ImageView) view.findViewById(R.id.ptr_iv);
addView(view);
}
PtrUIHandler接口的作用就是提供下拉过程中每部分所调用的方法，我们只需要在这些回调的方法中实现自己的效果就可以了。这里我们主要用到的有：
onUIRefreshPrepare
onUIRefreshBegin
onUIRefreshComplete
onUIPositionChange
四个方法。
这里比较重要的是onUIPositionChange这个方法，在这个方法中我们可以获取到下拉刷新的比例，然后对控件进行缩放，
public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
switch (state) {
case JdRefreshHeader.STATE_PREPARE:
if (ptrIndicator.getCurrentPercent() < 1.0f) {
ptrHead.setScaleX(ptrIndicator.getCurrentPercent());
ptrHead.setScaleY(ptrIndicator.getCurrentPercent());
}
break;
}
}
在我们松开手之后会调用onUIRefreshBegin方法，这时候只是一张图片就不行了，需要我们将控件背景修改成一幅动态的画面
@Override
public void onUIRefreshBegin(PtrFrameLayout frame) {
state = JdRefreshHeader.STATE_BEGIN;
ptrHead.setBackgroundResource(R.drawable.meituan_head);
drawable = (AnimationDrawable) ptrHead.getBackground();
if (!drawable.isRunning()) {
drawable.start();
}
}
当然这里的背景是由animation-list实现的，这里不再多说，在完成之后会调用onUIRefreshComplete，我们需要将动画停止并换到之前的图片：
@Override
public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) {
if (drawable != null && drawable.isRunning()) {
drawable.stop();
}
ptrHead.setBackgroundResource(R.mipmap.a5n);
}
最后我们自定义类继承PtrClassicFrameLayout，并在构造方法中添加布局和监听：
public JdRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
/**
* 初始化view
*/
private void initView() {
MeituanRefreshHeader mHeaderView = new MeituanRefreshHeader(getContext());
setHeaderView(mHeaderView);
addPtrUIHandler(mHeaderView);
setResistance(3);
}
ok，我们看一下效果：
效果图
美团外卖下拉刷新
仔细对比一下就会发现我们现在做的并没有下图的效果好，因为下图是从下拉开始就可以看到袋鼠在一点一点的放大，而上图确是下拉到一定程度之后才能看到袋鼠的下半身，这又是什么原因造成的呢？
首先我们要知道下拉刷新的头布局是有一定高度的，当我们下拉的时候，头布局的底部先出来，而在下拉刷新刚开始的时候，头布局的控件会缩放的非常小，而setScaleX方法默认是以控件的中心缩放的，所以在下拉的时候控件会以中心逐渐放大，所以会像上图一样慢慢看到袋鼠的全部。那么怎样才能像下图一样从一开始就可以看到袋鼠的全部呢，刚才我们说了，安卓中setScaleX默认是以控件的中心缩放的，我们完全可以将他的中心点修改成最底部并且水平居中，这样一来在下拉的时候袋鼠就会从底部向上开始放大，于是就有了下图的效果：
if (ptrIndicator.getCurrentPercent() < 1.0f) {
ptrHead.setPivotX(ptrHead.getWidth() / 2);
ptrHead.setPivotY(ptrHead.getHeight());
ptrHead.setScaleX(ptrIndicator.getCurrentPercent());
ptrHead.setScaleY(ptrIndicator.getCurrentPercent());
}
需要注意的是setPivotX的参数是以像素为单位的，到这里就大功告成了。
网友评论