自定义 View 之 QQ 个人主页视差动画效果

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 威威喵 原创，请多支持与指教。

本文首发于此   博主：威威喵  |  博客主页：https://blog.csdn.net/smile_running

    今天呢，我们来实现一个仿 QQ 个人主页视差动画效果，这种效果在很多 app 中都非常常见，下面我展示以下效果图，让大家看看要实现的效果。首先呢，以下是我的 QQ 个人主页的一张效果图，还有就是前几天在支付宝的个人主页看到的，发现它用到也是这种效果。

QQ  的个人主页信息浏览界面效果：

支付宝的个人主页效果：

   上面的 gif 动态图都是我从手机上录屏传到电脑上的，效果就是这个样子了。下面呢，我们来实现一下这个的效果，多的不说，先来看看实现的效果图吧：

这便是我们实现的效果图，来看看它是如何实现的吧。

    首先呢，我使用的是自定义 ListView 这个控件来实现的，因为 ListView 已经提供了 addHeaderView 的功能，所以我们用起来要比 RecyclerView 轻松许多，为了方便点，就使用这个来实现吧。

    我们知道 View 有提供一个 overScrollBy() 方法，这个方式是 View 支持滚动出屏幕以外，像 ScrollView、ListView 等都可以使用这个方法。其中有一个 deltaY 就是表示手指在 y 轴滑动的偏移量。我们可以利用这个值来实现拖动缩放图片的效果。

    第一步呢，当然是 ListView 的数据添加了，这个非常简单，也就不多说了，代码如下：

        alipayInfoView = findViewById(R.id.alipay_view);
        View headerView = LayoutInflater.from(this).inflate(R.layout.alipay_header, null);
        alipayInfoView.addHeaderView(headerView);
        alipayInfoView.setHeaderView(headerView);

        ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,
                new String[]{
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/",
                        "博客：https://vvcat.blog.csdn.net/"
                });
        alipayInfoView.setAdapter(arrayAdapter);

上面代码，添加了一个 HeaderView，其布局文件代码如下：

接下来的重点，就是自定义 ListView 了。我们首先看上面提到的 overScrollBy() 方法，这个方法的代码如下：

    /**
     * 当滑动的超出上,下,左,右最大范围时回调 
     *
     * @param deltaX     x方向的瞬时偏移量,左边到头,向右拉为负,右边到头,向左拉为正 
     * @param deltaY     y方向的瞬时偏移量,顶部到头,向下拉为负,底部到头,向上拉为正 
     * @param scrollX    水平方向的永久偏移量 
     * @param scrollY    竖直方向的永久偏移量 
     * @param scrollRangeX  水平方向滑动的范围 
     * @param scrollRangeY  竖直方向滑动的范围 
     * @param maxOverScrollX 水平方向最大滑动范围 
     * @param maxOverScrollY 竖直方向最大滑动范围 
     * @param isTouchEvent  是否是手指触摸滑动, true为手指, false为惯性 
     * @return
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY,
                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        if (mImageView != null) {
            if (deltaY < 0) {
                mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY;
            } else if (deltaY > 0 && mImageView.getHeight() > mImageHeight) {
                mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY;
            }
            mImageView.requestLayout();
        }
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

    简单的做下解释，当 deltaY < 0 时，表示手指向下滑动，此时 ImageView 应该是高度增加，并且放大效果。相反的，当 deltaY > 0 时，并且此时 ImageView 的高度要大于初始高度，手指向上滑动时，需要将 ImageView 还原。

    接下来是一个比较特殊的情况，就是当 ListView 的数据量比较少的时候，例如这样的情况，效果如下：

    这样拉下来时，然后再收回去是有 bug 的，原因是因为 ListView Item 数太少了，以至于 overScrollBy() 方法不会执行，所以我们要用到另一个方法：onScrollChanged() 方法，代码如下：

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mImageView != null) {
            View parent = (View) mImageView.getParent();
            if (mImageView.getHeight() > mImageHeight && parent.getTop() < 0) {
                mImageView.getLayoutParams().height = mImageView.getHeight() + parent.getTop();
                mImageView.requestLayout();
                parent.layout(0, 0, mImageView.getWidth(), mImageHeight);
            }
        }
    }

 这样的话，就解决了这个 bug，效果如下：

    再接下来呢，就是自动恢复的效果了。我们在下拉的时候，手指松开的瞬间，它会自动收缩回去，恢复原理的大小。这样的话，我们肯定要监听触摸事件，在 ACTION_UP 的时候，开启动画。

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                startRestoreAnimation();
                break;
        }
        return super.onTouchEvent(ev);
    }

 动画代码：

    private void startRestoreAnimation() {
        if (mImageView.getHeight() > mImageHeight) {
            if (mRestoreAnimation == null) {
                mRestoreAnimation = ValueAnimator.ofInt(mImageView.getHeight(), mImageHeight);
                mRestoreAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        int height = (int) animation.getAnimatedValue();
                        if (mImageView != null) {
                            mImageView.getLayoutParams().height = height + ((View) mImageView.getParent()).getTop();
                            mImageView.requestLayout();
                        }
                    }
                });
                mRestoreAnimation.setDuration(500);
                mRestoreAnimation.start();

                mRestoreAnimation.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mRestoreAnimation.cancel();
                        mRestoreAnimation = null;
                    }
                });
            }
        }
    }

    最后一步，有一点小 bug 要处理，就是 ListView 快速滑到顶部时，此时 ImageView 的高度会突然的由于滑动惯性增大了许多，这明显是不行的，像这样的效果：

    解决方法是：监听 ListView 的滚动事件，在滚动结束的时候，去判断当前 ImageView 的高度，如果超出了初始高度，则开启动画，让它恢复到初始大小即可，相当于加了一个弹性效果。

 好了，下面是案例的完整代码：

package nd.no.xww.qqmessagedragview;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;

/**
 * @author xww
 * @desciption : 支付宝个人主页 - 拖动列表图片放大效果
 * @date 2019/9/2
 * @time 21:45
 * 博主:威威喵，ID:smile_Running
 * 博客地址：
 * https://blog.csdn.net/smile_Running
 * or
 * https://vvcat.blog.csdn.net/
 */
public class AlipayInfoView extends ListView {

    private View mHeaderView;
    private View mImageView;
    private int mImageHeight;

    private boolean isFirst = true;

    public AlipayInfoView(Context context) {
        this(context, null);
    }

    public AlipayInfoView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AlipayInfoView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        this.setOnScrollListener(new OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                switch (scrollState) {
                    case SCROLL_STATE_IDLE:
                        if (mImageView != null) {
                            // 在 listview 滚动完成后，如果由于惯性，滚动时 imageview 的高度超过初始值，则执行恢复动画
                            if (mImageView.getHeight() > mImageHeight) {
                                startRestoreAnimation();
                            }
                        }
                        break;
                }
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            }
        });
    }

    public void setHeaderView(View headerView) {
        this.mHeaderView = headerView;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (mHeaderView != null) {
            if (isFirst) {
                mImageView = mHeaderView.findViewById(R.id.img_girl);
                mImageHeight = mHeaderView.getHeight();
                isFirst = false;
            }
        }
    }

    /**
     * 当滑动的超出上,下,左,右最大范围时回调
     *
     * @param deltaX     x方向的瞬时偏移量,左边到头,向右拉为负,右边到头,向左拉为正
     * @param deltaY     y方向的瞬时偏移量,顶部到头,向下拉为负,底部到头,向上拉为正
     * @param scrollX    水平方向的永久偏移量
     * @param scrollY    竖直方向的永久偏移量
     * @param scrollRangeX  水平方向滑动的范围
     * @param scrollRangeY  竖直方向滑动的范围
     * @param maxOverScrollX 水平方向最大滑动范围
     * @param maxOverScrollY 竖直方向最大滑动范围
     * @param isTouchEvent  是否是手指触摸滑动, true为手指, false为惯性
     * @return
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY,
                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        if (mImageView != null) {
            if (deltaY < 0) {
                mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY;
            } else if (deltaY > 0 && mImageView.getHeight() > mImageHeight) {
                mImageView.getLayoutParams().height = mImageView.getHeight() - deltaY;
            }
            mImageView.requestLayout();
        }
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mImageView != null) {
            View parent = (View) mImageView.getParent();
            if (mImageView.getHeight() > mImageHeight && parent.getTop() < 0) {
                mImageView.getLayoutParams().height = mImageView.getHeight() + parent.getTop();
                mImageView.requestLayout();
                parent.layout(0, 0, mImageView.getWidth(), mImageHeight);
            }
        }
    }

    ValueAnimator mRestoreAnimation = null;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                startRestoreAnimation();
                break;
        }
        return super.onTouchEvent(ev);
    }

    private void startRestoreAnimation() {
        if (mImageView.getHeight() > mImageHeight) {
            if (mRestoreAnimation == null) {
                mRestoreAnimation = ValueAnimator.ofInt(mImageView.getHeight(), mImageHeight);
                mRestoreAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        int height = (int) animation.getAnimatedValue();
                        if (mImageView != null) {
                            mImageView.getLayoutParams().height = height + ((View) mImageView.getParent()).getTop();
                            mImageView.requestLayout();
                        }
                    }
                });
                mRestoreAnimation.setDuration(500);
                mRestoreAnimation.start();

                mRestoreAnimation.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        mRestoreAnimation.cancel();
                        mRestoreAnimation = null;
                    }
                });
            }
        }
    }
}

用法很简单，相当于我们普通的 ListView 用法一样，在布局文件中加入控件即可。