转载出处：http://blog.csdn.net/lmj623565791/article/details/41531475

1、概述

之前写了一个Android 高仿 QQ5.0 侧滑菜单效果自定义控件来袭，恰逢QQ5.2又加了一个右侧菜单，刚好看了下DrawerLayout，一方面官方的东西，我都比较感兴趣；另一方面，这玩意用起来的确方便，于是简单写了个demo，高仿QQ5.2双向侧滑，分享给大家。

首先看看效果图：

DrawerLayout用起来真的很方便，下面一起看看用法~

2、DrawerLayout的使用

直接将DrawerLayout作为根布局，然后其内部第一个View为内容区域，第二个View为左侧菜单，第三个View为右侧侧滑菜单，当前第三个是可选的。

第一个View的宽高应当设置为match_parent，当然了，这也理所当然。

第二、三个View需要设置android:layout_gravity=”left”，和android:layout_gravity=”right”且一搬高度设置为match_parent，宽度为固定值，即侧滑菜单的宽度。

按照上面的描述写个布局文件，然后设置给Activity就添加好了左右侧滑了，是不是很简单~~~

比如我们的布局文件：

**[html]** [view plain](http://blog.csdn.net/lmj623565791/article/details/41531475#)[copy](http://blog.csdn.net/lmj623565791/article/details/41531475#)

  <div>
    <embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1">
    </embed>
  </div>
</div>

- <span class="tag"><</span><span class="tag-name">android.support.v4.widget.DrawerLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">&#8220;http://schemas.android.com/tools&#8221;</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/id_drawerLayout&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/img_frame_background&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/qq&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">Button</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;40dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;30dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;10dp&#8221;</span>

- <span class="attribute">android:layout_alignParentRight</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;@drawable/youce&#8221;</span>

- <span class="attribute">android:onClick</span>=<span class="attribute-value">&#8220;OpenRightMenu&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">fragment</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/id_left_menu&#8221;</span>

- <span class="attribute">android:name</span>=<span class="attribute-value">&#8220;com.zhy.demo_zhy_17_drawerlayout.MenuLeftFragment&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;200dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;left&#8221;</span>

- <span class="attribute">android:tag</span>=<span class="attribute-value">&#8220;LEFT&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">fragment</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/id_right_menu&#8221;</span>

- <span class="attribute">android:name</span>=<span class="attribute-value">&#8220;com.zhy.demo_zhy_17_drawerlayout.MenuRightFragment&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;100dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;right&#8221;</span>

- <span class="attribute">android:tag</span>=<span class="attribute-value">&#8220;RIGHT&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"></</span><span class="tag-name">android.support.v4.widget.DrawerLayout</span><span class="tag">></span>

这里我们的主内容区域为RelativeLayout

菜单用的两个Fragment，左侧为200dp，右侧为100dp；

好了，看了我们的布局文件，接下来看下我们的详细代码。

3、代码是最好的老师

1、MenuLeftFragment

**[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/41531475#)[copy](http://blog.csdn.net/lmj623565791/article/details/41531475#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/534306)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/534306/fork)

  <div>
    <embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_2">
    </embed>
  </div>
</div>

- <span class="keyword">package</span> com.zhy.demo_zhy_17_drawerlayout;

- 
- <span class="keyword">import</span> android.os.Bundle;

- <span class="keyword">import</span> android.support.v4.app.Fragment;

- <span class="keyword">import</span> android.view.LayoutInflater;

- <span class="keyword">import</span> android.view.View;

- <span class="keyword">import</span> android.view.ViewGroup;

- 
- <span class="keyword">public</span> <span class="keyword">class</span> MenuLeftFragment <span class="keyword">extends</span> Fragment

- {

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> View onCreateView(LayoutInflater inflater, ViewGroup container,

- Bundle savedInstanceState)

- {

- <span class="keyword">return</span> inflater.inflate(R.layout.layout_menu, container, <span class="keyword">false</span>);

- }

- }

对应的布局文件：

**[html]** [view plain](http://blog.csdn.net/lmj623565791/article/details/41531475#)[copy](http://blog.csdn.net/lmj623565791/article/details/41531475#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/534306)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/534306/fork)

  <div>
    <embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_3">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">RelativeLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:background</span>=<span class="attribute-value">&#8220;#00000000&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/one&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/img_1&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_toRightOf</span>=<span class="attribute-value">&#8220;@id/one&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;第1个Item&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#f0f0f0&#8221;</span>

- <span class="attribute">android:textSize</span>=<span class="attribute-value">&#8220;20sp&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/two&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/img_2&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_toRightOf</span>=<span class="attribute-value">&#8220;@id/two&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;第2个Item&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#f0f0f0&#8221;</span>

- <span class="attribute">android:textSize</span>=<span class="attribute-value">&#8220;20sp&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/three&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/img_3&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_toRightOf</span>=<span class="attribute-value">&#8220;@id/three&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;第3个Item&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#f0f0f0&#8221;</span>

- <span class="attribute">android:textSize</span>=<span class="attribute-value">&#8220;20sp&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/four&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/img_4&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_toRightOf</span>=<span class="attribute-value">&#8220;@id/four&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;第4个Item&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#f0f0f0&#8221;</span>

- <span class="attribute">android:textSize</span>=<span class="attribute-value">&#8220;20sp&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">RelativeLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:id</span>=<span class="attribute-value">&#8220;@+id/five&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;50dp&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_marginTop</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/img_5&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_marginLeft</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:layout_toRightOf</span>=<span class="attribute-value">&#8220;@id/five&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;第5个Item&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#f0f0f0&#8221;</span>

- <span class="attribute">android:textSize</span>=<span class="attribute-value">&#8220;20sp&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"></</span><span class="tag-name">RelativeLayout</span><span class="tag">></span>

其实就是堆出来的布局~~没撒意思~

2、MenuRightFragment

  <div>
    <embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_4">
    </embed>
  </div>
</div>

- <span class="keyword">package</span> com.zhy.demo_zhy_17_drawerlayout;

- 
- <span class="keyword">import</span> android.os.Bundle;

- <span class="keyword">import</span> android.support.v4.app.Fragment;

- <span class="keyword">import</span> android.view.LayoutInflater;

- <span class="keyword">import</span> android.view.View;

- <span class="keyword">import</span> android.view.ViewGroup;

- 
- <span class="keyword">public</span> <span class="keyword">class</span> MenuRightFragment <span class="keyword">extends</span> Fragment

- {

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> View onCreateView(LayoutInflater inflater, ViewGroup container,

- Bundle savedInstanceState)

- {

- <span class="keyword">return</span> inflater.inflate(R.layout.menu_layout_right, container, <span class="keyword">false</span>);

- }

- }

对应布局文件：

  <div>
    <embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_5">
    </embed>
  </div>
</div>

- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">&#8220;1.0&#8221;</span> <span class="attribute">encoding</span>=<span class="attribute-value">&#8220;utf-8&#8221;</span><span class="tag">?></span>

- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">&#8220;http://schemas.android.com/apk/res/android&#8221;</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center_vertical&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_vertical&#8221;</span>

- <span class="attribute">android:layout_marginBottom</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/wode&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;扫一扫&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#ffffff&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_vertical&#8221;</span>

- <span class="attribute">android:layout_marginBottom</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/saoma&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;讨论组&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#ffffff&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_vertical&#8221;</span>

- <span class="attribute">android:layout_marginBottom</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/wode&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;扫一扫&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#ffffff&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;match_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:layout_centerVertical</span>=<span class="attribute-value">&#8220;true&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center_vertical&#8221;</span>

- <span class="attribute">android:layout_marginBottom</span>=<span class="attribute-value">&#8220;20dp&#8221;</span>

- <span class="attribute">android:orientation</span>=<span class="attribute-value">&#8220;vertical&#8221;</span> <span class="tag">></span>

- 
- <span class="tag"><</span><span class="tag-name">ImageView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;60dp&#8221;</span>

- <span class="attribute">android:layout_gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:src</span>=<span class="attribute-value">&#8220;@drawable/saoma&#8221;</span> <span class="tag">/></span>

- 
- <span class="tag"><</span><span class="tag-name">TextView</span>

- <span class="attribute">android:layout_width</span>=<span class="attribute-value">&#8220;fill_parent&#8221;</span>

- <span class="attribute">android:layout_height</span>=<span class="attribute-value">&#8220;wrap_content&#8221;</span>

- <span class="attribute">android:gravity</span>=<span class="attribute-value">&#8220;center&#8221;</span>

- <span class="attribute">android:text</span>=<span class="attribute-value">&#8220;讨论组&#8221;</span>

- <span class="attribute">android:textColor</span>=<span class="attribute-value">&#8220;#ffffff&#8221;</span> <span class="tag">/></span>

- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

- 
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>

依旧很简单，除了图标比较难找以外~~

3、MainActivity

MainActivity的布局文件已经贴过了~~

  <div>
    <embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_6">
    </embed>
  </div>
</div>

- <span class="keyword">package</span> com.zhy.demo_zhy_17_drawerlayout;

- 
- <span class="keyword">import</span> android.os.Bundle;

- <span class="keyword">import</span> android.support.v4.app.FragmentActivity;

- <span class="keyword">import</span> android.support.v4.widget.DrawerLayout;

- <span class="keyword">import</span> android.support.v4.widget.DrawerLayout.DrawerListener;

- <span class="keyword">import</span> android.view.Gravity;

- <span class="keyword">import</span> android.view.View;

- <span class="keyword">import</span> android.view.Window;

- 
- <span class="keyword">import</span> com.nineoldandroids.view.ViewHelper;

- 
- <span class="keyword">public</span> <span class="keyword">class</span> MainActivity <span class="keyword">extends</span> FragmentActivity

- {

- 
- <span class="keyword">private</span> DrawerLayout mDrawerLayout;

- 
- <span class="annotation">@Override</span>

- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState)

- {

- <span class="keyword">super</span>.onCreate(savedInstanceState);

- requestWindowFeature(Window.FEATURE_NO_TITLE);

- setContentView(R.layout.activity_main);

- 
- initView();

- initEvents();

- 
- }

- 
- <span class="keyword">public</span> <span class="keyword">void</span> OpenRightMenu(View view)

- {

- mDrawerLayout.openDrawer(Gravity.RIGHT);

- mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,

- Gravity.RIGHT);

- }

- 
- <span class="keyword">private</span> <span class="keyword">void</span> initEvents()

- {

- mDrawerLayout.setDrawerListener(<span class="keyword">new</span> DrawerListener()

- {

- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onDrawerStateChanged(<span class="keyword">int</span> newState)

- {

- }

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onDrawerSlide(View drawerView, <span class="keyword">float</span> slideOffset)

- {

- View mContent = mDrawerLayout.getChildAt(<span class="number"></span>);

- View mMenu = drawerView;

- <span class="keyword">float</span> scale = <span class="number">1</span> &#8211; slideOffset;

- <span class="keyword">float</span> rightScale = <span class="number"></span>.8f + scale * <span class="number"></span>.2f;

- 
- <span class="keyword">if</span> (drawerView.getTag().equals(<span class="string">&#8220;LEFT&#8221;</span>))

- {

- 
- <span class="keyword">float</span> leftScale = <span class="number">1</span> &#8211; <span class="number"></span>.3f * scale;

- 
- ViewHelper.setScaleX(mMenu, leftScale);

- ViewHelper.setScaleY(mMenu, leftScale);

- ViewHelper.setAlpha(mMenu, <span class="number"></span>.6f + <span class="number"></span>.4f * (<span class="number">1</span> &#8211; scale));

- ViewHelper.setTranslationX(mContent,

- mMenu.getMeasuredWidth() * (<span class="number">1</span> &#8211; scale));

- ViewHelper.setPivotX(mContent, <span class="number"></span>);

- ViewHelper.setPivotY(mContent,

- mContent.getMeasuredHeight() / <span class="number">2</span>);

- mContent.invalidate();

- ViewHelper.setScaleX(mContent, rightScale);

- ViewHelper.setScaleY(mContent, rightScale);

- } <span class="keyword">else</span>

- {

- ViewHelper.setTranslationX(mContent,

- -mMenu.getMeasuredWidth() * slideOffset);

- ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());

- ViewHelper.setPivotY(mContent,

- mContent.getMeasuredHeight() / <span class="number">2</span>);

- mContent.invalidate();

- ViewHelper.setScaleX(mContent, rightScale);

- ViewHelper.setScaleY(mContent, rightScale);

- }

- 
- }

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onDrawerOpened(View drawerView)

- {

- }

- 
- <span class="annotation">@Override</span>

- <span class="keyword">public</span> <span class="keyword">void</span> onDrawerClosed(View drawerView)

- {

- mDrawerLayout.setDrawerLockMode(

- DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);

- }

- });

- }

- 
- <span class="keyword">private</span> <span class="keyword">void</span> initView()

- {

- mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);

- mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,

- Gravity.RIGHT);

- }

- 
- }

嗯，代码基本没什么注释~~维撒呢？是因为的确没什么好注释的。

提几点：

1、为了模拟QQ的右侧菜单需要点击才能出现，所以在初始化DrawerLayout的时候，使用了mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT);意思是只有编程才能将其弹出。

然后在弹出以后，需要让手势可以滑动回去，所以在OpenRightMenu中又编写了：

mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.RIGHT); UNLOCK了一下。

最后在onDrawerClosed回调中，继续设置mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT)；

2、动画效果

动画用了nineoldandroids，关于动画各种偏移量、缩放比例的计算请参考Android 高仿 QQ5.0 侧滑菜单效果自定义控件来袭基本是一致的，唯一的不同的地方，给Content设置了ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 – scale));让Content在菜单的右侧，默认情况下Menu在菜单之上，所以我们根据菜单划出的距离给Content设置X方向的偏移量。

好了，其实看到可以这么做，基本上任何的侧滑菜单效果都能写出来了。有兴趣的话，可以拿DrawerLayout实现这篇博客的所有效果：Android 实现形态各异的双向侧滑菜单自定义控件来袭。

3、setDrawerListener

通过代码也能看出来，可以使用setDrawerListener监听菜单的打开与关闭等等。这里对于当前操作是哪个菜单的判断是通过TAG判断的，我觉得使用gravity应该也能判断出来~~

好了，没撒了，由于DrawerLayout默认只能从边界划出菜单，但是QQ划出菜单的手势区域比较大，大家有兴趣，可以重写Activity的onTouchEvent，在里面判断，如果是左右滑动手势神马的，弹出菜单，应该不麻烦~~~

源码点击下载

我建了一个QQ群，方便大家交流。群号：55032675

———————————————————————————————————-

博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：

1、Android 自定义控件实战电商活动中的刮刮卡

2、Android自定义控件实战打造Android流式布局和热门标签

3、Android智能机器人“小慕”的实现

4、高仿QQ5.0侧滑

5、高仿微信5.2.1主界面及消息提醒

Android DrawerLayout 高仿QQ5.2双向侧滑菜单

1、概述

2、DrawerLayout的使用

3、代码是最好的老师

1、MenuLeftFragment

2、MenuRightFragment

3、MainActivity

💬 评论

1、概述#

2、DrawerLayout的使用#

3、代码是最好的老师#

1、MenuLeftFragment#

2、MenuRightFragment#

3、MainActivity#

💬 评论

1、概述

2、DrawerLayout的使用

3、代码是最好的老师

1、MenuLeftFragment

2、MenuRightFragment

3、MainActivity