Android中DrawerLayout（仿QQ双向侧滑菜单效果）

Android中DrawerLayout抽屉（仿QQ效果）
导航抽屉显示在屏幕的最左侧，默认情况下是隐藏的，当用户用手指从边缘向另一个滑动的时候，会出现一个隐藏的面板，当点击面板外部或者向原来的方向滑动的时候，抽屉导航就会消失了！
这个抽屉就是DrawerLayout，DrawerLayout是存在于v4包下的类,主要实现Android抽屉的效果。
重点内容
1.主内容视图一定要是DrawerLayout的第一个子视图
2.主内容视图宽度和高度需要match_parent
3.必须显示指定侧滑视图的android:layout_gravity属性
android:layout_gravity = “start”时，从左向右滑出菜单，android:layout_gravity = “end”时，从右向左滑出菜单

下面别的不多说，直接贴代码。

这里写代码片
xml布局：

这里写代码片<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/drawerLayout"    android:background="@drawable/img_frame_background"    tools:context=".MainActivity" >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@drawable/home" >        <Button            android:layout_width="50dp"            android:layout_height="50dp"            android:layout_alignParentRight="true"            android:background="@drawable/btn"            android:onClick="click" />    </RelativeLayout>    <fragment         android:name="com.example.cn.bgs.drawerlayoutqqdemo.FragmentA"        android:layout_width="200dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:tag="LEFT"        />    <fragment         android:name="com.example.cn.bgs.drawerlayoutqqdemo.FragmentB"        android:layout_width="100dp"        android:layout_height="match_parent"        android:layout_gravity="end"        android:tag="RIGHT"        /></android.support.v4.widget.DrawerLayout>

fragment_a 布局代码

这里写代码片<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:gravity="center"        android:orientation="horizontal" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginLeft="10dp"            android:src="@drawable/img_1" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:text="第一个item"            android:textColor="#ffffff"            android:textSize="18sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:gravity="center"        android:orientation="horizontal" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginLeft="10dp"            android:src="@drawable/img_2" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:text="第二个item"            android:textColor="#ffffff"            android:textSize="18sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:gravity="center"        android:orientation="horizontal" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginLeft="10dp"            android:src="@drawable/img_3" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:text="第三个item"            android:textColor="#ffffff"            android:textSize="18sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:gravity="center"        android:orientation="horizontal" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_marginLeft="10dp"            android:src="@drawable/img_4" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:text="第四个item"            android:textColor="#ffffff"            android:textSize="18sp" />    </LinearLayout>    <LinearLayout         android:layout_width="match_parent"        android:layout_height="60dp"        android:orientation="horizontal"        android:gravity="center"        >        <ImageView             android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/img_5"            android:layout_marginLeft="10dp"            />        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="第五个item"            android:textColor="#ffffff"            android:textSize="18sp"            android:layout_marginLeft="5dp"            />    </LinearLayout></LinearLayout>

fragment_b 布局代码

这里写代码片<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:padding="5dp"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/saoma" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="扫一扫"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/phone" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="电话"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/person" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="联系人"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/mobile" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="手机"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:orientation="vertical" >        <ImageView            android:layout_width="40dp"            android:layout_height="40dp"            android:src="@drawable/discuss" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="讨论"            android:textSize="15sp" />    </LinearLayout></LinearLayout>

FragmentA 代码

这里写代码片
public class FragmentA extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_a, container, false);
}

}
FragmentB代码同理：

public class FragmentB extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment_b, container, false);
}

}
MainActivity 代码

这里写代码片public class MainActivity extends FragmentActivity implements DrawerListener {    private DrawerLayout drawerLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);        drawerLayout.setDrawerListener(this);        drawerLayout.setScrimColor(color.transparent);        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,                Gravity.END);    }    public void click(View v) {        drawerLayout.openDrawer(Gravity.END);        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,                Gravity.END);    }    @Override    public void onDrawerClosed(View arg0) {        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,                Gravity.END);    }    @Override    public void onDrawerOpened(View arg0) {    }    @Override    public void onDrawerSlide(View arg0, float arg1) {        // 获得主视图的第一个        View mContent = drawerLayout.getChildAt(0);        // 获得菜单（抽屉）当前滑动的菜单        View mMenu = arg0;        // 缩放后的比列        float scale = 1 - arg1;        // 获取滑出菜单的宽度        int mMenuWidth = drawerLayout.getMeasuredWidth();        float leftscale = 0.8f + scale * 0.2f;        // 内容区域        ViewHelper.setScaleX(mContent, leftscale);        ViewHelper.setScaleY(mContent, leftscale);        // 抽屉区域        ViewHelper.setScaleX(mMenu, 0.7f + 0.3f * arg1);        ViewHelper.setScaleY(mMenu, 0.7f + 0.3f * arg1);        ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * arg1);// 渐变动画效果        if (arg0.getTag().equals("LEFT")) {            ViewHelper.setTranslationX(mContent, mMenuWidth * arg1);// 位移动画效果        } else {            ViewHelper.setTranslationX(mContent, -mMenuWidth * arg1);        }    }    @Override    public void onDrawerStateChanged(int arg0) {    }}

完整的代码就写完了，下面看一下效果。
如图：
图一：

图二：

图三：

如有雷同，纯属意外。如果我的文章对你有帮助，请顶一下，谢谢，多多指教。本人将会继续写下去，，，，，，