1. 程式人生 > >android PullToRrefresh自定義下拉重新整理動畫

android PullToRrefresh自定義下拉重新整理動畫

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

2,去除LoadingLayout中的關於textview的程式碼

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

三,設定自定義動畫效果

1,首先設定一個簡單的小人走的動畫效果,在anim資料夾下新建一個xml,需要載入兩張圖片,控制圖片的停留時間

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

2,新建重新整理動畫的layout,TweenAnimLoadingLayout,類似於之前的原始碼中的FlipLoadingLayout和RotateLoadingLayout

主要設定初始化,和那幾個關鍵方法就行

  1. package com.handmark.pulltorefresh.library.internal;  
  2. import com.handmark.pulltorefresh.library.R;  
  3. import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;  
  4. import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;  
  5. import android.content.Context;  
  6. import android.content.res.TypedArray;  
  7. import android.graphics.drawable.AnimationDrawable;  
  8. import android.graphics.drawable.Drawable;  
  9. import android.view.View;  
  10. /** 
  11.  * @date 2015/1/8 
  12.  * @author wuwenjie 
  13.  * @desc 幀動畫載入佈局 
  14.  */
  15. publicclass TweenAnimLoadingLayout extends LoadingLayout {  
  16.     private AnimationDrawable animationDrawable;  
  17.     public TweenAnimLoadingLayout(Context context, Mode mode,  
  18.             Orientation scrollDirection, TypedArray attrs) {  
  19.         super(context, mode, scrollDirection, attrs);  
  20.         // 初始化
  21.         mHeaderImage.setImageResource(R.anim.loading);  
  22.         animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();  
  23.     }  
  24.     // 預設圖片
  25.     @Override
  26.     protectedint getDefaultDrawableResId() {  
  27.         return R.drawable.app_loading0;  
  28.     }  
  29.     @Override
  30.     protectedvoid onLoadingDrawableSet(Drawable imageDrawable) {  
  31.         // NO-OP
  32.     }  
  33.     @Override
  34.     protectedvoid onPullImpl(float scaleOfLayout) {  
  35.         // NO-OP
  36.     }  
  37.     // 下拉以重新整理
  38.     @Override
  39.     protectedvoid pullToRefreshImpl() {  
  40.         // NO-OP
  41.     }  
  42.     // 正在重新整理時回撥
  43.     @Override
  44.     protectedvoid refreshingImpl() {  
  45.         // 播放幀動畫
  46.         animationDrawable.start();  
  47.     }  
  48.     // 釋放以重新整理
  49.     @Override
  50.     protectedvoid releaseToRefreshImpl() {  
  51.         // NO-OP
  52.     }  
  53.     // 重新設定
  54.     @Override
  55.     protectedvoid resetImpl() {  
  56.         mHeaderImage.setVisibility(View.VISIBLE);  
  57.         mHeaderImage.clearAnimation();  
  58.     }