仿QQ控件下拉放大阻尼效果的ScrollView

最新推荐文章于 2020-04-24 13:34:01 发布
最新推荐文章于 2020-04-24 13:34:01 发布
阅读量525 收藏 2
点赞数 1
分类专栏： 高级UI 文章标签： overScrollBy QQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingshuhong_/article/details/103447333
版权

先放效果图，可能跟QQ原有的实现有点差别，只能说类似
在这里插入图片描述
完成这个效果主要用到的就是ScrollView 的overScrollBy 这个方法主要是当你的滑到边界了然后继续向下滑动的时候触发。

    /**
     * Scroll the view with standard behavior for scrolling beyond the normal
     * content boundaries. Views that call this method should override
     * {@link #onOverScrolled(int, int, boolean, boolean)} to respond to the
     * results of an over-scroll operation.
     *
     * Views can use this method to handle any touch or fling-based scrolling.
     *
     * @param deltaX Change in X in pixels
     * @param deltaY Change in Y in pixels
     * @param scrollX Current X scroll value in pixels before applying deltaX
     * @param scrollY Current Y scroll value in pixels before applying deltaY
     * @param scrollRangeX Maximum content scroll range along the X axis
     * @param scrollRangeY Maximum content scroll range along the Y axis
     * @param maxOverScrollX Number of pixels to overscroll by in either direction
     *          along the X axis.
     * @param maxOverScrollY Number of pixels to overscroll by in either direction
     *          along the Y axis.
     * @param isTouchEvent true if this scroll operation is the result of a touch event.
     * @return true if scrolling was clamped to an over-scroll boundary along either
     *          axis, false otherwise.
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY,
                                   int scrollX, int scrollY,
                                   int scrollRangeX, int scrollRangeY,
                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {

这里我们主要注意deltaY 变化就行，代表的是Y轴的上的变化值。 关于onOverScrolled 注释说需要重写来操作over-scroll 。 关注源代码可以知道 onOverScrolled 需要控制scrollRangeY 以及maxOverScrollY 的值才能去操作，比较麻烦。这里我们直接得到 deltaY操作就行。 如果为负代表向下滑动。

开始写代码之前我们先分析布局，解释下我的代码逻辑。

<com.example.behaviordemo.qq.QQOverScrollView
    android:id="@+id/qq_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <ImageView
            android:id="@+id/zoom_view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/qq_header_height"
            android:scaleType="centerCrop"
            android:src="@mipmap/timg" />
        <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:paddingLeft="30dp"
               android:layout_height="@dimen/qq_header_content_height">
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/profile_image"
                    android:layout_width="86dp"
                    android:layout_height="86dp"
                    android:layout_gravity="center_vertical"
                    android:layout_alignParentBottom="true"
                    android:src="@mipmap/lufei"
                    app:civ_border_width="2dp"
                    app:civ_border_color="#ffffff"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/aqua" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/yellow" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:background="@color/blue" />
        </LinearLayout>
    </FrameLayout>
</com.example.behaviordemo.qq.QQOverScrollView>

如下图
在这里插入图片描述
左边是布局效果，右边是界面加载到模拟器效果， 可以看出我在初始化的时候，
对下面的内容部分坐了一些margin偏移.在这里插入图片描述
在这里插入图片描述
如上图的说明，头像布局是在content_layout的布局里面，这就是为了固定头像布局让其跟随一齐滑动。这样我就可以专心处理后面的zoom_view 放大以及content_layout 布局的下滑移动问题。
在这里插入图片描述zoom_view的初始大小是300dp， 下滑过程中需要增大100dp， 高度400dp
content_layout 最初位置是在margin_top100dp的位置，由于它始终要在我们看到头像的上面100dp位置，最终他的margin值要是200dp。
所以我定义了下面几个常量值，并且在init初始化的时候获取到

<dimen name="qq_header_height">300dp</dimen>
<dimen name="qq_header_max_height">400dp</dimen>
<dimen name="qq_content_margin_top">100dp</dimen>
<dimen name="qq_header_content_height">100dp</dimen>

private void init() {
    Resources resources = getResources();
    mInitHeaderView = resources.getDimensionPixelOffset(R.dimen.qq_header_height);
    mHeaderMaxHeight = resources.getDimensionPixelOffset(R.dimen.qq_header_max_height);
    mInitContentLayoutTopMargin = resources.getDimensionPixelOffset(R.dimen.qq_content_margin_top);
}

接下来就是处理滑动的逻辑

    protected boolean overScrollBy(int deltaX, int deltaY,
                                   int scrollX, int scrollY,
                                   int scrollRangeX, int scrollRangeY,
                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        Log.d(TAG, "overScrollBy: deltaY = " + deltaY+"  ; scrollY = "+scrollY);
		//判断方向 小于0 代表下滑
        if (mZoomView != null && deltaY < 0) {
            ViewGroup.LayoutParams lp = mZoomView.getLayoutParams();
            //计算出最大滑动位置 400dp - 300dp
            float maxDistance = mHeaderMaxHeight - mInitHeaderView;
            //最大允许的高度
            if (lp.height < mHeaderMaxHeight) {
            	//乘0.3 为了实现阻力效果
                float offestY = (float) Math.abs(deltaY * 0.3);
                //滑动变化的大小加上背景图片View的高度，并重新测量绘制
                lp.height = (int) (mZoomView.getHeight() + offestY);
                mZoomView.requestLayout();

				//计算content_layout的滑动距离
                int zoomViewHeight = mZoomView.getHeight();
                //当前背景图片的高度 减去 初始高度，得到是变化大小，最后得到变化的比例
                float ratio = (float) (zoomViewHeight - mInitHeaderView) / maxDistance;
                Log.d(TAG, "overScrollBy: zoomViewHeight = "+zoomViewHeight
                        +" ; mInitHeaderView = "+mInitHeaderView
                        +" ; ratio = "+ratio);
                //每次变化这么多  changeOffestY
                // 实际就是200dp大小
                float totalOffsetY = maxDistance * 2 ;

                FrameLayout.LayoutParams content_lp = (LayoutParams) mContentLayout.getLayoutParams();
                //初始margin 加上最大偏移乘以比例， 得到的就是此时应该偏移的大小
                content_lp.topMargin = (int) (mInitContentLayoutTopMargin + ratio * totalOffsetY);
                mContentLayout.requestLayout();
            }

        }
        return super.overScrollBy(deltaX, deltaY,
                scrollX, scrollY,
                scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

所有逻辑都写在了注释里面， 逻辑相对简单，所以不重复描述。
接下来一个问题，如何回弹。 这里使用的策略也很简单，我们监听用户的手指离开屏幕，我们去执行动画，回到初始位置，也就是mInitHeaderView和mInitContentLayoutTopMargin。

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        handlerEvent(ev);
        return super.onTouchEvent(ev);
    }

    private void handlerEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            Log.d(TAG, "handlerEvent: MotionEvent.ACTION_UP");
            if (mZoomView.getHeight() > mInitHeaderView) {
                SpringbackAnimation mSpringbackAnimation = new SpringbackAnimation(mInitHeaderView);
                mSpringbackAnimation.setInterpolator(new OvershootInterpolator());
                mSpringbackAnimation.setDuration(700);
                mZoomView.startAnimation(mSpringbackAnimation);
            }
        }
    }

监听ACTION_UP 事件然后判断高度是否大于mInitHeaderView 如果大于我们就开启动画执行恢复功能。


    private class SpringbackAnimation extends Animation {

        private int currentHeight;
        private int diffHeight;

        public SpringbackAnimation(int targetHeight) {
            this.currentHeight = mZoomView.getHeight();
            this.diffHeight = mZoomView.getHeight() - targetHeight;
        }

        /**
         * @param interpolatedTime 0 -1
         * @param t
         */
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            Log.d(TAG, "applyTransformation: interpolatedTime = " + interpolatedTime);
            mZoomView.getLayoutParams().height = (int) (currentHeight - diffHeight * interpolatedTime);
            mZoomView.requestLayout();

            float maxDistance = mInitHeaderView / 3;
            int zoomViewHeight = mZoomView.getHeight();
            float ratio = (float) (zoomViewHeight - mInitHeaderView) / maxDistance;
            Log.d(TAG, "overScrollBy: zoomViewHeight = "+zoomViewHeight
                    +" ; mInitHeaderView = "+mInitHeaderView
                    +" ; ratio = "+ratio);
            //每次变化这么多  changeOffestY
            float totalOffsetY = maxDistance * 2 ;

            FrameLayout.LayoutParams content_lp = (LayoutParams) mContentLayout.getLayoutParams();
            content_lp.topMargin = (int) (mInitContentLayoutTopMargin + ratio * totalOffsetY);
            mContentLayout.requestLayout();
            super.applyTransformation(interpolatedTime, t);
        }
    }

这段代码的逻辑其实非常简单，但是需要注意的是有一个方法参数需要解释。protected void applyTransformation(float interpolatedTime, Transformation t)其中interpolatedTime取值范围是0-1， 其实就是一个比例。 当前动画执行时间的比例。700ms的动画，时间过去了100ms 那么就是七分之一秒值。
最后贴一下完整的代码逻辑

public class QQOverScrollView extends ScrollView {

    private static final String TAG = "QQHeaderScrollView";

    private ImageView mZoomView;
    private View mContentLayout;

    private int mInitHeaderView;
    private int mInitContentLayoutTopMargin;
    private int mHeaderMaxHeight;

    public void setViewId(@IdRes int zoomViewId, @IdRes int contentLayoutId) {
        mZoomView = findViewById(zoomViewId);
        mContentLayout = findViewById(contentLayoutId);

        FrameLayout.LayoutParams lp = (LayoutParams) mContentLayout.getLayoutParams();
        lp.topMargin = mInitContentLayoutTopMargin;
        mContentLayout.requestLayout();
    }


    public QQOverScrollView(@NonNull Context context) {
        super(context);
        init();
    }

    public QQOverScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public QQOverScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        Resources resources = getResources();
        mInitHeaderView = resources.getDimensionPixelOffset(R.dimen.qq_header_height);
        mHeaderMaxHeight = resources.getDimensionPixelOffset(R.dimen.qq_header_max_height);
        mInitContentLayoutTopMargin = resources.getDimensionPixelOffset(R.dimen.qq_content_margin_top);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        handlerEvent(ev);
        return super.onTouchEvent(ev);
    }

    private void handlerEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            Log.d(TAG, "handlerEvent: MotionEvent.ACTION_UP");
            if (mZoomView.getHeight() > mInitHeaderView) {
                SpringbackAnimation mSpringbackAnimation = new SpringbackAnimation(mInitHeaderView);
                mSpringbackAnimation.setInterpolator(new OvershootInterpolator());
                mSpringbackAnimation.setDuration(700);
                mZoomView.startAnimation(mSpringbackAnimation);
            }
        }
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
        super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
        Log.d(TAG, "onOverScrolled: scrollY = "+scrollY+" ; clampedY = "+clampedY);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY,
                                   int scrollX, int scrollY,
                                   int scrollRangeX, int scrollRangeY,
                                   int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        Log.d(TAG, "overScrollBy: deltaY = " + deltaY+"  ; scrollY = "+scrollY);

        if (mZoomView != null && deltaY < 0) {
            ViewGroup.LayoutParams lp = mZoomView.getLayoutParams();
            float maxDistance = mHeaderMaxHeight - mInitHeaderView;
            if (lp.height < mHeaderMaxHeight) {
                float offestY = (float) Math.abs(deltaY * 0.3);
                lp.height = (int) (mZoomView.getHeight() + offestY);
                mZoomView.requestLayout();

                int zoomViewHeight = mZoomView.getHeight();
                float ratio = (float) (zoomViewHeight - mInitHeaderView) / maxDistance;
                Log.d(TAG, "overScrollBy: zoomViewHeight = "+zoomViewHeight
                        +" ; mInitHeaderView = "+mInitHeaderView
                        +" ; ratio = "+ratio);
                //每次变化这么多  changeOffestY
                float totalOffsetY = maxDistance * 2 ;

                FrameLayout.LayoutParams content_lp = (LayoutParams) mContentLayout.getLayoutParams();
                content_lp.topMargin = (int) (mInitContentLayoutTopMargin + ratio * totalOffsetY);
                mContentLayout.requestLayout();
            }

        }
        return super.overScrollBy(deltaX, deltaY,
                scrollX, scrollY,
                scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }


    private class SpringbackAnimation extends Animation {

        private int currentHeight;
        private int diffHeight;

        public SpringbackAnimation(int targetHeight) {
            this.currentHeight = mZoomView.getHeight();
            this.diffHeight = mZoomView.getHeight() - targetHeight;
        }

        /**
         * @param interpolatedTime 0 -1
         * @param t
         */
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            Log.d(TAG, "applyTransformation: interpolatedTime = " + interpolatedTime);
            mZoomView.getLayoutParams().height = (int) (currentHeight - diffHeight * interpolatedTime);
            mZoomView.requestLayout();

            float maxDistance = mInitHeaderView / 3;
            int zoomViewHeight = mZoomView.getHeight();
            float ratio = (float) (zoomViewHeight - mInitHeaderView) / maxDistance;
            Log.d(TAG, "overScrollBy: zoomViewHeight = "+zoomViewHeight
                    +" ; mInitHeaderView = "+mInitHeaderView
                    +" ; ratio = "+ratio);
            //每次变化这么多  changeOffestY
            float totalOffsetY = maxDistance * 2 ;

            FrameLayout.LayoutParams content_lp = (LayoutParams) mContentLayout.getLayoutParams();
            content_lp.topMargin = (int) (mInitContentLayoutTopMargin + ratio * totalOffsetY);
            mContentLayout.requestLayout();
            super.applyTransformation(interpolatedTime, t);
        }
    }
}

如果您有更好的解决办法或者比较好的实现方式，恳请指教一下。同时也欢迎大家指出不足， 谢谢。

HopCoder
关注
专栏目录
ios-仿QQ下拉放大,还有上滑缩小.zip
07-11
github 地址 https://github.com/qianlishun/ScalableNav.git 还有些小瑕疵,自己去改吧... 动画参数根据个人喜好更改多次,可能对于一些图片不太合适 您可以根据自己的需要去QScalableNav中去设置自己的参数... 博客 itqls.com 欢迎学习交流
仿QQ空间头部下拉放大控件
smile_邝野的博客
07-29 805
看了QQ动脑学院关于Android课程后编写的，下面直接上干货： import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import androi...
仿QQ控件图片下拉放大效果
mengmaxiang2010的专栏
11-15 823
仿QQ控件图片下拉放大效果 预览前后效果 定义的常量值 CGFloat const XMImageW = 320; CGFloat const XMImageH = 320; CGFloat const XMInsetTop = 150; @interface XMViewController () @proper
仿QQ头部下拉放大效果,类似PullToZoomListview效果！
qq_29685423的博客
07-20 2415
listview
Android实现QQ空间图片下拉变大效果（ScrollView版，使用网络图片）
04-02
仿QQ空间顶部图片下拉放大，松手会弹效果。 使用Glide加载网络图片，使用ScrollView进行滚动 参考：https://blog.csdn.net/liuyonglei1314/article/details/73525489
带阻尼效果的scrollview，仿QQ空间
10-21
"带阻尼效果的scrollview，仿QQ空间"就是一个这样的案例，它涉及到移动应用开发中的滚动视图（ScrollView）设计，以及如何通过模拟真实物理世界的阻尼现象来提升用户体验。在此项目中，开发者修复了上一个版本的已知...
阻尼效果的scrollview，仿QQ空间
10-28
"阻尼效果的scrollview，仿QQ空间"是一个这样的项目，它旨在实现类似QQ空间滚动条的交互体验，其中包含了阻尼效果，使得滚动更加平滑且具有真实感。这种效果在用户滚动页面时，会模拟物理世界的摩擦力，让滚动速度...
自定义ScrollView，实现QQ空间阻尼下拉刷新和渐变菜单栏效果
10-09
Android UI设计之<十三>自定义ScrollView，实现QQ空间阻尼下拉刷新和渐变菜单栏效果，详http://blog.csdn.net/llew2011/article/details/52626148
安卓QQ相关相关-带阻尼效果的scrollview仿QQ空间.rar
07-29
然而，QQ空间等许多应用为了提供更好的用户体验，会在滚动时加入阻尼效果，即当用户停止滑动时，ScrollView会有一个缓慢减速的过程，使得滚动更加自然流畅。本文将详细介绍如何在Android中实现这种带阻尼效果的...
仿QQ下拉和上拉阻尼效果
09-12
仿QQ阻尼效果 ScrollView嵌套ListView
Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果（8）
09-02
主要介绍了Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
仿QQ空间下拉头像放大功能demo
01-18
仿QQ空间下拉头像放大功能demo，可直接运行
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
pullzoomview头部图片下拉缩放功能
08-13
NULL 博文链接：https://274137570-qq-com.iteye.com/blog/2302894
自定义scrollView实现顶部图片下拉放大
热门推荐
liujinhua的博客
03-28 1万+
自定义scrollView实现顶部图片下拉放大
Android打造QQ空间个性化可拉伸头部控件
hongxue8888的博客
01-30 1902
先来分析overScrollBy方法的使用,它是View的方法,参数有点多: /** * 当滑动的超出上,下,左,右最大范围时回调 * * @param deltaX x方向的瞬时偏移量,左边到头,向右拉为负,右边到头,向左拉为正 * @param deltaY y方向的瞬时偏移量,顶部到头,向下拉为负,底部到头,向上拉为正 * @param scro...
jQuery实现仿QQ列表下拉效果
JackieDYH的博客
04-24 463
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { l...
下拉图片变大
DJ *小智的博客
07-02 409
1.先看个效果图 下拉图片变大 .gif 2.开始简单的代码过程 其实思路很简单 就是 让tableView偏移 一图片的高度，然后在把图片添加到tableView中，然后再监听didScrollView，在里面改变图片的frame - (void)viewDidLoad { [super viewDidLoad]; // Do any
微信动态页面的图片下拉变大效果
qq_19276079的博客
09-22 3556
我在网上看了其他一些实现效果，不怎么完美，所以自己写了一个，第一次写，不清楚的话多包涵 先说说思想：self.imageView就是效果图中的图片，self.headerView是tableView中的头视图（ _tableView.tableHeaderView = _headerView; ）当tableView下滑的时候imageView加载在self.view上，当上滑的时
Android自定义ScrollView放大回弹效果实现教程
- 在`ACTION_MOVE`事件中，获取手指滑动的距离，根据滑动距离动态调整head_view的大小，实现放大效果。 - 当用户松开手指（`ACTION_UP`事件）时，恢复head_view的原始大小，完成回弹效果。 关键代码段包括： ```...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值