美文网首页
自定义View-仿QQ6.0侧滑效果

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

作者: cao苗子 | 来源:发表于2019-08-05 11:12 被阅读0次

    先看效果图:

    仿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 谢谢!

    相关文章

      网友评论

          本文标题:自定义View-仿QQ6.0侧滑效果

          本文链接:https://www.haomeiwen.com/subject/novpdctx.html