学步园

如有转载，请声明出处: 时之沙: http://blog.csdn.net/t12x3456

随着IOS7的推出，大量移动应用也开始进行了重新设计.,开始应用大量的扁平化.可以说现在IOS和Android的风格设计方面确实是在逐渐地靠拢.

ReisdeMenu 创意灵感来自于Dribbble(Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品，或者正在创作的作品.).

得益于Dribbble,这种IOS7风格的侧边栏首先应用在IOS上得到了实现:

https://github.com/romaonthego/RESideMenu

我们首先看一下IOS上实现的效果

当然这里主要还是看一下在Android上如何来实现IOS风格的侧边栏,目前在github上也已经有相关的实现:

https://github.com/SpecialCyCi/AndroidResideMenu/blob/master

Android上的实现效果:

工程下载地址:

http://download.csdn.net/detail/t12x3456/6760669

如何把该开源项目集成到我们的项目中呢?让我们一步步地看:

1. ResideMenu工程选择Use as Library选项,在目标工程属性-->Android-->Add Library将该项目以库的形式引用.

2. 如果不愿意以Add Library方式引用，需要将ResideMenu工程中src目录下所有类,lis下的nineoldandroids-library-2.4.0.jar(Android 3.0动画的兼容版本，类似于ActionbarShelock,作者是同一人),以及所用到的所有资源图片和布局文件.

3. 这里涉及到的侧边栏样式可根据需求自行修改，在此不作详细描述.

4. ResideMenu 的使用:

  对应的Activity的onCreate()声明周期中,构建不同的MenuItem并加入到ResideMenu中:

[java] view
plaincopy

1. // attach to current activity;  
2.  resideMenu = new ResideMenu(this);  
3.  resideMenu.setBackground(R.drawable.menu_background);  
4.  resideMenu.attachToActivity(this);  
5.   
6.  // create menu items;  
7.  String titles[] = { "Home", "Profile", "Calendar", "Settings" };  
8.  int icon[] = { R.drawable.icon_home, R.drawable.icon_profile, R.drawable.icon_calendar, R.drawable.icon_settings };  
9. d menu items into residemenu  
10.  for (int i = 0; i < titles.length; i++){  
11.      ResideMenuItem item = new ResideMenuItem(this, icon[i], titles[i]);  
12.      item.setOnClickListener(this);  
13.      resideMenu.addMenuItem(item);  
14.  }  

打开/关闭菜单:

[java] view
plaincopy

1. resideMenu.openMenu();  
2. resideMenu.closeMenu();  

监听菜单打开/关闭的事件:

[java] view
plaincopy

1. resideMenu.setMenuListener(menuListener);  
2.     private ResideMenu.OnMenuListener menuListener = new ResideMenu.OnMenuListener() {  
3.         @Override  
4.         public void openMenu() {  
5.             Toast.makeText(mContext, "Menu is opened!", Toast.LENGTH_SHORT).show();  
6.         }  
7.   
8.         @Override  
9.         public void closeMenu() {  
10.             Toast.makeText(mContext, "Menu is closed!", Toast.LENGTH_SHORT).show();  
11.         }  
12.     };  

如果想加入打开/关闭ResideMenu响应的手势支持,要在Activity中覆写ispatchTouchEvent():

[java] view
plaincopy

1. @Override  
2.     public boolean dispatchTouchEvent(MotionEvent ev) {  
3.         return resideMenu.onInterceptTouchEvent(ev) || super.dispatchTouchEvent(ev);  
4.     }  

这里有一点需要注意:有些情况下，用来打开或关闭菜单的手势，有可能和其他UI控件产生冲突，比如ViewPager

可以通过加入以下代码解决该问题:

通过addIgnoredView()方法，将可能会引起事件冲突的控件加入:

[java] view
plaincopy

1. // add gesture operation's ignored views  
2.    FrameLayout ignored_view = (FrameLayout) findViewById(R.id.ignored_view);  
3.    resideMenu.addIgnoredView(ignored_view);       

具体又是如何避免冲突的呢？这里我们跟踪一下代码,这里是核心代码.

我们可以看到, 通过遍历所有可能有冲突的控件,判断当前MoveEvent的点是否在对应控件可视区域中，如果在该区域内，则返回true

[java] view
plaincopy

1. /** 
2.     * if the motion evnent was relative to the view 
3.     * which in ignored view list,return true;// 
4.     * 
5.     * @param ev 
6.     * @return 
7.     */  
8.    private boolean isInIgnoredView(MotionEvent ev) {  
9.        Rect rect = new Rect();  
10.        for (View v : ignoredViews) {  
11.            v.getGlobalVisibleRect(rect);  
12.            if (rect.contains((int) ev.getX(), (int) ev.getY()))  
13.                return true;  
14.        }  
15.        return false;  
16.    }  

然后在对应滑动或则触屏事件中处理，如onFling():

[java] view
plaincopy

1. if(isInIgnoredView(motionEvent) || isInIgnoredView(motionEvent2)){  
2.    return false;  
3.  }  

在会引起冲突的视图，如ViewPager范围内,用来打开或者关闭ResideMenu的滑动手势将不会生效.

同样，我们可以把这种解决方案应用应用到类似的场景中，防止控件之间的手势冲突.

目前就我了解，最新的友宝客户端就已经应用了此种特效. 相信在移动端发展迅速的大环境下，会不断地有新颖的设计，可以让用户有更好的体验.