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

本文主要是介绍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" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/home" ><Buttonandroid: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;@Overrideprotected 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);}@Overridepublic void onDrawerClosed(View arg0) {drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END);}@Overridepublic void onDrawerOpened(View arg0) {}@Overridepublic 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);}}@Overridepublic void onDrawerStateChanged(int arg0) {}}

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

图二：

图三：

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

这篇关于Android中DrawerLayout（仿QQ双向侧滑菜单效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---