双层布局 DoubleLayerLayout

前言

之前用过赶集生活 App，主界面向下滑动可以露出天气信息。效果不错。不仅充分的利用了空间，也给用户以发现的乐趣。所以，我也做了一个这样的布局。

效果图

思路

DoubleLayerLayout 继承自 RelativeLayout。正常情况下，foreground view 挡住 background view。滑动时，让 foreground 跟随手指移动，露出 background view。同时，关注手指移动的加速度，实现“猛地”一滑，foreground view 顺势滑开的效果。

参考链接

链接1

知识点

1. View 中几个比较重要的 hook 的调用顺序：
   onFinishInflate();
   onAttachedToWindow();
   onWindowVisiblityChanged();
   onMeasure();
   onSizeChanged();
   onLayout();
   onDraw();
2. 打算处理手势之前，触发一个cancelEvent

MotionEvent cancelEvent = MotionEvent.obtain(ev);  cancelEvent.setAction(MotionEvent.ACTION_CANCEL |                       (ev.getActionIndex()<< MotionEvent.ACTION_POINTER_INDEX_SHIFT));onTouchEvent(cancelEvent);

源码

package com.example.com.example.widget;import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.animation.AccelerateDecelerateInterpolator;import android.view.animation.Animation;import android.view.animation.Transformation;import android.widget.RelativeLayout;import android.widget.Scroller;public class DoubleLayerLayout extends RelativeLayout {    private static final int SNAP_VELOCITY_THRESHOLD = 600;    private static final int DURATION = 200;    private View bgView;    private View fgView;    private Scroller scroller;    private VelocityTracker velocityTracker;    private float lastY;    private int originalTop;    /**     * if totalDy > dyThreshold, show {@link #bgView}     */    private float dyThreshold;    public DoubleLayerLayout(Context context) {        super(context);        init();    }    public DoubleLayerLayout(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public DoubleLayerLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init(){        scroller = new Scroller(getContext());    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        bgView = getChildAt(0);        fgView = getChildAt(1);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        super.onLayout(changed, l, t, r, b);        originalTop = getTop();        dyThreshold = getHeight()*0.25f;    }    @Override    public boolean onTouchEvent(MotionEvent event) {//        return super.onTouchEvent(event);        if (super.onTouchEvent(event)) {            return true;        }        addVelocityTracker(event);        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                handleDownEvent(event);                break;            case MotionEvent.ACTION_MOVE:                handleMoveEvent(event);                break;            case MotionEvent.ACTION_UP:            case MotionEvent.ACTION_CANCEL:                handleUpEvent(event);                break;        }        return true;    }    private void handleDownEvent(MotionEvent ev) {        lastY = ev.getY();    }    private void handleMoveEvent(MotionEvent ev) {        // update the position of fgView        float currY = ev.getY();        float dy = currY - lastY;        lastY = currY;        fgView.layout(fgView.getLeft(), ((int) (fgView.getTop() + dy)), fgView.getRight(), ((int) (fgView.getTop() + getMeasuredHeight() + dy)));//        fgView.scrollBy(0, (int) -dy);    }    private void handleUpEvent(MotionEvent ev) {        float totalDy = fgView.getTop() - originalTop;        float snapVelocity = getYVelocity();        if ((totalDy < dyThreshold && snapVelocity < SNAP_VELOCITY_THRESHOLD) || snapVelocity < -SNAP_VELOCITY_THRESHOLD){            // reset//            fgView.layout(fgView.getLeft(), originalTop, fgView.getRight(), originalTop+getMeasuredHeight());            animateLayout(fgView, originalTop-fgView.getTop());        } else {            // show bgView//            fgView.layout(fgView.getLeft(), ((int) (originalTop + getMeasuredHeight() * 0.5f)), getRight(), ((int) (originalTop + getMeasuredHeight() * 1.5f)));            animateLayout(fgView, ((int) (originalTop + getMeasuredHeight() * 0.5f - fgView.getTop())));        }        recycleVelocityTracker();    }    private void animateLayout(View view, int dy){        Animation layoutAnimation = new LayoutAnimation(view, dy);        layoutAnimation.setDuration(DURATION);        layoutAnimation.setInterpolator(new AccelerateDecelerateInterpolator());        startAnimation(layoutAnimation);    }    private void addVelocityTracker(MotionEvent event) {        if (velocityTracker == null) {            velocityTracker = VelocityTracker.obtain();        }        velocityTracker.addMovement(event);    }    private void recycleVelocityTracker() {        if (velocityTracker != null) {            velocityTracker.recycle();            velocityTracker = null;        }    }    private int getYVelocity() {        velocityTracker.computeCurrentVelocity(1000);        int velocity = (int) velocityTracker.getYVelocity();        return velocity;    }    class LayoutAnimation extends Animation {        private View view;        private int dy;        private int t;        private int h;        private int l;        private int r;        public LayoutAnimation(View view, int dy) {            super();            this.view = view;            this.dy = dy;            t = view.getTop();            l = view.getLeft();            r = view.getRight();            h = view.getMeasuredHeight();        }        @Override        protected void applyTransformation(float interpolatedTime,                                           Transformation transformation) {            int dy = (int) (interpolatedTime * this.dy);            view.layout(l, t + dy, r, t + h + dy);        }    }}