slidingmenu实现最新版QQ侧滑模式

于沉浸式

什么是沉浸式？意思就是状态栏的背景我们可以进行设置，使其和我们的app风格相一致。 
具体实现可以参考hongyang大神的文章:http://blog.csdn.net/lmj623565791/article/details/48649563

关于slidingmenu

这是一个很著名的实现侧滑菜单的库。github地址:https://github.com/jfeinstein10/SlidingMenu

使slidingmenu实现沉浸式

当我们使用slidingmenu的情况下，如果slidingmenu的顶部和沉浸式状态栏的颜色不一致，那么会使侧滑显得十分丑陋。我们想要的是使slidingmenu也能够沉浸入状态栏，使slidingmenu的滑动也能在状态栏中实现。类似于qq、知乎中滑动菜单的效果。

我们知道，沉浸式的状态栏的实现，实际上是使系统状态栏为背景为透明，然后在其区域添加一个view(该view的显示由我们自己定义)，这样就能在状态栏添加上我们想要的背景。对于slidingmenu，其内部是使用ViewAbove和ViewBehind来分代表主页面视图和菜单视图，分别对应menu.getContent()，menu.getMenu（）。

由以上两点，我们就可以实现lidingmenu该怎样实现沉浸式了。将系统状态栏颜色置为透明，在菜单和主页面视图顶部加入一个占位的view，菜单中为透明主页面中为主题色，设置该view的高度或者paddingTop为状态栏高度。这样就能使slidingmenu实现沉浸式了。

代码

acvitiy中的相关代码

<code class="language-java hljs  has-numbering" style="margin: 8px 0px; display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-color: transparent; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>.onCreate(savedInstanceState);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里使用的是slidingmenu的第三种用法。</span>
        setContentView(R.layout.slidingmenu_main);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//初始化菜单</span>
        initMenu();
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//使状态栏为透明</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//顶部状态栏为透明</span>
            getWindow().addFlags(
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里是使用一个fragment作为菜单</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initMenu</span>() {
        mMenuFragment = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> MenuFragment();

        View view = getLayoutInflater().inflate(R.layout.menu_frame, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">null</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);
        getSupportFragmentManager().beginTransaction().replace(R.id.fl_menu_frame, mMenuFragment).commit();

        mMenu = (SlidingMenu) findViewById(R.id.slidingmenu);
        mMenu.setMode(SlidingMenu.LEFT);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置触摸屏幕的模式</span>
        mMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取屏幕宽高</span>
        DisplayMetrics dm = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置滑动菜单视图的宽度</span>
        mMenu.setBehindWidth(dm.widthPixels * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span> / <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置渐入渐出效果的值</span>
        mMenu.setFadeDegree(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.35</span>f);
        mMenu.setMenu(view);
    }</code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">1</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">2</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">3</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">4</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">5</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">6</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">7</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">8</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">9</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">10</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">11</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">12</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">13</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">14</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">15</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">16</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">17</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">18</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">19</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">20</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">21</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">22</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">23</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">24</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">25</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">26</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">27</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">28</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">29</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">30</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">31</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">32</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">33</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">34</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">35</li></ul>

slidingmenu_main的代码.SlidingMenu的sliding:viewAbove里就是你真正的使用的布局xml

<code class="language-java hljs  has-numbering" style="margin: 8px 0px; display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><RelativeLayout 
    xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>
    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/id_main_ly"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>>

    <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu 
        xmlns:sliding=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span>
        android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/slidingmenulayout"</span>
        android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
        android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
        sliding:viewAbove=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@layout/activity_main"</span> />
</RelativeLayout></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">1</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">2</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">3</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">4</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">5</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">6</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">7</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">8</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">9</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">10</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">11</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">12</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">13</li></ul>

activity_main的布局

<code class="hljs xml has-numbering" style="margin: 8px 0px; display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-color: transparent; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">LinearLayout</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:tools</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/tools"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:color/holo_blue_light"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">tools:context</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">".MainActivity"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">View
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/stras_padding"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0dp"</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:color/holo_blue_dark"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">LinearLayout</span>></span></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">1</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">2</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">3</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">4</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">5</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">6</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">7</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">8</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">9</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">10</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">11</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">12</li></ul>

由于设置为透明后，activity和slidingmenu中的内容会顶到菜单栏，所以需要手动设置一个透明的高度将内容重新顶回状态栏下方

<code class="language-java hljs  has-numbering" style="margin: 8px 0px; display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-color: transparent; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取状态栏高度</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> height=UIUtils.getStatusBarHeight(getActivity());
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取activity和menu中的占位view。两者代码一致</span>
        View v=view.findViewById(R.id.stras_padding);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置占位view的高度为状态栏高度</span>
        LinearLayout.LayoutParams params=<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,height);
        v.setLayoutParams(params);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//或者可以设置padding</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//v.setPadding(0,height,0,0);</span></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">1</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">2</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">3</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">4</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">5</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">6</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">7</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">8</li><li style="margin: 0px; box-sizing: border-box; padding: 0px 5px;">9</li></ul>

最终效果