下拉缩放HeaderView的ListView:PullToZoomInListView

Home / Android MrLee 2015-3-1 3514
下面这种效果在ios应用中很常见：

60991403848928



其实在android中也有不少应用实现了这种效果，比如知乎日报（新版本好像去掉了），但是我觉得做的最好的还是“最美应用”。于是将最美应用的apk下载下来，用apktool反编译出其xml文件，发现它用的是自定义的一个ListView控件：
com.brixd.android.utils.ui.PullToZoomExpandableListView，在网上搜不到相关信息，显然是自己写的了，于是再用dex2jar将最美应用的classes.dex反编译成java代码，当然编译出来的只是其混淆过的代码，但是仔细分析一般还是能够看出一些有用的东西，很多第三方的开源代码我都是在反编译别人的代码中知道的。
不幸的是虽然大致能从反编译的代码中看出其结构，也找出了PullToZoomExpandableListView这个类（其实是两个还有个是PullToZoomListView，估计这个才是最符合我需求的），但是PullToZoomListView中处理手势的关键代码完全混淆了，放弃，只能寻找他法。
一般遇到这种情况我都想到github和stackoverflow，特别是github上，最近关于android的东西越来越完善，在github上搜listview，总算找到了一个完全符合我需求的ListView，看了代码才发现，最美应用的PullToZoomListView其实90%的代码和它相同，实现原理则是100%相同。突然觉得最美应用有点不厚道，用了开源的代码都改成自己的了，不过很多人都是这样的。
github地址如下：https://github.com/matrixxun/PullToZoomInListView

72811403851608


public boolean onTouchEvent(MotionEvent paramMotionEvent) {
        Log.d("mmm", "" + (0xFF & paramMotionEvent.getAction()));
        switch (0xFF & paramMotionEvent.getAction()) {
        case 4:
        case 0:
            if (!this.mScalingRunnalable.mIsFinished) {
                this.mScalingRunnalable.abortAnimation();
            }
            this.mLastMotionY = paramMotionEvent.getY();
            this.mActivePointerId = paramMotionEvent.getPointerId(0);
            this.mMaxScale = (this.mScreenHeight / this.mHeaderHeight);
            this.mLastScale = (this.mHeaderContainer.getBottom() / this.mHeaderHeight);
            break;
        case 2:
        .........
}

我将这些数字改成了能看懂的形式如 MotionEvent.ACTION_MOVE。同时将paramMotionEvent这个参数名改成了比较熟悉的ev，paramMotionEvent作为一个动作事件太长了，看起来真不舒服，其他地方未做任何修改。我修改过的代码放到了百度网盘：
http://pan.baidu.com/s/1hqvNmew
其实PullToZoomListView的实现原理很简单主要是在case MotionEvent.ACTION_MOVE:代码段中判断向下滑动的偏移量，根据这个来改变listview headerView内容区域的高度，并且在手指放开的那一刻，停止缩放，启用一个动画来使HeaderView平滑的恢复到放大之前的状态。
下面是缩放过程的关键代码： 
case MotionEvent.ACTION_MOVE:
    Log.d("mmm", "mActivePointerId" + mActivePointerId);
    int j = ev.findPointerIndex(this.mActivePointerId);
    if (j == -1) {
        Log.e("PullToZoomListView", "Invalid pointerId="
                + this.mActivePointerId + " in onTouchEvent");
    } else {
        if (this.mLastMotionY == -1.0F)
            this.mLastMotionY = ev.getY(j);
        if (this.mHeaderContainer.getBottom() >= this.mHeaderHeight) {
            ViewGroup.LayoutParams localLayoutParams = this.mHeaderContainer
                    .getLayoutParams();
            float f = ((ev.getY(j) - this.mLastMotionY + this.mHeaderContainer
                    .getBottom()) / this.mHeaderHeight - this.mLastScale)
                    / 2.0F + this.mLastScale;
            if ((this.mLastScale <= 1.0D) && (f < this.mLastScale)) {
                localLayoutParams.height = this.mHeaderHeight;
                this.mHeaderContainer
                        .setLayoutParams(localLayoutParams);
                return super.onTouchEvent(ev);
            }
            this.mLastScale = Math.min(Math.max(f, 1.0F),
                    this.mMaxScale);
            localLayoutParams.height = ((int) (this.mHeaderHeight * this.mLastScale));
            if (localLayoutParams.height < this.mScreenHeight)
                this.mHeaderContainer
                        .setLayoutParams(localLayoutParams);
            this.mLastMotionY = ev.getY(j);
            return true;
        }
        this.mLastMotionY = ev.getY(j);
    }
    break;
//其中
localLayoutParams.height = ((int) (this.mHeaderHeight * this.mLastScale));
就是根据滑动偏移计算出新的高度，mLastScale是一个系数，只相对于原始高度的比值，mLastScale是根据垂直偏移计算出来的，其实这个mLastScale具体该怎么计算取决于你自己的想法，我根据我自己的想法也写了个方法，也能得到缩放效果，只是没他这个效果好。
缩放之后如果手指放开，需要平滑回复原始高度： 
case MotionEvent.ACTION_UP:
    reset();
    endScraling();
    break;
reset的代码如下 
private void reset() {
    this.mActivePointerId = -1;
    this.mLastMotionY = -1.0F;
    this.mMaxScale = -1.0F;
    this.mLastScale = -1.0F;
}
这个只是恢复一些初始值，但是真正实现平滑过渡是在endScraling过程中，endScraling()的实现如下： 
private void endScraling() {
    if (this.mHeaderContainer.getBottom() >= this.mHeaderHeight)
        Log.d("mmm", "endScraling");
    this.mScalingRunnalable.startAnimation(200L);
}
交给了mScalingRunnalable，mScalingRunnalable是一个内部类： 
class ScalingRunnalable implements Runnable {
    long mDuration;
    boolean mIsFinished = true;
    float mScale;
    long mStartTime;
    ScalingRunnalable() {
    }
    public void abortAnimation() {
        this.mIsFinished = true;
    }
    public boolean isFinished() {
        return this.mIsFinished;
    }
    public void run() {
        float f2;
        ViewGroup.LayoutParams localLayoutParams;
        if ((!this.mIsFinished) && (this.mScale > 1.0D)) {
            float f1 = ((float) SystemClock.currentThreadTimeMillis() - (float) this.mStartTime)
                    / (float) this.mDuration;
            f2 = this.mScale - (this.mScale - 1.0F)
                    * PullToZoomListView.sInterpolator.getInterpolation(f1);
            localLayoutParams = PullToZoomListView.this.mHeaderContainer
                    .getLayoutParams();
            if (f2 > 1.0F) {
                Log.d("mmm", "f2>1.0");
                localLayoutParams.height = PullToZoomListView.this.mHeaderHeight;
                ;
                localLayoutParams.height = ((int) (f2 * PullToZoomListView.this.mHeaderHeight));
                PullToZoomListView.this.mHeaderContainer
                        .setLayoutParams(localLayoutParams);
                PullToZoomListView.this.post(this);
                return;
            }
            this.mIsFinished = true;
        }
    }
    public void startAnimation(long paramLong) {
        this.mStartTime = SystemClock.currentThreadTimeMillis();
        this.mDuration = paramLong;
        this.mScale = ((float) (PullToZoomListView.this.mHeaderContainer
                .getBottom()) / PullToZoomListView.this.mHeaderHeight);
        this.mIsFinished = false;
        PullToZoomListView.this.post(this);
    }
}
我觉得难点不在于如何改变mHeaderContainer的高度吧，难在如何让一个View按一定的时间曲线改变属性，这其实是属性动画该做的事，但是这里没有用属性动画，显然作者对View的动画很熟悉，我觉得这里作者用自己的方法实现了属性动画， ScalingRunnalable在startAnimation中调用了PullToZoomListView.this.post(this);不懂得可以搜索View.post(Runnable)，post调用ScalingRunnalable的run方法，而ScalingRunnalable run方法中再次调用了post，就这样不断的更新UI，直到达到一定的条件退出这个循环（这里这个条件是if((!this.mIsFinished) && (this.mScale > 1.0D))），这里的关键点是每次执行run的时候mHeaderContainer的高度究竟该变化多少， 
f2 = this.mScale - (this.mScale - 1.0F)
                    * PullToZoomListView.sInterpolator.getInterpolation(f1);
中PullToZoomListView.sInterpolator.getInterpolation(f1)给了我们答案，但是我也没太明白这个getInterpolation的含义，以后遇到这样的问题依葫芦画瓢就是了。

本文链接:https://www.it72.com/1128.htm

收藏的用户（0） X
正在加载信息~
推荐阅读
Android性能分析工具——TraceView
DiskLruCache硬盘缓存
基于ksoap2实现火车时刻查询
10年后，Android应用程序仍然比iOS应用程序差
ImageView使用属性动画解决OOM问题
Android studio引入so文件最简单方法
安卓开发者看过来Android N新特性
Android开发之2.3中实现截屏
用Netty实现聊天功能
快速了解Android Studio图片目录mdpi hdpi xhdpi xxhdpi xxxhdpi
最新回复 (0)
返回
站点信息
  • 文章
    2280
  • 用户
    1336
  • 访客
    9485830
每日一句
Winners are simply willing to do what losers won't.
胜者注重实践，败者光说不练。-《百万美元宝贝》
新会员
运行
鄂ICP备2023028577号