Android 更改下拉刷新(使用PulltoRefresh)的下拉动画样式

一 概述

相信大家都熟悉PullToRefresh的开源控件，而且可以根据需求替换掉他的图片和样式，但是想要更改它的动画样式，如下图所示，开源控件并没有提供如下方式,需要通读并修改它源代码。

二 设计思路

OK,我们来设计一下,实现如上的方式,有两种思路:

• 使用原来控件的那个样式图,并在原来的控件基础上进行动画属性修改
• 新建一个ImageView,把原来的ImageView隐藏掉,并重新设计动画样式

如上两种第一种设计方案比较容易实现,第二种设计方案会产生重影的Bug,即小车上方还会出现一个小车原因在于PullToRefresh 是叠层的设计,他使用如下代码进行解决该bug

public final void hideAllViews() {
        if (View.VISIBLE == mHeaderText.getVisibility()) {
            mHeaderText.setVisibility(View.INVISIBLE);
        }
        if (View.VISIBLE == mHeaderProgress.getVisibility()) {
            mHeaderProgress.setVisibility(View.INVISIBLE);
        }
        if (View.VISIBLE == mHeaderImage.getVisibility()) {
            mHeaderImage.setVisibility(View.INVISIBLE);
        }
        if (View.VISIBLE == mSubHeaderText.getVisibility()) {
            mSubHeaderText.setVisibility(View.INVISIBLE);
        }
        if (View.VISIBLE == mBottomText.getVisibility()) {
            mBottomText.setVisibility(View.INVISIBLE);
        }
    }

三 修改源代码

现在选定了第一种方案,那么我们就要查找原来PullToRefresh的ImageView在哪个地方进行动画设置,通过一系列的查找,我们在如下LoadingLayout里面找到mHeaderImage,定位到这个凶手了~~

在Esplice用快捷键Ctrl+Shift+U定位到找个变量的引用,哦,原来他是这样设置动画的,通过自定义属性得到ImageViw的动画属性,如果没有定义动画,则默认旋转动画.那么我们就来重新定义这个默认动画,点击getAnimation的引用来到refreshing的方法这里是设置ImageView动画的地方,注释掉他设置动画的代码,并重新设置我们的水平动画

public final void refreshing() {
        if (null != mHeaderText) {
            mHeaderText.setText(mRefreshingLabel);
        }

        if (null != mBottomText) {
            mBottomText.setText(mBottomLabel);
        }

        LayoutParams layoutParams = (LayoutParams) mImageLayout.getLayoutParams();
        // if (mUseIntrinsicAnimation) {
        // ((AnimationDrawable) mHeaderImage.getDrawable()).start();
        TranslateAnimation translateAnimation = new TranslateAnimation(0, -layoutParams.width, 0, 0);
        translateAnimation.setDuration(1000);
        translateAnimation.setRepeatCount(TranslateAnimation.INFINITE);
        translateAnimation.setRepeatMode(TranslateAnimation.RESTART);
        mHeaderImage.startAnimation(translateAnimation);

        // } else {
        // // Now call the callback
        // refreshingImpl();
        // }

        if (null != mSubHeaderText) {
            mSubHeaderText.setVisibility(View.GONE);
        }
    }

设置好了动画,把其他不想关的错误也注释掉,在引用这个控件的时候加上属性,设置图片就能看到漂亮的汽车水平移动的图片啦,是不是很简单

<com.handmark.pulltorefresh.library.PullToRefreshListView  
        xmlns:ptr="http://schemas.android.com/apk/res-auto"  
        android:id="@+id/pullToRefreshListView1"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:layout_alignParentLeft="true"  
        android:layout_alignParentTop="true"  
        ptr:ptrDrawable="@drawable/icon_car"  
        ptr:ptrHeaderBackground="#88000000"  
        ptr:ptrHeaderSubTextColor="#ffffff"  
        ptr:ptrHeaderTextColor="#ffffff"  
        ptr:ptrRotateDrawableWhilePulling="false" >  
    </com.handmark.pulltorefresh.library.PullToRefreshListView>

Demo下载地址: http://download.csdn.net/detail/woody0518/9311551

朋友们也可以加入群一起讨论学习(群号:499537304)