关闭

PullToRrefresh自定义下拉刷新动画

标签: android动画
117人阅读 评论(0) 收藏 举报
分类:

参考自 http://blog.csdn.net/wwj_748/article/details/42523611

首先,下载著名的刷新框架https://github.com/chrisbanes/Android-PullToRefresh,其中simple为demo,library和extras作为项目包导入到simple中

一,定义刷新动画的layout

在library下的com.handmark.pulltorefresh.library.internal包中的FlipLoadingLayout和RotateLoadingLayout

FlipLoadingLayout为ios风格的箭头颠倒的刷新动画

RotateLoadingLayout为android风格的图片旋转动画

共同的设置方法是

1,getDefaultDrawableResId()

动画默认图片,可以替换为自己的图片

2,refreshingImpl()

正在刷新时的回调方法,可以设置开始动画

3,resetImpl()

重置

二,正在刷新时为图片居中旋转的效果

1,首先修改library中的pull_to_refresh_header_vertical.xml,去除文字的layout,图片layout水平居中

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <merge xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <FrameLayout  
  5.         android:id="@+id/fl_inner"  
  6.         android:layout_width="fill_parent"  
  7.         android:layout_height="wrap_content"  
  8.         android:paddingBottom="@dimen/header_footer_top_bottom_padding"  
  9.         android:paddingLeft="@dimen/header_footer_left_right_padding"  
  10.         android:paddingRight="@dimen/header_footer_left_right_padding"  
  11.         android:paddingTop="@dimen/header_footer_top_bottom_padding" >  
  12.   
  13.         <FrameLayout  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_gravity="center_horizontal" >  
  17.   
  18.             <ImageView  
  19.                 android:id="@+id/pull_to_refresh_image"  
  20.                 android:layout_width="wrap_content"  
  21.                 android:layout_height="wrap_content"  
  22.                 android:layout_gravity="center" />  
  23.   
  24.             <ProgressBar  
  25.                 android:id="@+id/pull_to_refresh_progress"  
  26.                 style="?android:attr/progressBarStyleSmall"  
  27.                 android:layout_width="wrap_content"  
  28.                 android:layout_height="wrap_content"  
  29.                 android:layout_gravity="center"  
  30.                 android:indeterminate="true"  
  31.                 android:visibility="gone" />  
  32.         </FrameLayout>  
  33.   
  34.      <!--    <LinearLayout  
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:layout_gravity="center"  
  38.             android:gravity="center_horizontal"  
  39.             android:orientation="vertical" >  
  40.   
  41.             <TextView  
  42.                 android:id="@+id/pull_to_refresh_text"  
  43.                 android:layout_width="wrap_content"  
  44.                 android:layout_height="wrap_content"  
  45.                 android:singleLine="true"  
  46.                 android:textAppearance="?android:attr/textAppearance"  
  47.                 android:textStyle="bold" />  
  48.   
  49.             <TextView  
  50.                 android:id="@+id/pull_to_refresh_sub_text"  
  51.                 android:layout_width="wrap_content"  
  52.                 android:layout_height="wrap_content"  
  53.                 android:singleLine="true"  
  54.                 android:textAppearance="?android:attr/textAppearanceSmall"  
  55.                 android:visibility="gone" />  
  56.         </LinearLayout> -->  
  57.     </FrameLayout>  
  58.   
  59. </merge>  


2,去除LoadingLayout中的关于textview的代码

3,可以在RotateLoadingLayout中的getDefaultDrawableResId()方法替换成自己的图片

三,设置自定义动画效果

1,首先设置一个简单的小人走的动画效果,在anim文件夹下新建一个xml,需要加载两张图片,控制图片的停留时间

  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:oneshot="false" >    
  4.     
  5.     <item    
  6.         android:drawable="@drawable/app_loading0"    
  7.         android:duration="150"/>    
  8.     <item    
  9.         android:drawable="@drawable/app_loading1"    
  10.         android:duration="150"/>    
  11.     
  12. </animation-list>    

2,新建刷新动画的layout,TweenAnimLoadingLayout,类似于之前的源码中的FlipLoadingLayout和RotateLoadingLayout

主要设置初始化,和那几个关键方法就行

  1. package com.handmark.pulltorefresh.library.internal;  
  2.   
  3.   
  4. import com.handmark.pulltorefresh.library.R;  
  5. import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;  
  6. import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;  
  7.   
  8. import android.content.Context;  
  9. import android.content.res.TypedArray;  
  10. import android.graphics.drawable.AnimationDrawable;  
  11. import android.graphics.drawable.Drawable;  
  12. import android.view.View;  
  13.   
  14. /** 
  15.  * @date 2015/1/8 
  16.  * @author wuwenjie 
  17.  * @desc 帧动画加载布局 
  18.  */  
  19. public class TweenAnimLoadingLayout extends LoadingLayout {  
  20.   
  21.     private AnimationDrawable animationDrawable;  
  22.   
  23.     public TweenAnimLoadingLayout(Context context, Mode mode,  
  24.             Orientation scrollDirection, TypedArray attrs) {  
  25.         super(context, mode, scrollDirection, attrs);  
  26.         // 初始化  
  27.         mHeaderImage.setImageResource(R.anim.loading);  
  28.         animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();  
  29.     }  
  30.     // 默认图片  
  31.     @Override  
  32.     protected int getDefaultDrawableResId() {  
  33.         return R.drawable.app_loading0;  
  34.     }  
  35.       
  36.     @Override  
  37.     protected void onLoadingDrawableSet(Drawable imageDrawable) {  
  38.         // NO-OP  
  39.     }  
  40.       
  41.     @Override  
  42.     protected void onPullImpl(float scaleOfLayout) {  
  43.         // NO-OP  
  44.     }  
  45.     // 下拉以刷新  
  46.     @Override  
  47.     protected void pullToRefreshImpl() {  
  48.         // NO-OP  
  49.     }  
  50.     // 正在刷新时回调  
  51.     @Override  
  52.     protected void refreshingImpl() {  
  53.         // 播放帧动画  
  54.         animationDrawable.start();  
  55.     }  
  56.     // 释放以刷新  
  57.     @Override  
  58.     protected void releaseToRefreshImpl() {  
  59.         // NO-OP  
  60.     }  
  61.     // 重新设置  
  62.     @Override  
  63.     protected void resetImpl() {  
  64.         mHeaderImage.setVisibility(View.VISIBLE);  
  65.         mHeaderImage.clearAnimation();  
  66.     }  
  67.   
  68. }  

3,替换之前的刷新layout为TweenAnimLoadingLayout

找到library项目com.handmark.pulltorefresh.library包下的PullToRefreshListView,发现头脚的layout用的都是LoadingLayout,找到头脚layout的创建方法createLoadingLayout进入,在createLoadingLayout方法中再进入createLoadingLayout,找到最原始的新建动画layout的地方,把默认的RotateLoadingLayout改成TweenAnimLoadingLayout就行了

在PullToRefreshBase类下,变为

  1. //在最原始的地方把新建动画layout换成TweenAnimLoadingLayout  
  2.         LoadingLayout createLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {  
  3.             switch (this) {  
  4.                 case ROTATE:  
  5.                 default:  
  6. //                  return new RotateLoadingLayout(context, mode, scrollDirection, attrs);  
  7.                     return new TweenAnimLoadingLayout(context, mode, scrollDirection, attrs);  
  8.                 case FLIP:  
  9.                     return new FlipLoadingLayout(context, mode, scrollDirection, attrs);  
  10.             }  
  11.         }  

4,去除LoadingLayout中的关于textview的代码



代码下载 http://download.csdn.net/detail/superjunjin/8589827


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:90370次
    • 积分:1325
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:100篇
    • 译文:1篇
    • 评论:22条
    最新评论