简单抽屉式布局的实现

1. 效果图

2. 实现思路

2.1 设置阴影

阴影布局可以设置成占据全屏，而内容布局让用户去自定义大小

//阴影的view 我们直接创建添加，在onFinishInflate之前，这样会先添加我们的view
private void initLayout() {
        mShadeView = new View(getContext());
        mShadeView.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        //color是可以给layout设置自定义属性去设置的
        mShadeView.setBackgroundColor(getResources().getColor(R.color.color_808A87, null));
        addView(mShadeView);

		//获取真实屏幕的高度以px为单位
        WindowManager manager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);//获取WM对象
        DisplayMetrics dm = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(dm);
        heightPixels = dm.heightPixels;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 拿到用户的布局

这里我们只允许用户添加一个子view

 @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //==2是因为我们添加了一个自己的阴影view
        if (getChildCount() != 2) {
            throw new IllegalArgumentException("仅支持1个子view");
        }
        //获得第二个子view
        mRealContentView = getChildAt(1);
        marginLayoutParams = (MarginLayoutParams) mRealContentView.getLayoutParams();

        //默认在屏幕外
        marginLayoutParams.bottomMargin = -heightPixels;
        mRealContentView.setLayoutParams(marginLayoutParams);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.3 添加动画效果

我们需要在调用了setVisibility（GONE）时去执行动画，因此需要重写这个方法

@Override
    public void setVisibility(int visibility) {
        if (visibility == VISIBLE) {
            super.setVisibility(visibility);
            showAnimation(-heightPixels);
        } else {
            hideAnimation(visibility, 0);
        }
    }

    //隐藏动画，执行完之后设置隐藏
    private void hideAnimation(int visibility, int dy) {
        if (isAnimation) return;
        hideAnimator = ValueAnimator.ofInt(dy, -heightPixels);
        hideAnimator.setDuration(300);

        hideAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                marginLayoutParams.bottomMargin = (int) animation.getAnimatedValue();
                mRealContentView.setLayoutParams(marginLayoutParams);
            }
        });

        hideAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimation = false;
                SlideUpLayout.super.setVisibility(visibility);
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                isAnimation = false;
            }

            @Override
            public void onAnimationStart(Animator animation) {
                isAnimation = true;
            }
        });

        hideAnimator.start();
    }

    //显示动画
    private void showAnimation(int dy) {
        if (isAnimation) return;
        showAnimator = ValueAnimator.ofInt(dy, 0);
        showAnimator.setDuration(300);

        showAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                marginLayoutParams.bottomMargin = (int) animation.getAnimatedValue();
                mRealContentView.setLayoutParams(marginLayoutParams);
            }
        });

        showAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                isAnimation = false;
            }

            @Override
            public void onAnimationStart(Animator animation) {
                isAnimation = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isAnimation = false;
            }
        });
        showAnimator.start();
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

2.4 事件监听

//阴影添加后界面消失
mShadeView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                SlideUpLayout.this.setVisibility(GONE);
            }
        });
1
2
3
4
5
6
7

初始化一个手势监听

//处理快速滑动事件
    private GestureDetector.SimpleOnGestureListener listener = new GestureDetector.SimpleOnGestureListener() {

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            Log.d("debugt", "velocityY = " + velocityY + ",velocityX = " + velocityX);
            //e1是down事件，e2是最后一个move <0 代表向下
            if (e1.getRawY() - e2.getRawY() < 0 && Math.abs(velocityY) > 400) {
                hideAnimation(GONE, (int) -mDeltaY);
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }

    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

mRealContentView.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
            	//传递手势事件
                gestureDetector.onTouchEvent(event);
                //velocityTracker.addMovement(event);

                //处理普通滑动事件
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mDownY = event.getRawY();
                        break;
                    case MotionEvent.ACTION_MOVE:
                        mDeltaY = event.getRawY() - mDownY;
                        if (mDeltaY > 0) {
                            marginLayoutParams.bottomMargin = (int) -mDeltaY;
                            mRealContentView.setLayoutParams(marginLayoutParams);
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                        //计算滑动速度
                        /**velocityTracker.computeCurrentVelocity(500);//计算速度
                         float xVelocity = velocityTracker.getXVelocity();
                         float yVelocity = velocityTracker.getYVelocity();
                         Log.e("debugt","&&&-->x = "+xVelocity+"---> y = "+yVelocity);*/
                        mDeltaY = event.getRawY() - mDownY;
                        if (mDeltaY < 0) break;
                        int height = mRealContentView.getMeasuredHeight();
                        if (mDeltaY > height / 2.0f) {
                            hideAnimation(GONE, (int) -mDeltaY);
                        } else {
                            showAnimation((int) -mDeltaY);
                        }
                        break;
                }
                return true;
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38