自定義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);
            }
        });