自定义View-仿QQ6.0侧滑效果

2019-08-05  本文已影响0人  cao苗子

先看效果图:

仿QQ6.0侧滑.gif

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();
        //先暂时移除
        container.removeView(mContentView);
        //然后在外面套一层 阴影层
        RelativeLayout contentContainer = new RelativeLayout(getContext());
        contentContainer.addView(mContentView);

        mShowView = new View(getContext());
        //半透明
        mShowView.setBackgroundColor(Color.parseColor("#55000000"));
        //设置透明度为 0
        mShowView.setAlpha(0.0f);
        contentContainer.addView(mShowView);

        contentViewParams.width = getScreenWidth();
        contentContainer.setLayoutParams(contentViewParams);

        //放回原来的位置
        container.addView(contentContainer);
        
        //默认是关闭的 但是设置没有用 ? 为什么呢 因为这句话是在 onLayout之前执行的 所以要放到 onLayout方法中
//        scrollTo(mMenuRightMargin,0);
    }

2.更改滑动监听 onScrollChanged

@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        Log.d("TAG","left="+l +" mMenuRightMargin="+mMenuRightMargin);

        //算一个比例
        float scale = (float) l/mMenuRightMargin;

        //设置慢慢变半透明
        mShowView.setAlpha(1-scale);

        mContentView.setTranslationX(scale);

        mMenuView.setAlpha(1-scale);

        // 退出 按钮一开始 是在右边 被覆盖的
        // 通过平移实现
        mMenuView.setTranslationX(0.6f * l);

    }

3.源码地址如下

https://github.com/panshimu/QQSlidingMenuLayout

有问题随时留言。QQ 362976241 谢谢!

上一篇下一篇

猜你喜欢

热点阅读