Android简易实战教程--第五十四话《视差特效》

查看更多进阶知识，可以关注我的公众号，微信搜索：Android小菜

这个简易实战教程系列专栏发现已经大半年没更新了啊，赶紧添点东西。

本文实现一个视差特效效果，动态效果如下：

代码十分简单，自定义View代码添加在下面：

public class ParallaxListView extends ListView {

    private static final String TAG = "ParallaxListView";
    private ImageView ParallaxHeaderImageView;//头部视视差效果的图片
    private int mOldHeight;//此时ImageView的高度
    private int mRealHeight;//图片的真正高度

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

    public ParallaxListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setHeadImageView(ImageView ivHeadImageView) {
        this.ParallaxHeaderImageView = ivHeadImageView;
        mOldHeight = ParallaxHeaderImageView.getMeasuredHeight();
//        int height = ParallaxHeaderImageView.getHeight();
//        Log.e(TAG,mOldHeight+"----"+height);//两个值一样
        mRealHeight = ParallaxHeaderImageView.getDrawable().getIntrinsicHeight();
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        System.out.println("deltaY: "+ deltaY + " scrollY: " + scrollY
                + " scrollRangeY: " + scrollRangeY
                + " maxOverScrollY: " + maxOverScrollY
                + " isTouchEvent: " + isTouchEvent);
        // deltaY : 竖直方向的瞬时偏移量, 顶部下拉- , 底部上拉+, 速度越快绝对值越大.
        // scrollY : 竖直方向ListView滚动的距离, 顶部- , 底部+
        // scrollRangeY : 竖直方向滚动距离
        // maxOverScrollY : 最大的超出滚动范围
        // isTouchEvent : 是否是手指触摸到顶部/底部. true触摸, false惯性
        if(deltaY <0 && isTouchEvent){
            int newHeight = ParallaxHeaderImageView.getHeight() + Math.abs(deltaY)/2;//减少拖动的距离
            setCurrentImageViewHeight(newHeight);
        }
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

    private void setCurrentImageViewHeight(int newHeight) {
        ParallaxHeaderImageView.getLayoutParams().height = newHeight;
        ParallaxHeaderImageView.requestLayout();
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
                case MotionEvent.ACTION_UP:
                    int startHeight = ParallaxHeaderImageView.getHeight();
                    ValueAnimator animator = ValueAnimator.ofInt(startHeight, mOldHeight);
                    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            // 500 毫秒内多次调用
                            // 0.0 -> 1.0
                            System.out.println("animation: " + animation.getAnimatedFraction());

                            // 模拟出来的中间值
                            Object animatedValue = animation.getAnimatedValue();
                            System.out.println("animation: " + animatedValue);

                            // 让新的高度生效
                            setCurrentImageViewHeight((Integer)animatedValue);
                        }
                    });
                    animator.setInterpolator(new OvershootInterpolator(4));
                    animator.setDuration(500);
                    animator.start();
                    break;

                default:
                    break;
         }
        return super.onTouchEvent(ev);
    }
}

代码解析：

通过setHeadImageView方法传入一头布局，然后拿到当前ImageView的高度和图片的真实高度（注意：真实高度和控件的高度是不一样的）。然后重写overScrollBy方法，这个方法会对ListView滑动到边缘时候做一些判断，具体的参数含义如下：

// deltaY : 竖直方向的瞬时偏移量, 顶部下拉- , 底部上拉+, 速度越快绝对值越大.
        // scrollY : 竖直方向ListView滚动的距离, 顶部- , 底部+
        // scrollRangeY : 竖直方向滚动距离
        // maxOverScrollY : 最大的超出滚动范围
        // isTouchEvent : 是否是手指触摸到顶部/底部. true触摸, false惯性

因为是在头部下拉，所以判断deltaY<0 且是触摸状态（非惯性滑动状态），才去处理事件。得到最新的ImageView的高度【因为手指下滑有一个滑动了多少的绝对值，类加后就是当前ImagView的当前高度】，并把最新的高度设置给ImageView。这样就实现了ImagView的放大效果了。

那么松开手要做的逻辑，肯定是放在onTouchEvent的UP事件里面了，主要做的工作就是，记录松开手时候ImagView的高度，使用属性动画把ImagView控件不断地缩小，这里还使用了插值器，让ImagView恢复原来高度值后有一个弹性效果。这样整个简易的自定义View就完成了。

扫描二维码关注公众号，回复： 3758751 查看本文章

然后看看客户端如何使用这个控件：

MainActivity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.itydl.a04.MainActivity">

    <com.itydl.a04.view.ParallaxListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

然后在onCreat方法中：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mListView = (ParallaxListView) findViewById(R.id.lv);
    mHeadView = View.inflate(this, R.layout.layout_head,null);
    mIvHead = (ImageView) mHeadView.findViewById(R.id.iv);
    mListView.addHeaderView(mHeadView);

    mIvHead.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            mListView.setHeadImageView(mIvHead);
            mIvHead.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }
    });

    mListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,Strings.NAMES));
}

拿到ListView的实例，给其设置数据进去。在试图绘制完毕的时候，把拿到的一张图片设置到刚才的自定义View中去了。然后运行后，就是开头的效果了。

最后可能会存在一点点的bug：

    if(deltaY <0 && isTouchEvent){
        int newHeight = ParallaxHeaderImageView.getHeight() + Math.abs(deltaY)/2;//减少拖动的距离
        if(newHeight <= mRealHeight){
            //只有在滑动的距离小于图片的真正高度的时候才去重新设置，超过了图片的高度就不去设置了。
            setCurrentImageViewHeight(newHeight);
        }
    }

超过图片的实际高度不应该再往下下拉设置高度给ImagView了吧。

如果觉得有点作用记得加个关注哈，要想看更高级的文章，欢迎关注微信公众号“Android小菜”

代码下载链接地址：源码下载

Android简易实战教程--第五十四话《视差特效》

猜你喜欢