Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

1、概述

关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向侧滑菜单,不过请放心,代码会很简单~~然后根据这若干种,只要你喜欢,相信你可以打造任何绚(bian)丽(tai)效果的双向侧滑菜单~~

2、目标效果

1、最普通的双向侧滑

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

是不是很模糊,嗯,没办法,电脑显卡弱。。。。

2、抽屉式双向侧滑

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

3、菜单在内容之下的双向侧滑

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

凑合看下,文章最后会提供源码下载,大家可以安装体验一下~

所有的代码的内容区域都是一个ListView,两侧菜单都包含按钮,基本的冲突都检测过~~~当然如果有bug在所难免,请直接留言;如果你解决了某些未知bug,希望你也可以留言,或许可以帮助到其他人~~

下面就开始我们的代码了。

3、代码是最好的老师

1、布局文件

既然是双向菜单,那么我们的布局文件是这样的:

  1. <com.zhy.view.BinarySlidingMenu xmlns: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.zhy.zhy_bin_slidingmenu02"
  4. android:id="@+id/id_menu"
  5. android:layout_width="wrap_content"
  6. android:layout_height="fill_parent"
  7. android:scrollbars="none"
  8. zhy:rightPadding="100dp" >
  9. <LinearLayout
  10. android:layout_width="wrap_content"
  11. android:layout_height="fill_parent"
  12. android:orientation="horizontal" >
  13. <include layout="@layout/layout_menu" />
  14. <LinearLayout
  15. android:layout_width="fill_parent"
  16. android:layout_height="fill_parent"
  17. android:background="@drawable/eee"
  18. android:gravity="center"
  19. android:orientation="horizontal" >
  20. <ListView
  21. android:id="@android:id/list"
  22. android:layout_width="fill_parent"
  23. android:layout_height="fill_parent" >
  24. </ListView>
  25. </LinearLayout>
  26. <include layout="@layout/layout_menu2" />
  27. </LinearLayout>
  28. </com.zhy.view.BinarySlidingMenu>

最外层是我们的自定义的BinarySlidingMenu,内部一个水平方向的LinearLayout,然后是左边的菜单,内容区域,右边的菜单布局~~

关键就是我们的BinarySlidingMenu

2、BinarySlidingMenu的构造方法

  1. /**
  2. * 屏幕宽度
  3. */
  4. private int mScreenWidth;
  5. /**
  6. * dp 菜单距离屏幕的右边距
  7. */
  8. private int mMenuRightPadding;
  9. public BinarySlidingMenu(Context context, AttributeSet attrs, int defStyle)
  10. {
  11. super(context, attrs, defStyle);
  12. mScreenWidth = ScreenUtils.getScreenWidth(context);
  13. TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
  14. R.styleable.BinarySlidingMenu, defStyle, 0);
  15. int n = a.getIndexCount();
  16. for (int i = 0; i < n; i++)
  17. {
  18. int attr = a.getIndex(i);
  19. switch (attr)
  20. {
  21. case R.styleable.BinarySlidingMenu_rightPadding:
  22. // 默认50
  23. mMenuRightPadding = a.getDimensionPixelSize(attr,
  24. (int) TypedValue.applyDimension(
  25. TypedValue.COMPLEX_UNIT_DIP, 50f,
  26. getResources().getDisplayMetrics()));// 默认为10DP
  27. break;
  28. }
  29. }
  30. a.recycle();
  31. }

我们在构造方法中,获取我们自定义的一个属性rightPadding,然后赋值给我们的成员变量mMenuRightPadding;关于如何自定义属性参考侧滑菜单的第一篇博文,这里就不赘述了。

3、onMeasure

onMeasure中肯定是对侧滑菜单的宽度、高度等进行设置:

  1. @Override
  2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
  3. {
  4. /**
  5. * 显示的设置一个宽度
  6. */
  7. if (!once)
  8. {
  9. mWrapper = (LinearLayout) getChildAt(0);
  10. mLeftMenu = (ViewGroup) mWrapper.getChildAt(0);
  11. mContent = (ViewGroup) mWrapper.getChildAt(1);
  12. mRightMenu = (ViewGroup) mWrapper.getChildAt(2);
  13. mMenuWidth = mScreenWidth - mMenuRightPadding;
  14. mHalfMenuWidth = mMenuWidth / 2;
  15. mLeftMenu.getLayoutParams().width = mMenuWidth;
  16. mContent.getLayoutParams().width = mScreenWidth;
  17. mRightMenu.getLayoutParams().width = mMenuWidth;
  18. }
  19. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  20. }

可以看到我们分别给左侧、右侧的菜单设置了宽度(mScreenWidth - mMenuRightPadding);

宽度设置完成以后,肯定就是定位了,把左边的菜单弄到左边去,右边的菜单放置到右边,中间依然是我们的内容区域,那么请看onLayout方法~

4、onLayout

  1. @Override
  2. protected void onLayout(boolean changed, int l, int t, int r, int b)
  3. {
  4. super.onLayout(changed, l, t, r, b);
  5. if (changed)
  6. {
  7. // 将菜单隐藏
  8. this.scrollTo(mMenuWidth, 0);
  9. once = true;
  10. }
  11. }

哈,出奇的简单,因为我们的内部是个横向的线性布局,所以直接把左侧滑出去即可~~定位也完成了,那么此时应该到了我们的处理触摸了。

5、onTouchEvent

  1. @Override
  2. public boolean onTouchEvent(MotionEvent ev)
  3. {
  4. int action = ev.getAction();
  5. switch (action)
  6. {
  7. // Up时,进行判断,如果显示区域大于菜单宽度一半则完全显示,否则隐藏
  8. case MotionEvent.ACTION_UP:
  9. int scrollX = getScrollX();
  10. // 如果是操作左侧菜单
  11. if (isOperateLeft)
  12. {
  13. // 如果影藏的区域大于菜单一半,则影藏菜单
  14. if (scrollX > mHalfMenuWidth)
  15. {
  16. this.smoothScrollTo(mMenuWidth, 0);
  17. // 如果当前左侧菜单是开启状态,且mOnMenuOpenListener不为空,则回调关闭菜单
  18. if (isLeftMenuOpen && mOnMenuOpenListener != null)
  19. {
  20. // 第一个参数true:打开菜单,false:关闭菜单;第二个参数 0 代表左侧;1代表右侧
  21. mOnMenuOpenListener.onMenuOpen(false, 0);
  22. }
  23. isLeftMenuOpen = false;
  24. } else
  25. // 关闭左侧菜单
  26. {
  27. this.smoothScrollTo(0, 0);
  28. // 如果当前左侧菜单是关闭状态,且mOnMenuOpenListener不为空,则回调打开菜单
  29. if (!isLeftMenuOpen && mOnMenuOpenListener != null)
  30. {
  31. mOnMenuOpenListener.onMenuOpen(true, 0);
  32. }
  33. isLeftMenuOpen = true;
  34. }
  35. }
  36. // 操作右侧
  37. if (isOperateRight)
  38. {
  39. // 打开右侧侧滑菜单
  40. if (scrollX > mHalfMenuWidth + mMenuWidth)
  41. {
  42. this.smoothScrollTo(mMenuWidth + mMenuWidth, 0);
  43. } else
  44. // 关闭右侧侧滑菜单
  45. {
  46. this.smoothScrollTo(mMenuWidth, 0);
  47. }
  48. }
  49. return true;
  50. }
  51. return super.onTouchEvent(ev);
  52. }

依然是简单~~~我们只需要关注ACTION_UP,然后得到手指抬起后的scrollX,然后我们通过一个布尔值,判断用户现在操作是针对左侧菜单,还是右侧菜单?

如果是操作左侧,那么判断scorllX是否超过了菜单宽度的一半,然后做相应的操作。

如果是操作右侧,那么判断scrollX与 mHalfMenuWidth + mMenuWidth ( 注意下,右侧菜单完全影藏的时候,scrollX 就等于 mMenuWidth ),然后做对应的操作。

我们还给左侧的菜单加上了一个回调:

if (isLeftMenuOpen && mOnMenuOpenListener != null)
{
//第一个参数true:打开菜单,false:关闭菜单;第二个参数 0 代表左侧;1代表右侧
mOnMenuOpenListener.onMenuOpen(false, 0);
}

扫一眼我们的回调接口:

  1. /**
  2. * 回调的接口
  3. * @author zhy
  4. *
  5. */
  6. public interface OnMenuOpenListener
  7. {
  8. /**
  9. *
  10. * @param isOpen true打开菜单,false关闭菜单
  11. * @param flag 0 左侧, 1右侧
  12. */
  13. void onMenuOpen(boolean isOpen, int flag);
  14. }

右侧菜单我没有添加回调,大家按照左侧的形式自己添加下就ok ;

好了,接下来,看下我们判断用户操作是左侧还是右侧的代码写在哪。

6、onScrollChanged

  1. @Override
  2. protected void onScrollChanged(int l, int t, int oldl, int oldt)
  3. {
  4. super.onScrollChanged(l, t, oldl, oldt);
  5. if (l > mMenuWidth)
  6. {
  7. isOperateRight = true;
  8. isOperateLeft = false;
  9. } else
  10. {
  11. isOperateRight = false;
  12. isOperateLeft = true;
  13. }
  14. }

如果看过前两篇,对这个方法应该很眼熟了吧。我们直接通过 l 和 菜单宽度进行比较, 如果大于菜单宽度,那么肯定是想操作右侧菜单,否则那么就是想操作左侧菜单;

到此,我们的双向侧滑菜单已经大功告成了,至于你信不信,反正我有效果图。看效果图前,贴一下MainActivity的代码:

7、MainActivity

  1. package com.zhy.zhy_bin_slidingmenu02;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.ListActivity;
  5. import android.os.Bundle;
  6. import android.view.Window;
  7. import android.widget.ArrayAdapter;
  8. import android.widget.Toast;
  9. import com.zhy.view.BinarySlidingMenu;
  10. import com.zhy.view.BinarySlidingMenu.OnMenuOpenListener;
  11. public class MainActivity extends ListActivity
  12. {
  13. private BinarySlidingMenu mMenu;
  14. private List<String> mDatas = new ArrayList<String>();
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState)
  17. {
  18. super.onCreate(savedInstanceState);
  19. requestWindowFeature(Window.FEATURE_NO_TITLE);
  20. setContentView(R.layout.activity_main);
  21. mMenu = (BinarySlidingMenu) findViewById(R.id.id_menu);
  22. mMenu.setOnMenuOpenListener(new OnMenuOpenListener()
  23. {
  24. @Override
  25. public void onMenuOpen(boolean isOpen, int flag)
  26. {
  27. if (isOpen)
  28. {
  29. Toast.makeText(getApplicationContext(),
  30. flag == 0 ? "LeftMenu Open" : "RightMenu Open",
  31. Toast.LENGTH_SHORT).show();
  32. } else
  33. {
  34. Toast.makeText(getApplicationContext(),
  35. flag == 0 ? "LeftMenu Close" : "RightMenu Close",
  36. Toast.LENGTH_SHORT).show();
  37. }
  38. }
  39. });
  40. // 初始化数据
  41. for (int i = 'A'; i <= 'Z'; i++)
  42. {
  43. mDatas.add((char) i + "");
  44. }
  45. // 设置适配器
  46. setListAdapter(new ArrayAdapter<String>(this, R.layout.item, mDatas));
  47. }
  48. }

没撒好说的,为了方便直接继承了ListActivity,然后设置了一下回调,布局文件一定要有ListView,为了测试我们是否有冲突~~不过有咱们也不怕~

效果图:

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

当然了,最简单的双向侧滑怎么能满足大家的好(Zhao)奇(Nue)心呢,所以我们准备玩点神奇的花样~~

4、打造抽屉式双向侧滑

我们在onScrollChanged添加两行代码~~为mContent设置一个属性动画

  1. @Override
  2. protected void onScrollChanged(int l, int t, int oldl, int oldt)
  3. {
  4. super.onScrollChanged(l, t, oldl, oldt);
  5. if (l > mMenuWidth)
  6. {
  7. isOperateRight = true;
  8. isOperateLeft = false;
  9. } else
  10. {
  11. isOperateRight = false;
  12. isOperateLeft = true;
  13. }
  14. float scale = l * 1.0f / mMenuWidth;
  15. ViewHelper.setTranslationX(mContent, mMenuWidth * (scale - 1));
  16. }

简单分析一下哈:

1、scale,在滑动左侧菜单时:值为1.0~0.0;mMenuWidth * (scale - 1) 的值就是从 0.0~ -mMenuWidth(注意:负的) ; 那么mContent的向偏移量,就是0到mMenuWidth ;也就是说,整个滑动的过程,我们强制让内容区域固定了。

2、scale,在滑动右侧菜单时:值为:1.0~2.0;mMenuWidth * (scale - 1) 的值就是从 0.0~ mMenuWidth(注意:正数) ;那么mContent的向偏移量,就是0到mMenuWidth ;也就是说,整个滑动的过程,我们强制让内容区域固定了。

好了,内容固定了,那么我们此刻的两边菜单应该是在内容之上显示出来~~这不就是我们的抽屉效果么~

嗯,这次木有效果图了,因为测试结果发现,左侧的菜单会被内容区域遮盖住,看不到;右侧菜单符合预期效果;因为,左侧菜单滑动出来以后,被内容区域遮盖住了,这个也很容易理解,毕竟我们的布局,内容在左侧菜单后面,肯定会挡住它的。那么,怎么办呢?

起初,我准备使用bringToFont方法,在拖动的时候,让菜单在上面~~~不过呢,问题大大的,有兴趣可以试试~~

于是乎,我换了个方法,我将BinarySlidingMenu内部的Linearlayout进行了自定义,现在布局文件是这样的:

  1. <com.zhy.view.BinarySlidingMenu xmlns: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.zhy.zhy_bin_slidingmenu03"
  4. android:id="@+id/id_menu"
  5. android:layout_width="wrap_content"
  6. android:layout_height="fill_parent"
  7. android:scrollbars="none"
  8. zhy:rightPadding="100dp" >
  9. <com.zhy.view.MyLinearLayout
  10. android:layout_width="wrap_content"
  11. android:layout_height="fill_parent"
  12. android:orientation="horizontal" >
  13. <include layout="@layout/layout_menu" />
  14. <LinearLayout
  15. android:layout_width="fill_parent"
  16. android:layout_height="fill_parent"
  17. android:background="@drawable/eee"
  18. android:gravity="center"
  19. android:orientation="horizontal" >
  20. <ListView
  21. android:id="@android:id/list"
  22. android:layout_width="fill_parent"
  23. android:layout_height="fill_parent" >
  24. </ListView>
  25. </LinearLayout>
  26. <include layout="@layout/layout_menu2" />
  27. </com.zhy.view.MyLinearLayout>
  28. </com.zhy.view.BinarySlidingMenu>

MyLinearlayout的代码:

  1. package com.zhy.view;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.Log;
  5. import android.widget.LinearLayout;
  6. public class MyLinearLayout extends LinearLayout
  7. {
  8. public MyLinearLayout(Context context, AttributeSet attrs)
  9. {
  10. super(context, attrs);
  11. //      Log.e("TAG", "MyLinearLayout");
  12. setChildrenDrawingOrderEnabled(true);
  13. }
  14. @Override
  15. protected int getChildDrawingOrder(int childCount, int i)
  16. {
  17. //      Log.e("tag", "getChildDrawingOrder" + i + " , " + childCount);
  18. if (i == 0)
  19. return 1;
  20. if (i == 2)
  21. return 2;
  22. if (i == 1)
  23. return 0;
  24. return super.getChildDrawingOrder(childCount, i);
  25. }
  26. }

在构造方法设置setChildrenDrawingOrderEnabled(true);然后getChildDrawingOrder复写一下绘制子View的顺序,让内容(i==0)始终是最先绘制。

现在再运行,效果图:

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

效果是不是很赞,请允许我把图挪过来了~~~

现在,还有最后一个效果,如果让,菜单在内容之下呢?

5、打造菜单在内容之下的双向侧滑

不用说,大家都能想到,无非就是在onScrollChanged改改属性动画呗,说得对!

1、改写onScrollChanged方法

  1. @Override
  2. protected void onScrollChanged(int l, int t, int oldl, int oldt)
  3. {
  4. super.onScrollChanged(l, t, oldl, oldt);
  5. if (l > mMenuWidth)
  6. {
  7. // 1.0 ~2.0 1.0~0.0
  8. // (2-scale)
  9. float scale = l * 1.0f / mMenuWidth;
  10. isOperateRight = true;
  11. isOperateLeft = false;
  12. ViewHelper.setTranslationX(mRightMenu, -mMenuWidth * (2 - scale));
  13. } else
  14. {
  15. float scale = l * 1.0f / mMenuWidth;
  16. isOperateRight = false;
  17. isOperateLeft = true;
  18. ViewHelper.setTranslationX(mLeftMenu, mMenuWidth * scale);
  19. }
  20. }

也就是拉的时候,尽量让菜单保证在内容之下~~~代码自己琢磨下

2、改写MyLinearLayout

当然了,仅仅这些是不够的,既然我们的样式变化了,那么改写View的绘制顺序肯定也是必须的。

看下我们的MyLinearLayout

  1. package com.zhy.view;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.util.Log;
  5. import android.widget.LinearLayout;
  6. public class MyLinearLayout extends LinearLayout
  7. {
  8. public MyLinearLayout(Context context, AttributeSet attrs)
  9. {
  10. super(context, attrs);
  11. Log.e("TAG", "MyLinearLayout");
  12. setChildrenDrawingOrderEnabled(true);
  13. }
  14. @Override
  15. protected int getChildDrawingOrder(int childCount, int i)
  16. {
  17. if (i == 0)
  18. return 0;
  19. if (i == 2)
  20. return 1;
  21. if (i == 1)
  22. return 2;
  23. return super.getChildDrawingOrder(childCount, i);
  24. }
  25. }

效果图:

Android 实现形态各异的双向侧滑菜单 自定义控件来袭(转载)

上一篇:LSM Tree 学习笔记——本质是将随机的写放在内存里形成有序的小memtable,然后定期合并成大的table flush到磁盘


下一篇:SSRS 实用技巧 ---- 为表格添加展开/折叠操作(明细报表)