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

705 查看

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就添加好了左右侧滑了，是不是很简单~~~

比如我们的布局文件：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/id_drawerLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/img_frame_background" >

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/qq" >

<Button

android:layout_width="40dp"

android:layout_height="30dp"

android:layout_marginTop="10dp"

android:layout_alignParentRight="true"

android:background="@drawable/youce"

android:onClick="OpenRightMenu" />

</RelativeLayout>

<fragment

android:id="@+id/id_left_menu"

android:name="com.zhy.demo_zhy_17_drawerlayout.MenuLeftFragment"

android:layout_width="200dp"

android:layout_height="match_parent"

android:layout_gravity="left"

android:tag="LEFT" />

<fragment

android:id="@+id/id_right_menu"

android:name="com.zhy.demo_zhy_17_drawerlayout.MenuRightFragment"

android:layout_width="100dp"

android:layout_height="match_parent"

android:layout_gravity="right"

android:tag="RIGHT" />

</android.support.v4.widget.DrawerLayout>

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

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

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

3、代码是最好的老师

1、MenuLeftFragment

package com.zhy.demo_zhy_17_drawerlayout;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MenuLeftFragment extends Fragment

{

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState)

{

return inflater.inflate(R.layout.layout_menu, container, false);

}

对应的布局文件：