自定义View-仿酷狗 侧滑菜单效果

先看下效果图：

仿酷狗侧滑.gif

看到这个效果大家想想该怎么实现呢？？？？

我实现的思路是找一个可以滑动的系统控件，这样可以少写很多代码。我想到的是 HorizontalScrollView 。然后再里面添加一个LinearLayout 作为包含控件 mune_view和content_view。第一个是菜单栏，第二个主页。如果我们不做任何的处理，大家可以试试是什么结果，哈哈哈哈哈 结果就是 宽度不对 那怎么办呢？！！！

1.解决宽度问题：

 /**
     * 布局加载完毕
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //指定宽高 内容页面 的宽度为屏幕的宽度 菜单页面的宽度为 屏幕的宽度 减去 设定宽度
        //获取到的是LinearLayout
        ViewGroup container = (ViewGroup) getChildAt(0);
        int childCount = container.getChildCount();
        //限制用户只能加入两个布局 如果不是就抛出异常告诉用户
        if(childCount != 2){
            throw new RuntimeException("有且只能添加两个布局");
        }
        //第一步 设置宽高
        //获取菜单 布局
        mMenuView = container.getChildAt(0);
        ViewGroup.LayoutParams menuParams = mMenuView.getLayoutParams();
        menuParams.width = mMenuRightMargin;
        //7.0以上的手机必须设置这个
        mMenuView.setLayoutParams(menuParams);
        //获取内容布局
        mContentView = container.getChildAt(1);
        ViewGroup.LayoutParams contentViewParams = mContentView.getLayoutParams();
        contentViewParams.width = getScreenWidth();
        mContentView.setLayoutParams(contentViewParams);
        
        //默认是关闭的 但是设置没有用 ? 为什么呢 因为这句话是在 onLayout之前执行的 所以要放到 onLayout方法中
        scrollTo(mMenuRightMargin,0);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        //第二步 设置 滑动到主页
        scrollTo(mMenuRightMargin,0);
    }

scrollTo()

这个只能放在onLayout方法中才有效果。为什么要这样呢？因为HorizontalScrollView的布局是从左向右的，我们的主界面是在第二个，所以需要移动一段距离。好了，我们开始第二步。

2.对滑动进行监听 onTouchEvent

/**
     * 手指抬起的时候 要么打开 要么关闭
     * @param ev
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if(isIntercept){
            return true;
        }
        //设置滑动到手势上
        //在这里有一个问题 在下面的 up 事件中 也对菜单进行了打开关闭操作 所以某些时候会重复 需要做判断
        //快速滑动触发了 就不要再执行下面的方案了
        if(mGestureDetector.onTouchEvent(ev)){
            return true;
        }
        // 第三步 只需要监听抬起状态 根据滚动距离判断
        if(ev.getAction() == MotionEvent.ACTION_UP){
            float currentScrollX = getScrollX();
            if(currentScrollX > mMenuRightMargin / 2){
                //关闭
                closeMenu();
            }else {
                //打开
                openMenu();
            }
            //这里返回是为了保证了 super不执行 否则 smoothScrollTo() 没有效果
            return true;
        }
        return super.onTouchEvent(ev);
    }
/**
     * 打开菜单 也就是滚动到 0 的位置
     */
    public void openMenu(){
        //带动画 打开
        mMenuIsOpen = true;
        smoothScrollTo(0,0);
    }
    /**
     * 关闭菜单 也就是滚动到 mMenuRightMargin 的位置
     */
    public void closeMenu(){
        mMenuIsOpen = false;
        smoothScrollTo(mMenuRightMargin,0);
    }

3.对滚动缩放进行处理 onScrollChanged()

// 第四步 左右两边的缩放
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
//        Log.d("TAG","left="+l+" top="+t+" old-left="+oldl+" old-top="+oldt);
        //算一个比例
        float scale = 1f * l/mMenuRightMargin;
//        Log.d("TAG","scale = "+ scale);
        //右边缩放 最小是 0.7f  最大是 1f
        //缩放 1.0f->0.7f
        float rightScale = 0.7f + 0.3f * scale;

//        Log.d("TAG","rightScale = "+ rightScale);

        //设置右边的缩放 默认是中心点缩放
        // 设置缩放的中心点

        mContentView.setPivotX(0);
        mContentView.setPivotY(mContentView.getMeasuredHeight()/2);
        mContentView.setScaleX(rightScale);
        mContentView.setScaleY(rightScale);

        //左边菜单的缩放 和透明度
        //透明度是 半透明到全透明
        // 缩放 0.7f->1.0f
        float leftScale = 0.7f + 0.3f * (1-scale);
        mMenuView.setScaleX(leftScale);
        mMenuView.setScaleY(leftScale);

        //设置透明度
        float alphaScale = 0.5f + 0.5f * (1-scale);
        mMenuView.setAlpha(alphaScale);

        //最后一个 酷狗 音乐 地下的 退出 按钮一开始 是在右边 被覆盖的
        // 通过平移实现
        mMenuView.setTranslationX(0.4f*l);


    }

4.增加对快速滑动的监听 GestureDetector 的使用

private GestureDetector.OnGestureListener mGestureListener = new  GestureDetector.SimpleOnGestureListener() {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            //只要快速滑动 就会回调
            //所以我们只关注快速滑动 向右滑动的时候 打开 向左的时候关闭
            //快速往右滑动的时候 velocityX 是正数 往左滑动的时候 是负数
            if (mMenuIsOpen) {//已经打开
                //向右快速滑动 执行关闭
                if (velocityX < 0) {
                    closeMenu();
                    return true;
                }
            } else {//已经关闭
                //向左快速滑动 执行打开
                if (velocityX > 0) {
                    openMenu();
                    return true;
                }
            }
            return super.onFling(e1, e2, velocityX, velocityY);
        }
    };

5.事件拦截操作onInterceptTouchEvent（）

为什么要进行事件的拦截呢？因为当菜单打开的时候，用户点击主页面的时候要先关闭菜单，并且拦截 主页面的点击事件不被消费

/**
     * 处理事件拦截 当用户触摸右边部分的时候 应该先关闭菜单
     * @param ev
     * @return
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        isIntercept = false;
        if(mMenuIsOpen){
            float currentX = ev.getX();
            //触摸点 大于 菜单宽度
            if(currentX > mMenuRightMargin){
                //1. 关闭
                closeMenu();
                // 2. 子 view 不需要响应任何的触摸事件 也就是拦截子view的触摸事件 但是会响应自己的onTouch事件
                //所以要拦截自己的事件
                isIntercept = true;
                return true;
            }
        }
        return super.onInterceptTouchEvent(ev);
    }

到此就基本结束了，源码地址链接
https://github.com/panshimu/KGSlidingMenuLayout

如果有任何问题欢迎留言，我看到会回复的，谢谢！
欢迎添加QQ交流：362976241