自定义View-24.QQ6.0侧滑菜单效果

先看效果:

Gif_20180714_132828.gif

基于上一个酷狗侧滑菜单效果.修改

1 去掉内容页的缩放效果

2 内容页阴影效果

2.1 在内容页加一个半透明的View，利用 onScrollChanged 回调scale值给Activity,在Activity中给阴影设置 alpha

效果可以实现，但是站在架构的角度是不行的

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:text="主页内容"
        android:layout_height="wrap_content" />


    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#55000000"/>

</RelativeLayout>

2.2 阴影想办法放到自定义View里面

把内容布局单独提取出来，然后在外面套一层阴影，最后在把容器放回原来的位置

    @Override
    protected void onFinishInflate() {
        //这个方法是xml解析完毕调用
        super.onFinishInflate();
        //获取LinearLayout
        ViewGroup container = (ViewGroup) getChildAt(0);
        //获取menu
        mMenuView = container.getChildAt(0);
        //获取内容
        mContentView = container.getChildAt(1);
        
        //内容页阴影问题
        //把内容布局单独提取出来
        container.removeView(mContentView);
        // 然后在外面套一层阴影
        RelativeLayout contentContainer = new RelativeLayout(getContext());
        contentContainer.addView(mContentView);
        mShadowView = new View(getContext());
        mShadowView.setBackgroundColor(Color.parseColor("#55000000"));
        contentContainer.addView(mShadowView);
//       最后在把容器放回原来的位置
        container.addView(contentContainer);
        //默认是透明度为0
        mShadowView.setAlpha(0.0f);
        //指定内容也的宽度
        ViewGroup.LayoutParams contentLayoutParams = contentContainer.getLayoutParams();
        //内容的宽度 = 屏幕的宽度
        contentLayoutParams.width = DimenUtils.getScreenWidth(getContext());
        contentContainer.setLayoutParams(contentLayoutParams);
    }

在滑动的是透明度变化

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        // 打开 Menu l == mMenuWidth --> 0
        // 所以 scale == 0 --> 1.0
        double scale = 1 - l * 1.0 / mMenuWidth;

        //内容页的阴影,透明度变化 0 ->1
        mShadowView.setAlpha((float) scale);
}

完成的效果:

Gif_20180714_140033.gif

完整源码:qqslidingmenu