仿美团外卖下拉刷新效果

   <p>我们经常看到有一些app有着炫酷的下拉刷新动画，比如美团外卖是骑着电车的袋鼠飞驰在路上，如下图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5e2fc48804ccf740d59892058fa3da58.gif"></p>    <p style="text-align:center">美团外卖下拉刷新</p>    <p>我们的下拉刷新的效果是在android-Ultra-Pull-To-Refresh框架上做的扩展，这是一款非常强大的下拉刷新框架，有着默认的下拉刷新动画，当然如果我们要实现一些复杂的效果就需要我们自己动手了。android-Ultra-Pull-To-Refresh是支持修改下拉刷新头部布局的。</p>    <p>首先我们自定义一个view继承FrameLayout并实现PtrUIHandler接口，在构造方法中加载需要的布局文件，</p>    <pre>  <code class="language-java">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);      }</code></pre>    <p>PtrUIHandler接口的作用就是提供下拉过程中每部分所调用的方法，我们只需要在这些回调的方法中实现自己的效果就可以了。这里我们主要用到的有：</p>    <p>onUIRefreshPrepare</p>    <p>onUIRefreshBegin</p>    <p>onUIRefreshComplete</p>    <p>onUIPositionChange</p>    <p>四个方法。</p>    <p>这里比较重要的是onUIPositionChange这个方法，在这个方法中我们可以获取到下拉刷新的比例，然后对控件进行缩放，</p>    <pre>  <code class="language-java">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;          }      }</code></pre>    <p>在我们松开手之后会调用onUIRefreshBegin方法，这时候只是一张图片就不行了，需要我们将控件背景修改成一幅动态的画面</p>    <pre>  <code class="language-java">@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();          }      }</code></pre>    <p>当然这里的背景是由animation-list实现的，这里不再多说，在完成之后会调用onUIRefreshComplete，我们需要将动画停止并换到之前的图片：</p>    <pre>  <code class="language-java">@Override      public void onUIRefreshComplete(PtrFrameLayout frame, boolean isHeader) {          if (drawable != null && drawable.isRunning()) {              drawable.stop();          }          ptrHead.setBackgroundResource(R.mipmap.a5n);      }</code></pre>    <p>最后我们自定义类继承PtrClassicFrameLayout，并在构造方法中添加布局和监听：</p>    <pre>  <code class="language-java">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);      }</code></pre>    <p>ok，我们看一下效果：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d0d6a8b2e73f07369d5eed2633363f6e.gif"></p>    <p style="text-align:center">效果图</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5e2fc48804ccf740d59892058fa3da58.gif"></p>    <p style="text-align:center">美团外卖下拉刷新</p>    <p>仔细对比一下就会发现我们现在做的并没有下图的效果好，因为下图是从下拉开始就可以看到袋鼠在一点一点的放大，而上图确是下拉到一定程度之后才能看到袋鼠的下半身，这又是什么原因造成的呢？</p>    <p>首先我们要知道下拉刷新的头布局是有一定高度的，当我们下拉的时候，头布局的底部先出来，而在下拉刷新刚开始的时候，头布局的控件会缩放的非常小，而setScaleX方法默认是以控件的中心缩放的，所以在下拉的时候控件会以中心逐渐放大，所以会像上图一样慢慢看到袋鼠的全部。那么怎样才能像下图一样从一开始就可以看到袋鼠的全部呢，刚才我们说了，安卓中setScaleX默认是以控件的中心缩放的，我们完全可以将他的中心点修改成最底部并且水平居中，这样一来在下拉的时候袋鼠就会从底部向上开始放大，于是就有了下图的效果：</p>    <pre>  <code class="language-java">if (ptrIndicator.getCurrentPercent() < 1.0f) {         ptrHead.setPivotX(ptrHead.getWidth() / 2);         ptrHead.setPivotY(ptrHead.getHeight());         ptrHead.setScaleX(ptrIndicator.getCurrentPercent());         ptrHead.setScaleY(ptrIndicator.getCurrentPercent());     }</code></pre>    <p>需要注意的是setPivotX的参数是以像素为单位的，到这里就大功告成了。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/433f42cffa18</p>    <p> </p>