搞定 Android 布局2：SlidingPaneLayout 侧滑菜单面板布局

1 开始使用

compile 'com.android.support:support-v4:25.3.1'

• android:layout_width="100dp" 展开状态

android:layout_width="100dp" 展开状态

android:layout_width="match_parent" 展开状态



    

    

android:layout_width="match_parent" 展开状态

因为SlidingPaneLayout的属性mOverhangSize的值是32，就是左菜单离右边屏幕边缘的距离

2 常规侧滑

• 设置一个整体背景 在SlidingPaneLayout 上
• 针对标题栏可以自行修改相关逻辑

• 去掉SlidingPaneLayout 侧滑渐变色

  SlidingPaneLayout id_spl = (SlidingPaneLayout) findViewById(R.id.id_spl);
   id_spl.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色

1.png

3 类似QQ5.x侧滑

• 针对2区别就是 新增一个PanelSlideListener 处理侧滑时候的各个view
• 针对标题栏可以自行修改相关逻辑

  SlidingPaneLayout id_spl = (SlidingPaneLayout) findViewById(R.id.id_spl);
        id_spl.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色
        final View leftView = id_spl.getChildAt(0);
        id_spl.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                        //
                        leftView.setPivotX(-leftView.getWidth() / 5.0f);
                        leftView.setPivotY(leftView.getHeight() / 2.0f);
                        leftView.setScaleX(0.8f + 0.2f * slideOffset);//0.8~1
                        leftView.setScaleY(0.8f + 0.2f * slideOffset);//0.8~1
                        leftView.setAlpha(0.8f + 0.2f * slideOffset);//0.8~1
                        //
                        panel.setScaleX(1 - 0.2f * slideOffset);//1~0.8
                        panel.setScaleY(1 - 0.2f * slideOffset);//1~0.8
                        panel.setAlpha(1 - 0.2f * slideOffset);//1~0.8
               
            }

            @Override
            public void onPanelOpened(View panel) {

            }

            @Override
            public void onPanelClosed(View panel) {

            }
        });

2.png

4 类似QQ6.x侧滑

• 针对 3 区别就是修改监听处理view的逻辑
• 针对标题栏可以自行修改相关逻辑

           @Override
            public void onPanelSlide(View panel, float slideOffset) {
                     leftView.setTranslationX((slideOffset - 1) * leftView.getWidth());  //-w~0
                     panel.setAlpha(1 - 0.2f * slideOffset);//1~0.8
            }

3.png

5 侧滑结束Aty

• 代码动态生成SlidingPaneLayout

• 利用反射去掉边缘距离

• 设置Main2Aty背景透明主题AppThemeTransparent

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        //创建SlidingPaneLayout
        SlidingPaneLayout mSlidingPaneLayout = new SlidingPaneLayout(this);
        try {
            //mOverhangSize属性，就是左菜单离右边屏幕边缘的距离
            Field mOverhangSize = SlidingPaneLayout.class.getDeclaredField("mOverhangSize");
            mOverhangSize.setAccessible(true);
            //设置左菜单离右边屏幕边缘的距离为0，设置全屏
            mOverhangSize.set(mSlidingPaneLayout, 0);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        mSlidingPaneLayout.setSliderFadeColor(Color.TRANSPARENT);//设置面板的侧滑渐变色
         mSlidingPaneLayout.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {

            }

            @Override
            public void onPanelOpened(View panel) {
                //菜单打开后，我们结束掉这个Activity
                finish();
                overridePendingTransition(0, 0);
            }

            @Override
            public void onPanelClosed(View panel) {

            }
        });
        //创建左侧视图
        View leftView = new View(this);
        //设置全屏
        leftView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        //添加到SlidingPaneLayout中
        mSlidingPaneLayout.addView(leftView, 0);


        // 得到右侧的内容视图
        ViewGroup decorView = (ViewGroup) getWindow().getDecorView();//decorView 是一个Fragment
        ViewGroup childView = (ViewGroup) decorView.getChildAt(0);//decorView子view只有一个  是一个LinearLayout
        ViewGroup contentView = (ViewGroup) decorView.findViewById(android.R.id.content);//是一个Fragment 包裹xml布局
        View contentViewRootLayout = contentView.getChildAt(0);//是xml里面定义的根布局
        //先移除contentView
        decorView.removeView(childView);
        // 添加 mSlidingPaneLayout
        decorView.addView(mSlidingPaneLayout);


       // childView.setBackgroundColor(Color.TRANSPARENT);
        // 为 mSlidingPaneLayout 添加childView
        mSlidingPaneLayout.addView(childView, 1);


    }
}