自定义view实战笔记--视差特效

视差特效

先要设置imageview的scaleType属性为centerCrop

动态的改变一个控件的宽高可以在属性动画中不断修改布局参数的值,然后调用该控件的iv_header.requestLayout();方法

// 把当前的头布局的高度currentHeight恢复到初始高度orignalHeight
            final int currentHeight = iv_header.getHeight();

            // 300 -> 160
            ValueAnimator animator = ValueAnimator.ofInt(currentHeight, orignalHeight);
            // 动画更新的监听
            animator.addUpdateListener(new AnimatorUpdateListener() {

                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    // 0.0 -> 1.0
                    // 获取动画执行过程中的分度值
                    float fraction = animation.getAnimatedFraction();
//                  Integer evaluate = evaluate(fraction, currentHeight, orignalHeight);

                    // 获取中间的值
                    Integer animatedValue = (Integer) animation.getAnimatedValue();
                    System.out.println("fraction: " + fraction + " animatedValue: " + animatedValue);

                    // evaluate == animatedValue

                    // 让新的高度值生效
                    iv_header.getLayoutParams().height = animatedValue;
                    iv_header.requestLayout();

                }
            });
            animator.setInterpolator(new OvershootInterpolator(2));
            animator.setDuration(500);
            animator.start();

/**
     * 滑动到ListView两端才会被调用
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
            int scrollY, int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        // deltaY 竖直方向滑动的瞬时变化量, 顶部下拉为- , 底部上拉为+
        // scrollY 竖直方向的滑动超出的距离, 顶部为-, 底部为+
        // scrollRangeY 竖直方向滑动的范围
        // maxOverScrollY 竖直方向最大的滑动位置
        // isTouchEvent 是否是用户触摸拉动 , true表示用户手指触摸拉动, false 是惯性

        System.out.println("deltaY: " + deltaY + " scrollY: " + scrollY
                + " scrollRangeY: " + scrollRangeY + " maxOverScrollY: " + maxOverScrollY
                + " isTouchEvent: " + isTouchEvent);

        // 顶部下拉, 用户触摸操作
        if(deltaY < 0 && isTouchEvent){
            // deltaY的绝对值, 累加给Header
            int newHeight = iv_header.getHeight() + Math.abs(deltaY / 3);
            if(newHeight <= drawableHeight){
                System.out.println("newHeight: " + newHeight);
                // 让新的值生效
                iv_header.getLayoutParams().height = newHeight;
                iv_header.requestLayout();
            }

        }

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

注意点:可以用以下代码在activity的onCreate()方法中获取控件的宽高,但要注意,在在获取完毕之后要移除监听,否则会被反复调用赋值

ivHeader.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                // 图片的原始高度
                drawableHeight = ivHeader.getDrawable().getIntrinsicHeight();
                //Imageview的初始高度,用来做动画
                originalHeight = ivHeader.getHeight();
                ivHeader.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });