简单抽屉式布局的实现

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;
    }

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);
    }

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();
    }

2.4 事件监听

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

初始化一个手势监听

//处理快速滑动事件
    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);
        }

    };
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;
            }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值