转载出处：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](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1">
</embed>
</div>
</div>
- <span class="tag"><</span><span class="tag-name">com.example.zhy_slidingmenu.SlidingMenu</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/android”</span>
- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">“http://schemas.android.com/tools”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:scrollbars</span>=<span class="attribute-value">“none”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:orientation</span>=<span class="attribute-value">“horizontal”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">include</span> <span class="attribute">layout</span>=<span class="attribute-value">“@layout/layout_menu”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/qq”</span> <span class="tag">></span>
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>
-
- <span class="tag"></</span><span class="tag-name">com.example.zhy_slidingmenu.SlidingMenu</span><span class="tag">></span>
首先是我们的自定义View，里面一个方向水平的LinearLayout，然后就是一个是菜单的布局，一个是主布局了~
4、自定义SlidingMenu#
接下来就是我们最核心的代码了~
**[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_2">
</embed>
</div>
</div>
- <span class="keyword">package</span> com.example.zhy_slidingmenu;
-
- <span class="keyword">import</span> android.content.Context;
- <span class="keyword">import</span> android.util.AttributeSet;
- <span class="keyword">import</span> android.util.TypedValue;
- <span class="keyword">import</span> android.view.MotionEvent;
- <span class="keyword">import</span> android.view.ViewGroup;
- <span class="keyword">import</span> android.widget.HorizontalScrollView;
- <span class="keyword">import</span> android.widget.LinearLayout;
-
- <span class="keyword">import</span> com.zhy.utils.ScreenUtils;
-
- <span class="keyword">public</span> <span class="keyword">class</span> SlidingMenu <span class="keyword">extends</span> HorizontalScrollView
- {
- <span class="comment">/**</span>
- <span class="comment"> * 屏幕宽度</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> mScreenWidth;
- <span class="comment">/**</span>
- <span class="comment"> * dp</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> mMenuRightPadding = <span class="number">50</span>;
- <span class="comment">/**</span>
- <span class="comment"> * 菜单的宽度</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> mMenuWidth;
- <span class="keyword">private</span> <span class="keyword">int</span> mHalfMenuWidth;
-
- <span class="keyword">private</span> <span class="keyword">boolean</span> once;
-
- <span class="keyword">public</span> SlidingMenu(Context context, AttributeSet attrs)
- {
- <span class="keyword">super</span>(context, attrs);
- mScreenWidth = ScreenUtils.getScreenWidth(context);
- }
-
- <span class="annotation">@Override</span>
- <span class="keyword">protected</span> <span class="keyword">void</span> onMeasure(<span class="keyword">int</span> widthMeasureSpec, <span class="keyword">int</span> heightMeasureSpec)
- {
- <span class="comment">/**</span>
- <span class="comment"> * 显示的设置一个宽度</span>
- <span class="comment"> */</span>
- <span class="keyword">if</span> (!once)
- {
- LinearLayout wrapper = (LinearLayout) getChildAt(<span class="number"></span>);
- ViewGroup menu = (ViewGroup) wrapper.getChildAt(<span class="number"></span>);
- ViewGroup content = (ViewGroup) wrapper.getChildAt(<span class="number">1</span>);
- <span class="comment">// dp to px</span>
- mMenuRightPadding = (<span class="keyword">int</span>) TypedValue.applyDimension(
- TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding, content
- .getResources().getDisplayMetrics());
-
- mHalfMenuWidth = mMenuWidth / <span class="number">2</span>;
- menu.getLayoutParams().width = mMenuWidth;
- content.getLayoutParams().width = mScreenWidth;
-
- }
- <span class="keyword">super</span>.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
- }
-
- <span class="annotation">@Override</span>
- <span class="keyword">protected</span> <span class="keyword">void</span> onLayout(<span class="keyword">boolean</span> changed, <span class="keyword">int</span> l, <span class="keyword">int</span> t, <span class="keyword">int</span> r, <span class="keyword">int</span> b)
- {
- <span class="keyword">super</span>.onLayout(changed, l, t, r, b);
- <span class="keyword">if</span> (changed)
- {
- <span class="comment">// 将菜单隐藏</span>
- <span class="keyword">this</span>.scrollTo(mMenuWidth, <span class="number"></span>);
- once = <span class="keyword">true</span>;
- }
- }
-
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">boolean</span> onTouchEvent(MotionEvent ev)
- {
- <span class="keyword">int</span> action = ev.getAction();
- <span class="keyword">switch</span> (action)
- {
- <span class="comment">// Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏</span>
- <span class="keyword">case</span> MotionEvent.ACTION_UP:
- <span class="keyword">int</span> scrollX = getScrollX();
- <span class="keyword">if</span> (scrollX > mHalfMenuWidth)
- <span class="keyword">this</span>.smoothScrollTo(mMenuWidth, <span class="number"></span>);
- <span class="keyword">else</span>
- <span class="keyword">this</span>.smoothScrollTo(<span class="number"></span>, <span class="number"></span>);
- <span class="keyword">return</span> <span class="keyword">true</span>;
- }
- <span class="keyword">return</span> <span class="keyword">super</span>.onTouchEvent(ev);
- }
-
- }
哈哈，完工~上面的演示图，就用到这么点代码~~
代码怎么样，短不短除了设置宽度这些杂七杂八的代码正在处理滑动的代码不过10行~~我说史上最简单不为过吧~
嗯，由于代码过于短，就不解释了，大家自己看下注释~
5、扩展#
嗯，就下来，我们完善下程序，我准备首先把菜单布局里面改成ListView来证明我们是没有冲突的；然后添加一个属性让用户配置菜单距离右边的边距的值；再对外公布一个方法，点击自动打开菜单，供用户点击某个按钮，菜单慢慢滑出来~
1、添加自定义属性#
a、首先在values文件夹下新建一个attr.xml，写入以下内容：
**[html]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_3">
</embed>
</div>
</div>
- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">“1.0”</span> <span class="attribute">encoding</span>=<span class="attribute-value">“utf-8”</span><span class="tag">?></span>
- <span class="tag"><</span><span class="tag-name">resources</span><span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">attr</span> <span class="attribute">name</span>=<span class="attribute-value">“rightPadding”</span> <span class="attribute">format</span>=<span class="attribute-value">“dimension”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">declare-styleable</span> <span class="attribute">name</span>=<span class="attribute-value">“SlidingMenu”</span><span class="tag">></span>
- <span class="tag"><</span><span class="tag-name">attr</span> <span class="attribute">name</span>=<span class="attribute-value">“rightPadding”</span> <span class="tag">/></span>
- <span class="tag"></</span><span class="tag-name">declare-styleable</span><span class="tag">></span>
-
- <span class="tag"></</span><span class="tag-name">resources</span><span class="tag">></span>
b、在布局中声明命名空间和使用属性
定义完了，肯定要使用么。
**[html]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_4">
</embed>
</div>
</div>
- <span class="tag"><</span><span class="tag-name">com.example.zhy_slidingmenu.SlidingMenu</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/android”</span>
- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">“http://schemas.android.com/tools”</span>
- <span class="attribute">xmlns:zhy</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/com.example.zhy_slidingmenu”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:scrollbars</span>=<span class="attribute-value">“none”</span>
- <span class="attribute">zhy:rightPadding</span>=<span class="attribute-value">“100dp”</span> <span class="tag">></span>
可以看到我们的命名空间：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](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_5">
</embed>
</div>
</div>
- <span class="keyword">public</span> SlidingMenu(Context context, AttributeSet attrs, <span class="keyword">int</span> defStyle)
- {
- <span class="keyword">super</span>(context, attrs, defStyle);
- mScreenWidth = ScreenUtils.getScreenWidth(context);
-
- TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
- R.styleable.SlidingMenu, defStyle, <span class="number"></span>);
- <span class="keyword">int</span> n = a.getIndexCount();
- <span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number"></span>; i < n; i++)
- {
- <span class="keyword">int</span> attr = a.getIndex(i);
- <span class="keyword">switch</span> (attr)
- {
- <span class="keyword">case</span> R.styleable.SlidingMenu_rightPadding:
- <span class="comment">// 默认50</span>
- mMenuRightPadding = a.getDimensionPixelSize(attr,
- (<span class="keyword">int</span>) TypedValue.applyDimension(
- TypedValue.COMPLEX_UNIT_DIP, 50f,
- getResources().getDisplayMetrics()));<span class="comment">// 默认为10DP</span>
- <span class="keyword">break</span>;
- }
- }
- a.recycle();
- }
在三个参数的构造方法中，通过TypeArray获取就行了~
好了，这样就行了~如果你又很多自定义属性，按照上面的步骤来就行了~~
2、对外公布一个打开菜单的方法#
首先定义一个boolean isOpen变量，用来标识我们当前菜单的状态~~然后记得在ACTION_UP的时候改变下状态：
**[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_6">
</embed>
</div>
</div>
- <span class="keyword">case</span> MotionEvent.ACTION_UP:
- <span class="keyword">int</span> scrollX = getScrollX();
- <span class="keyword">if</span> (scrollX > mHalfMenuWidth)
- {
- <span class="keyword">this</span>.smoothScrollTo(mMenuWidth, <span class="number"></span>);
- isOpen = <span class="keyword">false</span>;
- } <span class="keyword">else</span>
- {
- <span class="keyword">this</span>.smoothScrollTo(<span class="number"></span>, <span class="number"></span>);
- isOpen = <span class="keyword">true</span>;
- }
- <span class="keyword">return</span> <span class="keyword">true</span>;
- }
下面开始添加方法：
**[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_7">
</embed>
</div>
</div>
- <span class="comment">/**</span>
- <span class="comment"> * 打开菜单</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">void</span> openMenu()
- {
- <span class="keyword">if</span> (isOpen)
- <span class="keyword">return</span>;
- <span class="keyword">this</span>.smoothScrollTo(<span class="number"></span>, <span class="number"></span>);
- isOpen = <span class="keyword">true</span>;
- }
-
- <span class="comment">/**</span>
- <span class="comment"> * 关闭菜单</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">void</span> closeMenu()
- {
- <span class="keyword">if</span> (isOpen)
- {
- <span class="keyword">this</span>.smoothScrollTo(mMenuWidth, <span class="number"></span>);
- isOpen = <span class="keyword">false</span>;
- }
- }
-
- <span class="comment">/**</span>
- <span class="comment"> * 切换菜单状态</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">void</span> toggle()
- {
- <span class="keyword">if</span> (isOpen)
- {
- closeMenu();
- } <span class="keyword">else</span>
- {
- openMenu();
- }
- }
顺手多添加了两个。。。
下面，我们挑一个进行测试：
主布局多添加一个按钮，用于触发toggleMenu（）方法
主Activity
**[java]** [view plain](http://blog.csdn.net/lmj623565791/article/details/39185641#)[copy](http://blog.csdn.net/lmj623565791/article/details/39185641#)
<div>
<embed id="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_8">
</embed>
</div>
</div>
- <span class="keyword">public</span> <span class="keyword">class</span> MainActivity <span class="keyword">extends</span> Activity
- {
- <span class="keyword">private</span> SlidingMenu mMenu ;
-
- <span class="annotation">@Override</span>
- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState)
- {
- <span class="keyword">super</span>.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.activity_main);
- mMenu = (SlidingMenu) findViewById(R.id.id_menu);
- }
-
- <span class="keyword">public</span> <span class="keyword">void</span> toggleMenu(View view)
- {
- mMenu.toggle();
- }
- }
好了，看下现在的效果图：
我们把padding改成了100dp~
然后点击我们的按钮，看哈效果~~
3、添加ListView测试#
好了ListView也测试完了大家可以根据自己的需求各种修改~~
对了，今天测试用QQ的目的是为了，下次我要拿上面的代码，改造和QQ5.0一模一样的效果，大家有兴趣可以提前试一试，QQ的菜单好像是隐藏在主界面下面一样，给人感觉不是划出来的，我们这个例子也能做出那样的效果，拭目以待吧；剩下就是各种缩放，透明度的动画了~~~
如果觉得不错，评价下哈
———————————————————————————————————-
博主部分视频已经上线，如果你不喜欢枯燥的文本，请猛戳（初录，期待您的支持）：
4、Android自定义控件 打造Android流式布局和热门标签
💬 评论