可以下拉缩放HeaderView的ListView:PullToZoomInListView

泡在网上的日子 / 文 发表于2014-06-27 14:43 次阅读 listview,zoom

下面这种效果在ios应用中很常见:

iOS / iPhone 下拉列表或者ScrollView,放大顶部的图片。类似tweetbot app的个人页面效果。

其实在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

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/1hqrDyoW


其实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);
}

交给了mScalingRunnalablemScalingRunnalable是一个内部类:

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的含义,以后遇到这样的问题依葫芦画瓢就是了。

收藏 赞 (16) 踩 (1)
上一篇:android点击事件在不同级别view中的优先级问题
开发中很常见的一个问题,当项目中的listview不仅仅是简单的文字,Item中存在诸如ImageButton,Button,CheckBox等子控件(也可以说是Button或者Checkable的子类控件),可能会发生点击每一个item的时候没有反应,无法获取的焦点。 这是因为此时这些子控件会将
下一篇:Android PopupWindow详解
本文介绍Popupwindow的一些难点,比如大小问题,焦点问题,点击空白popup消失问题,以及介绍如何用PopupWindow实现模态对话框