Android自定义下拉刷新动画--仿百度外卖下拉刷新
wcut5750
8年前
<p>好久没写博客了，小编之前一段时间一直在找工作，从天津来到了我们的大帝都，感觉还不错。好了废话不多说了，开始我们今天的主题吧。现如今的APP各式各样，同样也带来了各种需求，一个下拉刷新都能玩出花样了，前两天订饭的时候不经意间看到了“百度外卖”的下拉刷新，今天的主题就是它–<strong>自定义下拉刷新动画</strong>。</p> <p>看一下实现效果吧：<br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/d0892d40bc51725f7e283d02f225b361.gif"></p> <h3>动画</h3> <p>我们先来看看Android中的动画吧：<br> Android中的动画分为三种：</p> <ul> <li>Tween动画，这一类的动画提供了旋转、平移、缩放等效果。 <ul> <li>Alpha – 淡入淡出</li> <li>Scale – 缩放效果</li> <li>Roate – 旋转效果</li> <li>Translate – 平移效果</li> </ul> </li> <li>Frame动画（帧动画），这一类动画可以创建一个Drawable序列，按照指定时间间歇一个一个显示出来。</li> <li>Property动画（属性动画），Android3.0之后引入出来的属性动画，它更改的是对象的实际属性。</li> </ul> <h3>分析</h3> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/9bfbbfeea6c2b18fca93252b97ad5fb6.gif"></p> <p>我们可以看到百度外卖的下拉刷新的头是一个骑车的快递员在路上疾行，分析一下我们得到下面的动画：</p> <ol> <li>背景图片的平移动画</li> <li>太阳的自旋转动画</li> <li>两个小轮子的自旋转动画</li> </ol> <p>这就很简单了，接下来我们去百度外面的图片资源文件里找到这几张图片：（下载百度外卖的apk直接解压即可）<br> <img alt="这里写图片描述" src="https://simg.open-open.com/show/55cd6291ddecb246d712c3d4a5db2d36.png"></p> <p>定义下拉刷新头文件：headview.xml</p> <p>这里注意一下：我们定义了两张背景图片的ImageView是为了可以实现背景的平移动画效果。</p> <p><img alt="这里写图片描述" src="https://simg.open-open.com/show/cbeb38ab628853b65ba8472f70b2d20f.png"></p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_back1" android:src="@drawable/pull_back" android:layout_width="match_parent" android:layout_height="100dp" /> <ImageView android:id="@+id/iv_back2" android:src="@drawable/pull_back" android:layout_width="match_parent" android:layout_height="100dp" /> <RelativeLayout android:id="@+id/main" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_marginTop="45dp" android:id="@+id/iv_rider" android:background="@drawable/pull_rider" android:layout_width="50dp" android:layout_height="50dp" /> <ImageView android:id="@+id/wheel1" android:layout_marginLeft="10dp" android:layout_marginTop="90dp" android:background="@drawable/pull_wheel" android:layout_width="15dp" android:layout_height="15dp" /> <ImageView android:id="@+id/wheel2" android:layout_marginLeft="40dp" android:layout_marginTop="90dp" android:background="@drawable/pull_wheel" android:layout_width="15dp" android:layout_height="15dp" /> </RelativeLayout> <ImageView android:id="@+id/ivsun" android:layout_marginTop="20dp" android:layout_toRightOf="@+id/main" android:background="@drawable/pull_sun" android:layout_width="30dp" android:layout_height="30dp" /> </RelativeLayout></code></pre> <p>接下来我们定义动画效果：</p> <p>背景图片的平移效果：<br> 实现两个animation xml文件，一个起始位置在100%，结束位置在0%，设置repeat属性为循环往复。</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="100%p" android:toXDelta="0%p" android:repeatMode="restart" android:interpolator="@android:anim/linear_interpolator" android:repeatCount="infinite" android:duration="5000" /> </set></code></pre> <p>另一个起始位置在0%，结束位置在-100%</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="0%p" android:toXDelta="-100%p" android:repeatMode="restart" android:interpolator="@android:anim/linear_interpolator" android:repeatCount="infinite" android:duration="5000" /> </set></code></pre> <p>太阳围绕中心旋转动画：<br> 从0-360度开始循环旋转，旋转所用时间为1s，旋转中心距离view的左定点上边缘为50%的距离，也就是正中心。</p> <p>下面是具体属性：</p> <blockquote> <p>android:fromDegrees 起始的角度度数</p> <p>android:toDegrees 结束的角度度数，负数表示逆时针，正数表示顺时针。如10圈则比android:fromDegrees大3600即可</p> <p>android:pivotX 旋转中心的X坐标</p> <p>浮点数或是百分比。浮点数表示相对于Object的左边缘，如5; 百分比表示相对于Object的左边缘，如5%; 另一种百分比表示相对于父容器的左边缘，如5%p; 一般设置为50%表示在Object中心</p> <p>android:pivotY 旋转中心的Y坐标</p> <p>浮点数或是百分比。浮点数表示相对于Object的上边缘，如5; 百分比表示相对于Object的上边缘，如5%; 另一种百分比表示相对于父容器的上边缘，如5%p; 一般设置为50%表示在Object中心</p> <p>android:duration 表示从android:fromDegrees转动到android:toDegrees所花费的时间，单位为毫秒。可以用来计算速度。</p> <p>android:interpolator表示变化率，但不是运行速度。一个插补属性，可以将动画效果设置为加速，减速，反复，反弹等。默认为开始和结束慢中间快，</p> <p>android:startOffset 在调用start函数之后等待开始运行的时间，单位为毫秒，若为10，表示10ms后开始运行</p> <p>android:repeatCount 重复的次数，默认为0，必须是int，可以为-1表示不停止</p> <p>android:repeatMode 重复的模式，默认为restart，即重头开始重新运行，可以为reverse即从结束开始向前重新运行。在android:repeatCount大于0或为infinite时生效</p> <p>android:detachWallpaper 表示是否在壁纸上运行</p> <p>android:zAdjustment 表示被animated的内容在运行时在z轴上的位置，默认为normal。</p> <p>normal保持内容当前的z轴顺序</p> <p>top运行时在最顶层显示</p> <p>bottom运行时在最底层显示</p> </blockquote> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:fromDegrees="0" android:toDegrees="360" android:duration="1000" android:repeatCount="-1" android:pivotX="50%" android:pivotY="50%" /> </set></code></pre> <p>同理轮子的动画也一样，不占代码了。</p> <p>动画定义完了我们开始定义下拉刷新列表，下拉刷新网上有很多，不详细的说了，简单的改造一下，根据刷新状态开启关闭动画即可。<br> 注释写的很详细，看一下代码吧：</p> <pre> <code class="language-java">package com.hankkin.baidugoingrefreshlayout; import android.widget.AbsListView; import android.widget.ListView; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.RelativeLayout; /** * Created by Hankkin on 16/4/10. */ public class BaiDuRefreshListView extends ListView implements AbsListView.OnScrollListener{ private static final int DONE = 0; //刷新完毕状态 private static final int PULL_TO_REFRESH = 1; //下拉刷新状态 private static final int RELEASE_TO_REFRESH = 2; //释放状态 private static final int REFRESHING = 3; //正在刷新状态 private static final int RATIO = 3; private RelativeLayout headView; //下拉刷新头 private int headViewHeight; //头高度 private float startY; //开始Y坐标 private float offsetY; //Y轴偏移量 private OnBaiduRefreshListener mOnRefreshListener; //刷新接口 private int state; //状态值 private int mFirstVisibleItem; //第一项可见item索引 private boolean isRecord; //是否记录 private boolean isEnd; //是否结束 private boolean isRefreable; //是否刷新 private ImageView ivWheel1,ivWheel2; //轮组图片组件 private ImageView ivRider; //骑手图片组件 private ImageView ivSun,ivBack1,ivBack2; //太阳、背景图片1、背景图片2 private Animation wheelAnimation,sunAnimation; //轮子、太阳动画 private Animation backAnimation1,backAnimation2; //两张背景图动画 public BaiDuRefreshListView(Context context) { super(context); init(context); } public BaiDuRefreshListView(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public BaiDuRefreshListView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } public interface OnBaiduRefreshListener{ void onRefresh(); } /** * 回调接口，想实现下拉刷新的listview实现此接口 * @param onRefreshListener */ public void setOnBaiduRefreshListener(OnBaiduRefreshListener onRefreshListener){ mOnRefreshListener = onRefreshListener; isRefreable = true; } /** * 刷新完毕，从主线程发送过来，并且改变headerView的状态和文字动画信息 */ public void setOnRefreshComplete(){ //一定要将isEnd设置为true，以便于下次的下拉刷新 isEnd = true; state = DONE; changeHeaderByState(state); } private void init(Context context) { //关闭view的OverScroll setOverScrollMode(OVER_SCROLL_NEVER); setOnScrollListener(this); //加载头布局 headView = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.headview,this,false); //测量头布局 measureView(headView); //给ListView添加头布局 addHeaderView(headView); //设置头文件隐藏在ListView的第一项 headViewHeight = headView.getMeasuredHeight(); headView.setPadding(0, -headViewHeight, 0, 0); //获取头布局图片组件 ivRider = (ImageView) headView.findViewById(R.id.iv_rider); ivSun = (ImageView) headView.findViewById(R.id.ivsun); ivWheel1 = (ImageView) headView.findViewById(R.id.wheel1); ivWheel2 = (ImageView) headView.findViewById(R.id.wheel2); ivBack1 = (ImageView) headView.findViewById(R.id.iv_back1); ivBack2 = (ImageView) headView.findViewById(R.id.iv_back2); //获取动画 wheelAnimation = AnimationUtils.loadAnimation(context, R.anim.tip); sunAnimation = AnimationUtils.loadAnimation(context, R.anim.tip1); backAnimation1 = AnimationUtils.loadAnimation(context, R.anim.a); backAnimation2 = AnimationUtils.loadAnimation(context, R.anim.b); state = DONE; isEnd = true; isRefreable = false; } @Override public void onScrollStateChanged(AbsListView absListView, int i) { } @Override public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) { mFirstVisibleItem = firstVisibleItem; } @Override public boolean onTouchEvent(MotionEvent ev) { if (isEnd) {//如果现在时结束的状态，即刷新完毕了，可以再次刷新了，在onRefreshComplete中设置 if (isRefreable) {//如果现在是可刷新状态 在setOnMeiTuanListener中设置为true switch (ev.getAction()){ //用户按下 case MotionEvent.ACTION_DOWN: //如果当前是在listview顶部并且没有记录y坐标 if (mFirstVisibleItem == 0 && !isRecord) { //将isRecord置为true，说明现在已记录y坐标 isRecord = true; //将当前y坐标赋值给startY起始y坐标 startY = ev.getY(); } break; //用户滑动 case MotionEvent.ACTION_MOVE: //再次得到y坐标，用来和startY相减来计算offsetY位移值 float tempY = ev.getY(); //再起判断一下是否为listview顶部并且没有记录y坐标 if (mFirstVisibleItem == 0 && !isRecord) { isRecord = true; startY = tempY; } //如果当前状态不是正在刷新的状态，并且已经记录了y坐标 if (state!=REFRESHING && isRecord ) { //计算y的偏移量 offsetY = tempY - startY; //计算当前滑动的高度 float currentHeight = (-headViewHeight+offsetY/3); //用当前滑动的高度和头部headerView的总高度进行比 计算出当前滑动的百分比 0到1 float currentProgress = 1+currentHeight/headViewHeight; //如果当前百分比大于1了，将其设置为1，目的是让第一个状态的椭圆不再继续变大 if (currentProgress>=1) { currentProgress = 1; } //如果当前的状态是放开刷新，并且已经记录y坐标 if (state == RELEASE_TO_REFRESH && isRecord) { setSelection(0); //如果当前滑动的距离小于headerView的总高度 if (-headViewHeight+offsetY/RATIO<0) { //将状态置为下拉刷新状态 state = PULL_TO_REFRESH; //根据状态改变headerView，主要是更新动画和文字等信息 changeHeaderByState(state); //如果当前y的位移值小于0，即为headerView隐藏了 }else if (offsetY<=0) { //将状态变为done state = DONE; stopAnim(); //根据状态改变headerView，主要是更新动画和文字等信息 changeHeaderByState(state); } } //如果当前状态为下拉刷新并且已经记录y坐标 if (state == PULL_TO_REFRESH && isRecord) { setSelection(0); //如果下拉距离大于等于headerView的总高度 if (-headViewHeight+offsetY/RATIO>=0) { //将状态变为放开刷新 state = RELEASE_TO_REFRESH; //根据状态改变headerView，主要是更新动画和文字等信息 changeHeaderByState(state); //如果当前y的位移值小于0，即为headerView隐藏了 }else if (offsetY<=0) { //将状态变为done state = DONE; //根据状态改变headerView，主要是更新动画和文字等信息 changeHeaderByState(state); } } //如果当前状态为done并且已经记录y坐标 if (state == DONE && isRecord) { //如果位移值大于0 if (offsetY>=0) { //将状态改为下拉刷新状态 state = PULL_TO_REFRESH; changeHeaderByState(state); } } //如果为下拉刷新状态 if (state == PULL_TO_REFRESH) { //则改变headerView的padding来实现下拉的效果 headView.setPadding(0,(int)(-headViewHeight+offsetY/RATIO) ,0,0); } //如果为放开刷新状态 if (state == RELEASE_TO_REFRESH) { //改变headerView的padding值 headView.setPadding(0,(int)(-headViewHeight+offsetY/RATIO) ,0, 0); } } break; //当用户手指抬起时 case MotionEvent.ACTION_UP: //如果当前状态为下拉刷新状态 if (state == PULL_TO_REFRESH) { //平滑的隐藏headerView this.smoothScrollBy((int)(-headViewHeight+offsetY/RATIO)+headViewHeight, 500); //根据状态改变headerView changeHeaderByState(state); } //如果当前状态为放开刷新 if (state == RELEASE_TO_REFRESH) { //平滑的滑到正好显示headerView this.smoothScrollBy((int)(-headViewHeight+offsetY/RATIO), 500); //将当前状态设置为正在刷新 state = REFRESHING; //回调接口的onRefresh方法 mOnRefreshListener.onRefresh(); //根据状态改变headerView changeHeaderByState(state); } //这一套手势执行完，一定别忘了将记录y坐标的isRecord改为false，以便于下一次手势的执行 isRecord = false; break; } } } return super.onTouchEvent(ev); } /** * 根据状态改变headerView的动画和文字显示 * @param state */ private void changeHeaderByState(int state){ switch (state) { case DONE://如果的隐藏的状态 //设置headerView的padding为隐藏 headView.setPadding(0, -headViewHeight, 0, 0); startAnim(); break; case RELEASE_TO_REFRESH://当前状态为放开刷新 break; case PULL_TO_REFRESH://当前状态为下拉刷新 startAnim(); break; case REFRESHING://当前状态为正在刷新 break; default: break; } } /** * 测量View * @param child */ private void measureView(View child) { ViewGroup.LayoutParams p = child.getLayoutParams(); if (p == null) { p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); } int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width); int lpHeight = p.height; int childHeightSpec; if (lpHeight > 0) { childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.EXACTLY); } else { childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); } child.measure(childWidthSpec, childHeightSpec); } /** * 开启动画 */ public void startAnim(){ ivBack1.startAnimation(backAnimation1); ivBack2.startAnimation(backAnimation2); ivSun.startAnimation(sunAnimation); ivWheel1.startAnimation(wheelAnimation); ivWheel2.startAnimation(wheelAnimation); } /** * 关闭动画 */ public void stopAnim(){ ivBack1.clearAnimation(); ivBack2.clearAnimation(); ivSun.clearAnimation(); ivWheel1.clearAnimation(); ivWheel2.clearAnimation(); } }</code></pre> <p>好了，自定义下拉刷新动画我们就实现了，其实很简单，所有的下拉刷新动画都类似这样实现的。源码我已经上传到Github上了：<br> <a href="/misc/goto?guid=4959670168568514967">https://github.com/Hankkin/BaiduGoingRefreshLayout</a><br> 求star啊。有不合理的地方还希望大家多多指正，共同进步哈。</p> <p> </p> <p>来自： <a href="/misc/goto?guid=4959670168661924388" rel="nofollow">http://blog.csdn.net/lyhhj/article/details/51120539</a></p>