我的视频

• 1、高仿微信5.2.1主界面及消息提醒
• 2、高仿QQ5.0侧滑菜单
• 3、Android智能机器人的实现
• 4、自定义控件：打造Android流式布局和热门标签
• 5、Android电商活动中的刮刮卡
本人第一次录制视频~~~还望大家支持，共同进步~

我的视频

• 1、高仿微信5.2.1主界面及消息提醒
• 2、高仿QQ5.0侧滑菜单
• 3、Android智能机器人的实现
• 4、自定义控件：打造Android流式布局和热门标签
• 5、Android电商活动中的刮刮卡
本人第一次录制视频~~~还望大家支持，共同进步~

牛人视频，，一定要珍惜 。。。。。。。。

http://blog.csdn.net/lmj623565791/article/details/39185641

http://blog.csdn.net/lmj623565791/article/details/39185641

http://blog.csdn.net/lmj623565791/article/details/39185641

http://blog.csdn.net/lmj623565791/article/details/39185641

http://blog.csdn.net/lmj623565791/article/details/39185641

http://blog.csdn.net/lmj623565791/article/details/39185641

Android 自定义控件打造史上最简单的侧滑菜单

分类：【android 进阶之路】 2014-09-11 17:57 7005人阅读 评论(58) 收藏 举报 Android 滑动菜单 侧滑 SlidingMenu

目录(?)[+]

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/39185641，本文出自【张鸿洋的博客】

侧滑菜单在很多应用中都会见到，最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单，一般大家都会自定义ViewGroup，然后隐藏菜单栏，当手指滑动时，通过Scroller或者不断的改变leftMargin等实现；多少都有点复杂，完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现，史上最简单有点夸张，但是的确是我目前遇到过的最简单的一种实现~~~

1、原理分析

既然是侧滑，无非就是在巴掌大的屏幕，塞入大概两巴掌大的布局，需要滑动可以出现另一个，既然这样，大家为啥不考虑使用Android提供的HorizontalScrollView呢~

如果使用HorizontalScrollView，还需要在ACTION_DOWN , ACTION_MOVE里面去监听，判断，不断改变控件位置了么? NO！！！HorizontalScrollView本身就带了滑动的功能~~

还需要自己的手动处理各种冲突么？NO！！！当然了，还是需要了解下事件分发机制的~~~

2、效果图

嗯，主界面搞了QQ一张图片，左边盗用了一兄弟的布局文件~~罪过~~ 谁有好看的布局、图片、图标神马的，可以给我发点，感激~

3、布局文件

[html] view plain copy

1. <com.example.zhy_slidingmenu.SlidingMenuxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="wrap_content"
4. android:layout_height="fill_parent"
5. android:scrollbars="none">
7. <LinearLayout
8. android:layout_width="wrap_content"
9. android:layout_height="fill_parent"
10. android:orientation="horizontal">
12. <includelayout="@layout/layout_menu"/>
14. <LinearLayout
15. android:layout_width="fill_parent"
16. android:layout_height="fill_parent"
17. android:background="@drawable/qq">
18. </LinearLayout>
19. </LinearLayout>
21. </com.example.zhy_slidingmenu.SlidingMenu>

首先是我们的自定义View，里面一个方向水平的LinearLayout，然后就是一个是菜单的布局，一个是主布局了~

4、自定义SlidingMenu

接下来就是我们最核心的代码了~

[java] view plain copy

1. packagecom.example.zhy_slidingmenu;
3. importandroid.content.Context;
4. importandroid.util.AttributeSet;
5. importandroid.util.TypedValue;
6. importandroid.view.MotionEvent;
7. importandroid.view.ViewGroup;
8. importandroid.widget.HorizontalScrollView;
9. importandroid.widget.LinearLayout;
11. importcom.zhy.utils.ScreenUtils;
13. publicclassSlidingMenuextendsHorizontalScrollView
14. {
15. /**
16. *屏幕宽度
17. */
18. privateintmScreenWidth;
19. /**
20. *dp
21. */
22. privateintmMenuRightPadding=50;
23. /**
24. *菜单的宽度
25. */
26. privateintmMenuWidth;
27. privateintmHalfMenuWidth;
29. privatebooleanonce;
31. publicSlidingMenu(Contextcontext,AttributeSetattrs)
32. {
33. super(context,attrs);
34. mScreenWidth=ScreenUtils.getScreenWidth(context);
35. }
37. @Override
38. protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)
39. {
40. /**
41. *显示的设置一个宽度
42. */
43. if(!once)
44. {
45. LinearLayoutwrapper=(LinearLayout)getChildAt(0);
46. ViewGroupmenu=(ViewGroup)wrapper.getChildAt(0);
47. ViewGroupcontent=(ViewGroup)wrapper.getChildAt(1);
48. //dptopx
49. mMenuRightPadding=(int)TypedValue.applyDimension(
50. TypedValue.COMPLEX_UNIT_DIP,mMenuRightPadding,content
51. .getResources().getDisplayMetrics());
53. mMenuWidth=mScreenWidth-mMenuRightPadding;
54. mHalfMenuWidth=mMenuWidth/2;
55. menu.getLayoutParams().width=mMenuWidth;
56. content.getLayoutParams().width=mScreenWidth;
58. }
59. super.onMeasure(widthMeasureSpec,heightMeasureSpec);
61. }
63. @Override
64. protectedvoidonLayout(booleanchanged,intl,intt,intr,intb)
65. {
66. super.onLayout(changed,l,t,r,b);
67. if(changed)
68. {
69. //将菜单隐藏
70. this.scrollTo(mMenuWidth,0);
71. once=true;
72. }
73. }
75. @Override
76. publicbooleanonTouchEvent(MotionEventev)
77. {
78. intaction=ev.getAction();
79. switch(action)
80. {
81. //Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏
82. caseMotionEvent.ACTION_UP:
83. intscrollX=getScrollX();
84. if(scrollX>mHalfMenuWidth)
85. this.smoothScrollTo(mMenuWidth,0);
86. else
87. this.smoothScrollTo(0,0);
88. returntrue;
89. }
90. returnsuper.onTouchEvent(ev);
91. }
93. }

哈哈，完工~上面的演示图，就用到这么点代码~~

代码怎么样，短不短~除了设置宽度这些杂七杂八的代码~正在处理滑动的代码不过10行~~我说史上最简单不为过吧~

嗯，由于代码过于短，就不解释了，大家自己看下注释~

5、扩展

嗯，就下来，我们完善下程序，我准备首先把菜单布局里面改成ListView来证明我们是没有冲突的；然后添加一个属性让用户配置菜单距离右边的边距的值；再对外公布一个方法，点击自动打开菜单，供用户点击某个按钮，菜单慢慢滑出来~

1、添加自定义属性

a、首先在values文件夹下新建一个attr.xml，写入以下内容：

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <resources>
4. <attrname="rightPadding"format="dimension"/>
6. <declare-styleablename="SlidingMenu">
7. <attrname="rightPadding"/>
8. </declare-styleable>
10. </resources>

b、在布局中声明命名空间和使用属性

定义完了，肯定要使用么。

[html] view plain copy

1. <com.example.zhy_slidingmenu.SlidingMenuxmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_slidingmenu"
4. android:layout_width="wrap_content"
5. android:layout_height="fill_parent"
6. android:scrollbars="none"
7. zhy:rightPadding="100dp">

可以看到我们的命名空间：xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_slidingmenu" 是http://schemas.android.com/apk/res/加上我们的包名；

我们的属性：zhy:rightPadding="100dp"这里我设置了100dp；

注：很多人问我，没有提示咋办，这样，你clean下项目，如果你运气好，就有提示了，嗯，运气好~

c、在我们自定义类中获得属性

[java] view plain copy

1. publicSlidingMenu(Contextcontext,AttributeSetattrs,intdefStyle)
2. {
3. super(context,attrs,defStyle);
4. mScreenWidth=ScreenUtils.getScreenWidth(context);
6. TypedArraya=context.getTheme().obtainStyledAttributes(attrs,
7. R.styleable.SlidingMenu,defStyle,0);
8. intn=a.getIndexCount();
9. for(inti=0;i<n;i++)
10. {
11. intattr=a.getIndex(i);
12. switch(attr)
13. {
14. caseR.styleable.SlidingMenu_rightPadding:
15. //默认50
16. mMenuRightPadding=a.getDimensionPixelSize(attr,
17. (int)TypedValue.applyDimension(
18. TypedValue.COMPLEX_UNIT_DIP,50f,
19. getResources().getDisplayMetrics()));//默认为10DP
20. break;
21. }
22. }
23. a.recycle();
24. }

在三个参数的构造方法中，通过TypeArray获取就行了~

好了，这样就行了~如果你又很多自定义属性，按照上面的步骤来就行了~~

2、对外公布一个打开菜单的方法

首先定义一个boolean isOpen变量，用来标识我们当前菜单的状态~~然后记得在ACTION_UP的时候改变下状态：

[java] view plain copy

1. caseMotionEvent.ACTION_UP:
2. intscrollX=getScrollX();
3. if(scrollX>mHalfMenuWidth)
4. {
5. this.smoothScrollTo(mMenuWidth,0);
6. isOpen=false;
7. }else
8. {
9. this.smoothScrollTo(0,0);
10. isOpen=true;
11. }
12. returntrue;
13. }

下面开始添加方法：

[java] view plain copy

1. /**
2. *打开菜单
3. */
4. publicvoidopenMenu()
5. {
6. if(isOpen)
7. return;
8. this.smoothScrollTo(0,0);
9. isOpen=true;
10. }
12. /**
13. *关闭菜单
14. */
15. publicvoidcloseMenu()
16. {
17. if(isOpen)
18. {
19. this.smoothScrollTo(mMenuWidth,0);
20. isOpen=false;
21. }
22. }
24. /**
25. *切换菜单状态
26. */
27. publicvoidtoggle()
28. {
29. if(isOpen)
30. {
31. closeMenu();
32. }else
33. {
34. openMenu();
35. }
36. }

顺手多添加了两个。。。

下面，我们挑一个进行测试：

主布局多添加一个按钮，用于触发toggleMenu（）方法

主Activity

[java] view plain copy

1. publicclassMainActivityextendsActivity
2. {
3. privateSlidingMenumMenu;
5. @Override
6. protectedvoidonCreate(BundlesavedInstanceState)
7. {
8. super.onCreate(savedInstanceState);
9. requestWindowFeature(Window.FEATURE_NO_TITLE);
10. setContentView(R.layout.activity_main);
11. mMenu=(SlidingMenu)findViewById(R.id.id_menu);
12. }
14. publicvoidtoggleMenu(Viewview)
15. {
16. mMenu.toggle();
17. }
18. }

好了，看下现在的效果图：

我们把padding改成了100dp~

然后点击我们的按钮，看哈效果~~

3、添加ListView测试

好了~~ListView也测试完了~~大家可以根据自己的需求各种修改~~

对了，今天测试用QQ的目的是为了，下次我要拿上面的代码，改造和QQ5.0一模一样的效果，大家有兴趣可以提前试一试，QQ的菜单好像是隐藏在主界面下面一样，给人感觉不是划出来的，我们这个例子也能做出那样的效果，拭目以待吧；剩下就是各种缩放，透明度的动画了~~~

源码点击下载

如果觉得不错，评价下~哈~

----------------------------------------------------------------------------------------------------------

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

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

2、高仿QQ5.0侧滑

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

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

• 上一篇Android ViewGroup事件分发机制
• 下一篇Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭

顶

26

踩

0

更多相关文章

1. android计算器布局界面——基础编
2. android的map上的浮动菜单以及日历控件
3. android:shape的使用 （android用xml文件生成图像控件）
4. 阅读《Android 从入门到精通》（29）——四大布局
5. 【自定义控件】 ------- GridView
6. android 窗口如何靠左和靠右边框布局
7. android 自定义View 在布局文件中写法
8. android 菜单实例
9. android:Spinner(下拉框)控件的使用

随机推荐

1. Android自定义进度条-带文本(文字进度)的
2. Android4: Status bar or System UI
3. android中button设计UI的一个小技巧
4. Android实现图片轮播切换
5. Android删除系统自带软件对照表
6. Android 7.0 之后抓包 unknown 和证书无
7. android ADB （1） 键盘之adb keycode值
8. Android 使用 AudioManager 类控制音量
9. Android DrawerLayout和NavigationView
10. Android自动化工具Monkeyrunner使用（三）