码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2014-12-26 14:12:52      阅读：215      评论：0      收藏：0      [点我收藏+]

标签：

转载请标明出处：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 plaincopy
 
  1. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:id="@+id/id_drawerLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:background="@drawable/img_frame_background" >  
  7.   
  8.     <RelativeLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:background="@drawable/qq" >  
  12.   
  13.         <Button  
  14.             android:layout_width="40dp"  
  15.             android:layout_height="30dp"  
  16.              android:layout_marginTop="10dp"  
  17.             android:layout_alignParentRight="true"  
  18.             android:background="@drawable/youce"  
  19.             android:onClick="OpenRightMenu" />  
  20.     </RelativeLayout>  
  21.   
  22.     <fragment  
  23.         android:id="@+id/id_left_menu"  
  24.         android:name="com.zhy.demo_zhy_17_drawerlayout.MenuLeftFragment"  
  25.         android:layout_width="200dp"  
  26.         android:layout_height="match_parent"  
  27.         android:layout_gravity="left"  
  28.         android:tag="LEFT" />  
  29.   
  30.     <fragment  
  31.         android:id="@+id/id_right_menu"  
  32.         android:name="com.zhy.demo_zhy_17_drawerlayout.MenuRightFragment"  
  33.         android:layout_width="100dp"  
  34.         android:layout_height="match_parent"  
  35.         android:layout_gravity="right"  
  36.         android:tag="RIGHT" />  
  37.   
  38. </android.support.v4.widget.DrawerLayout>  


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

 

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

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

3、代码是最好的老师

 

1、MenuLeftFragment

 

[java] view plaincopy技术分享技术分享
 
  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class MenuLeftFragment extends Fragment  
  10. {  
  11.   
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  14.             Bundle savedInstanceState)  
  15.     {  
  16.         return inflater.inflate(R.layout.layout_menu, container, false);  
  17.     }  
  18. }  


对应的布局文件：

 

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#00000000" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_centerVertical="true"  
  11.         android:orientation="vertical" >  
  12.   
  13.         <RelativeLayout  
  14.             android:layout_width="match_parent"  
  15.             android:layout_height="wrap_content" >  
  16.   
  17.             <ImageView  
  18.                 android:id="@+id/one"  
  19.                 android:layout_width="50dp"  
  20.                 android:layout_height="50dp"  
  21.                 android:layout_centerVertical="true"  
  22.                 android:layout_marginLeft="20dp"  
  23.                 android:layout_marginTop="20dp"  
  24.                 android:src="@drawable/img_1" />  
  25.   
  26.             <TextView  
  27.                 android:layout_width="fill_parent"  
  28.                 android:layout_height="wrap_content"  
  29.                 android:layout_centerVertical="true"  
  30.                 android:layout_marginLeft="20dp"  
  31.                 android:layout_toRightOf="@id/one"  
  32.                 android:text="第1个Item"  
  33.                 android:textColor="#f0f0f0"  
  34.                 android:textSize="20sp" />  
  35.         </RelativeLayout>  
  36.   
  37.         <RelativeLayout  
  38.             android:layout_width="match_parent"  
  39.             android:layout_height="wrap_content" >  
  40.   
  41.             <ImageView  
  42.                 android:id="@+id/two"  
  43.                 android:layout_width="50dp"  
  44.                 android:layout_height="50dp"  
  45.                 android:layout_centerVertical="true"  
  46.                 android:layout_marginLeft="20dp"  
  47.                 android:layout_marginTop="20dp"  
  48.                 android:src="@drawable/img_2" />  
  49.   
  50.             <TextView  
  51.                 android:layout_width="fill_parent"  
  52.                 android:layout_height="wrap_content"  
  53.                 android:layout_centerVertical="true"  
  54.                 android:layout_marginLeft="20dp"  
  55.                 android:layout_toRightOf="@id/two"  
  56.                 android:text="第2个Item"  
  57.                 android:textColor="#f0f0f0"  
  58.                 android:textSize="20sp" />  
  59.         </RelativeLayout>  
  60.   
  61.         <RelativeLayout  
  62.             android:layout_width="match_parent"  
  63.             android:layout_height="wrap_content" >  
  64.   
  65.             <ImageView  
  66.                 android:id="@+id/three"  
  67.                 android:layout_width="50dp"  
  68.                 android:layout_height="50dp"  
  69.                 android:layout_centerVertical="true"  
  70.                 android:layout_marginLeft="20dp"  
  71.                 android:layout_marginTop="20dp"  
  72.                 android:src="@drawable/img_3" />  
  73.   
  74.             <TextView  
  75.                 android:layout_width="fill_parent"  
  76.                 android:layout_height="wrap_content"  
  77.                 android:layout_centerVertical="true"  
  78.                 android:layout_marginLeft="20dp"  
  79.                 android:layout_toRightOf="@id/three"  
  80.                 android:text="第3个Item"  
  81.                 android:textColor="#f0f0f0"  
  82.                 android:textSize="20sp" />  
  83.         </RelativeLayout>  
  84.   
  85.         <RelativeLayout  
  86.             android:layout_width="match_parent"  
  87.             android:layout_height="wrap_content" >  
  88.   
  89.             <ImageView  
  90.                 android:id="@+id/four"  
  91.                 android:layout_width="50dp"  
  92.                 android:layout_height="50dp"  
  93.                 android:layout_centerVertical="true"  
  94.                 android:layout_marginLeft="20dp"  
  95.                 android:layout_marginTop="20dp"  
  96.                 android:src="@drawable/img_4" />  
  97.   
  98.             <TextView  
  99.                 android:layout_width="fill_parent"  
  100.                 android:layout_height="wrap_content"  
  101.                 android:layout_centerVertical="true"  
  102.                 android:layout_marginLeft="20dp"  
  103.                 android:layout_toRightOf="@id/four"  
  104.                 android:text="第4个Item"  
  105.                 android:textColor="#f0f0f0"  
  106.                 android:textSize="20sp" />  
  107.         </RelativeLayout>  
  108.   
  109.         <RelativeLayout  
  110.             android:layout_width="match_parent"  
  111.             android:layout_height="wrap_content" >  
  112.   
  113.             <ImageView  
  114.                 android:id="@+id/five"  
  115.                 android:layout_width="50dp"  
  116.                 android:layout_height="50dp"  
  117.                 android:layout_centerVertical="true"  
  118.                 android:layout_marginLeft="20dp"  
  119.                 android:layout_marginTop="20dp"  
  120.                 android:src="@drawable/img_5" />  
  121.   
  122.             <TextView  
  123.                 android:layout_width="fill_parent"  
  124.                 android:layout_height="wrap_content"  
  125.                 android:layout_centerVertical="true"  
  126.                 android:layout_marginLeft="20dp"  
  127.                 android:layout_toRightOf="@id/five"  
  128.                 android:text="第5个Item"  
  129.                 android:textColor="#f0f0f0"  
  130.                 android:textSize="20sp" />  
  131.         </RelativeLayout>  
  132.     </LinearLayout>  
  133.   
  134. </RelativeLayout>  


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

 

2、MenuRightFragment

 

[java] view plaincopy技术分享技术分享
 
  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class MenuRightFragment extends Fragment  
  10. {  
  11.   
  12.     @Override  
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  14.             Bundle savedInstanceState)  
  15.     {  
  16.         return inflater.inflate(R.layout.menu_layout_right, container, false);  
  17.     }  
  18. }  


对应布局文件：

 

 

[html] view plaincopy技术分享技术分享
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:gravity="center_vertical"  
  6.     android:orientation="vertical" >  
  7.   
  8.     <LinearLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_centerVertical="true"  
  12.         android:layout_gravity="center_vertical"  
  13.         android:layout_marginBottom="20dp"  
  14.         android:orientation="vertical" >  
  15.   
  16.         <ImageView  
  17.             android:layout_width="60dp"  
  18.             android:layout_height="60dp"  
  19.             android:layout_gravity="center"  
  20.             android:src="@drawable/wode" />  
  21.   
  22.         <TextView  
  23.             android:layout_width="fill_parent"  
  24.             android:layout_height="wrap_content"  
  25.             android:gravity="center"  
  26.             android:text="扫一扫"  
  27.             android:textColor="#ffffff" />  
  28.     </LinearLayout>  
  29.   
  30.     <LinearLayout  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="wrap_content"  
  33.         android:layout_centerVertical="true"  
  34.         android:layout_gravity="center_vertical"  
  35.         android:layout_marginBottom="20dp"  
  36.         android:orientation="vertical" >  
  37.   
  38.         <ImageView  
  39.             android:layout_width="60dp"  
  40.             android:layout_height="60dp"  
  41.             android:layout_gravity="center"  
  42.             android:src="@drawable/saoma" />  
  43.   
  44.         <TextView  
  45.             android:layout_width="fill_parent"  
  46.             android:layout_height="wrap_content"  
  47.             android:gravity="center"  
  48.             android:text="讨论组"  
  49.             android:textColor="#ffffff" />  
  50.     </LinearLayout>  
  51.   
  52.     <LinearLayout  
  53.         android:layout_width="match_parent"  
  54.         android:layout_height="wrap_content"  
  55.         android:layout_centerVertical="true"  
  56.         android:layout_gravity="center_vertical"  
  57.         android:layout_marginBottom="20dp"  
  58.         android:orientation="vertical" >  
  59.   
  60.         <ImageView  
  61.             android:layout_width="60dp"  
  62.             android:layout_height="60dp"  
  63.             android:layout_gravity="center"  
  64.             android:src="@drawable/wode" />  
  65.   
  66.         <TextView  
  67.             android:layout_width="fill_parent"  
  68.             android:layout_height="wrap_content"  
  69.             android:gravity="center"  
  70.             android:text="扫一扫"  
  71.             android:textColor="#ffffff" />  
  72.     </LinearLayout>  
  73.   
  74.     <LinearLayout  
  75.         android:layout_width="match_parent"  
  76.         android:layout_height="wrap_content"  
  77.         android:layout_centerVertical="true"  
  78.         android:layout_gravity="center_vertical"  
  79.         android:layout_marginBottom="20dp"  
  80.         android:orientation="vertical" >  
  81.   
  82.         <ImageView  
  83.             android:layout_width="60dp"  
  84.             android:layout_height="60dp"  
  85.             android:layout_gravity="center"  
  86.             android:src="@drawable/saoma" />  
  87.   
  88.         <TextView  
  89.             android:layout_width="fill_parent"  
  90.             android:layout_height="wrap_content"  
  91.             android:gravity="center"  
  92.             android:text="讨论组"  
  93.             android:textColor="#ffffff" />  
  94.     </LinearLayout>  
  95.   
  96. </LinearLayout>  


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

 

3、MainActivity

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

 

[java] view plaincopy技术分享技术分享
 
  1. package com.zhy.demo_zhy_17_drawerlayout;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.FragmentActivity;  
  5. import android.support.v4.widget.DrawerLayout;  
  6. import android.support.v4.widget.DrawerLayout.DrawerListener;  
  7. import android.view.Gravity;  
  8. import android.view.View;  
  9. import android.view.Window;  
  10.   
  11. import com.nineoldandroids.view.ViewHelper;  
  12.   
  13. public class MainActivity extends FragmentActivity  
  14. {  
  15.   
  16.     private DrawerLayout mDrawerLayout;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState)  
  20.     {  
  21.         super.onCreate(savedInstanceState);  
  22.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  23.         setContentView(R.layout.activity_main);  
  24.   
  25.         initView();  
  26.         initEvents();  
  27.   
  28.     }  
  29.   
  30.     public void OpenRightMenu(View view)  
  31.     {  
  32.         mDrawerLayout.openDrawer(Gravity.RIGHT);  
  33.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,  
  34.                 Gravity.RIGHT);  
  35.     }  
  36.   
  37.     private void initEvents()  
  38.     {  
  39.         mDrawerLayout.setDrawerListener(new DrawerListener()  
  40.         {  
  41.             @Override  
  42.             public void onDrawerStateChanged(int newState)  
  43.             {  
  44.             }  
  45.   
  46.             @Override  
  47.             public void onDrawerSlide(View drawerView, float slideOffset)  
  48.             {  
  49.                 View mContent = mDrawerLayout.getChildAt(0);  
  50.                 View mMenu = drawerView;  
  51.                 float scale = 1 - slideOffset;  
  52.                 float rightScale = 0.8f + scale * 0.2f;  
  53.   
  54.                 if (drawerView.getTag().equals("LEFT"))  
  55.                 {  
  56.   
  57.                     float leftScale = 1 - 0.3f * scale;  
  58.   
  59.                     ViewHelper.setScaleX(mMenu, leftScale);  
  60.                     ViewHelper.setScaleY(mMenu, leftScale);  
  61.                     ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));  
  62.                     ViewHelper.setTranslationX(mContent,  
  63.                             mMenu.getMeasuredWidth() * (1 - scale));  
  64.                     ViewHelper.setPivotX(mContent, 0);  
  65.                     ViewHelper.setPivotY(mContent,  
  66.                             mContent.getMeasuredHeight() / 2);  
  67.                     mContent.invalidate();  
  68.                     ViewHelper.setScaleX(mContent, rightScale);  
  69.                     ViewHelper.setScaleY(mContent, rightScale);  
  70.                 } else  
  71.                 {  
  72.                     ViewHelper.setTranslationX(mContent,  
  73.                             -mMenu.getMeasuredWidth() * slideOffset);  
  74.                     ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());  
  75.                     ViewHelper.setPivotY(mContent,  
  76.                             mContent.getMeasuredHeight() / 2);  
  77.                     mContent.invalidate();  
  78.                     ViewHelper.setScaleX(mContent, rightScale);  
  79.                     ViewHelper.setScaleY(mContent, rightScale);  
  80.                 }  
  81.   
  82.             }  
  83.   
  84.             @Override  
  85.             public void onDrawerOpened(View drawerView)  
  86.             {  
  87.             }  
  88.   
  89.             @Override  
  90.             public void onDrawerClosed(View drawerView)  
  91.             {  
  92.                 mDrawerLayout.setDrawerLockMode(  
  93.                         DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);  
  94.             }  
  95.         });  
  96.     }  
  97.   
  98.     private void initView()  
  99.     {  
  100.         mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout);  
  101.         mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,  
  102.                 Gravity.RIGHT);  
  103.     }  
  104.   
  105. }  

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

 

提几点：

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双向侧滑菜单

标签：

原文地址：http://www.cnblogs.com/dongweiq/p/4186507.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！