zoukankan      html  css  js  c++  java
  • PullToRrefresh自定义下拉刷新动画

    首先,下载著名的刷新框架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水平居中

    <?xml version="1.0" encoding="utf-8"?>
    <merge xmlns:android="http://schemas.android.com/apk/res/android" >
    
        <FrameLayout
            android:id="@+id/fl_inner"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/header_footer_top_bottom_padding"
            android:paddingLeft="@dimen/header_footer_left_right_padding"
            android:paddingRight="@dimen/header_footer_left_right_padding"
            android:paddingTop="@dimen/header_footer_top_bottom_padding" >
    
            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal" >
    
                <ImageView
                    android:id="@+id/pull_to_refresh_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center" />
    
                <ProgressBar
                    android:id="@+id/pull_to_refresh_progress"
                    style="?android:attr/progressBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:indeterminate="true"
                    android:visibility="gone" />
            </FrameLayout>
    
         <!--    <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center_horizontal"
                android:orientation="vertical" >
    
                <TextView
                    android:id="@+id/pull_to_refresh_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:textAppearance="?android:attr/textAppearance"
                    android:textStyle="bold" />
    
                <TextView
                    android:id="@+id/pull_to_refresh_sub_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:visibility="gone" />
            </LinearLayout> -->
        </FrameLayout>
    
    </merge>

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

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

    三,设置自定义动画效果

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

    <?xml version="1.0" encoding="utf-8"?>  
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
        android:oneshot="false" >  
      
        <item  
            android:drawable="@drawable/app_loading0"  
            android:duration="150"/>  
        <item  
            android:drawable="@drawable/app_loading1"  
            android:duration="150"/>  
      
    </animation-list>  

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

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

    package com.handmark.pulltorefresh.library.internal;
    
    
    import com.handmark.pulltorefresh.library.R;
    import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;
    import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.drawable.AnimationDrawable;
    import android.graphics.drawable.Drawable;
    import android.view.View;
    
    /**
     * @date 2015/1/8
     * @author wuwenjie
     * @desc 帧动画加载布局
     */
    public class TweenAnimLoadingLayout extends LoadingLayout {
    
        private AnimationDrawable animationDrawable;
    
        public TweenAnimLoadingLayout(Context context, Mode mode,
                Orientation scrollDirection, TypedArray attrs) {
            super(context, mode, scrollDirection, attrs);
            // 初始化
            mHeaderImage.setImageResource(R.anim.loading);
            animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();
        }
        // 默认图片
        @Override
        protected int getDefaultDrawableResId() {
            return R.drawable.app_loading0;
        }
        
        @Override
        protected void onLoadingDrawableSet(Drawable imageDrawable) {
            // NO-OP
        }
        
        @Override
        protected void onPullImpl(float scaleOfLayout) {
            // NO-OP
        }
        // 下拉以刷新
        @Override
        protected void pullToRefreshImpl() {
            // NO-OP
        }
        // 正在刷新时回调
        @Override
        protected void refreshingImpl() {
            // 播放帧动画
            animationDrawable.start();
        }
        // 释放以刷新
        @Override
        protected void releaseToRefreshImpl() {
            // NO-OP
        }
        // 重新设置
        @Override
        protected void resetImpl() {
            mHeaderImage.setVisibility(View.VISIBLE);
            mHeaderImage.clearAnimation();
        }
    
    }


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

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

    在PullToRefreshBase类下,变为

    //在最原始的地方把新建动画layout换成TweenAnimLoadingLayout
            LoadingLayout createLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {
                switch (this) {
                    case ROTATE:
                    default:
    //                    return new RotateLoadingLayout(context, mode, scrollDirection, attrs);
                        return new TweenAnimLoadingLayout(context, mode, scrollDirection, attrs);
                    case FLIP:
                        return new FlipLoadingLayout(context, mode, scrollDirection, attrs);
                }
            }

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

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

  • 相关阅读:
    node入门(一)——安装
    移动web开发基础(二)——viewport
    移动web开发基础(一)——像素
    关于min-height:100%的解决办法
    用类与原型写一个组件(三)——学习笔记
    用类与原型写一个组件(二)——学习笔记
    用类与原型写一个组件(一)——学习笔记
    js类、原型——学习笔记
    Android 常用RGB值及名称
    AES加密示例
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/5283604.html
Copyright © 2011-2022 走看看