自定义 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，其布局文件代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/img_girl"android:layout_width="match_parent"android:layout_height="280dp"android:scaleType="centerCrop"android:src="@drawable/girl" /></FrameLayout>

接下来的重点，就是自定义 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*/@Overrideprotected 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() 方法，代码如下：

    @Overrideprotected 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")@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {switch (scrollState) {case SCROLL_STATE_IDLE:if (mImageView != null) {// 在 listview 滚动完成后，如果由于惯性，滚动时 imageview 的高度超过初始值，则执行恢复动画if (mImageView.getHeight() > mImageHeight) {startRestoreAnimation();}}break;}}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {}});}public void setHeaderView(View headerView) {this.mHeaderView = headerView;}@Overrideprotected 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*/@Overrideprotected 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);}@Overrideprotected 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")@Overridepublic 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() {@Overridepublic 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() {@Overridepublic void onAnimationEnd(Animator animation) {mRestoreAnimation.cancel();mRestoreAnimation = null;}});}}}
}

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

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

自定义View | 仿QQ运动步数进度效果
项目GitHub地址思路固定不动的蓝色大圆弧动画变动的红色小圆弧中间的步数文字显示相关的自定义属性比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
自定义View 仿QQ运动步数进度效果
1. 概述我记得QQ之前是有一个,运动步数的进度效果,今天打开QQ一看发现没有了.具体效果我也不清楚了,我就按照自己大概的印象写一下,这一期我们主要是熟悉Paint画笔的使用: 2. 效果 ...
android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说先上效果图实现其实很简单,先用两张图一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
Android 抖音爱心动画,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
android代码实现手机加速功能,Android自定义View实现内存清理加速球效果
Android自定义View实现内存清理加速球效果发布时间:2020-09-21 22:21:57 来源:脚本之家阅读:105 作者:程序员的自我反思前言用过猎豹清理大师或者相类似的安全软件, ...
android+清除循环动画,android自定义View之(4)-一键清除动画
android自定义View之(四)------一键清除动画 1.前言: 自己也是参考别人的一些自定义view例子,学习了一些基本的自定义view的方法.今天,我参考了一些资料,再结合自已的一些理解, ...
14_自定义ItemDecoration实现qq好友列表分组效果
14_自定义ItemDecoration实现qq好友列表分组效果一.先上效果二.RecyclerView实现简单分组 RecyclerView比较常规的用法,显示多item布局,直接上代码: pu ...
安卓仿苹果音量调节_android自定义view仿照MIUI中音量控制效果
先看效果图: 这就是miui中的音量效果图,实现思路是自定义视图,绘制圆环,然后设置进度显示. 核心代码在onDraw中实现如下: @Override protected void onDraw(Ca ...
android 自定义红心,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...

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

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

最新文章

热门文章