android 美团下拉刷新,美团外卖下拉刷新效果实现方法

美团外卖下拉刷新效果实现方法，我们的下拉刷新的效果是在android-Ultra-Pull-To-Refresh框架上做的扩展，这是一款非常强大的下拉刷新框架，有着默认的下拉刷新动画，当然如果我们要实现一些复杂的效果就需要我们自己动手了。android-Ultra-Pull-To-Refresh是支持修改下拉刷新头部布局的。

我们经常看到有一些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的参数是以像素为单位的，到这里就大功告成了。

以上就是对于安卓开发方面的知识点简介，美团外卖下拉刷新效果实现方法，更多相关内容请继续关注拓胜科技安卓技术频道，或者需要了解拓胜安卓培训方面的问题，可以在线免费咨询拓胜教育老师。