随着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上的实现效果:

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

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中:

       // attach to current activity;
resideMenu = new ResideMenu(this);
resideMenu.setBackground(R.drawable.menu_background);
resideMenu.attachToActivity(this); // create menu items;
String titles[] = { "Home", "Profile", "Calendar", "Settings" };
int icon[] = { R.drawable.icon_home, R.drawable.icon_profile, R.drawable.icon_calendar, R.drawable.icon_settings };
// add menu items into residemenu
for (int i = 0; i < titles.length; i++){
ResideMenuItem item = new ResideMenuItem(this, icon[i], titles[i]);
item.setOnClickListener(this);
resideMenu.addMenuItem(item);
}

打开/关闭菜单:

resideMenu.openMenu();
resideMenu.closeMenu();

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

resideMenu.setMenuListener(menuListener);
private ResideMenu.OnMenuListener menuListener = new ResideMenu.OnMenuListener() {
@Override
public void openMenu() {
Toast.makeText(mContext, "Menu is opened!", Toast.LENGTH_SHORT).show();
} @Override
public void closeMenu() {
Toast.makeText(mContext, "Menu is closed!", Toast.LENGTH_SHORT).show();
}
};

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

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

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

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

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

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

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

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

 /**
* if the motion evnent was relative to the view
* which in ignored view list,return true;//
*
* @param ev
* @return
*/
private boolean isInIgnoredView(MotionEvent ev) {
Rect rect = new Rect();
for (View v : ignoredViews) {
v.getGlobalVisibleRect(rect);
if (rect.contains((int) ev.getX(), (int) ev.getY()))
return true;
}
return false;
}

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

if(isInIgnoredView(motionEvent) || isInIgnoredView(motionEvent2)){
return false;
}

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

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

到了文章末尾,还是再说一点吧. 最近CSDN正在举行2013年度博客之星评选,我有幸成为了候选人之一. 写博客对于我来说呢,既是对于平常知识的一种积累,也是用来记录开发路上的点点滴滴.同时希望能通过博客来得到更多的问题解决方案,拓宽自己的思路与见识. 其实无论是程序开发还是平时的生活中,没有最好,只有最适合. 在这个过程中我也认识了很多志同道合的朋友.在此也希望自己在新的一年中,能够继续坚持,不断进步.

如果大家觉得我写的博客还可以,请投我一票支持一下我,我的投票地址为:

http://vote.blog.csdn.net/blogstaritem/blogstar2013/t12x3456

Android iOS Dribbble风格边栏菜单实现的更多相关文章

  1. Android系列之UI组件----Menu菜单

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  2. Android IOS WebRTC 音视频开发总结(八十三)-- 使用WebRTC广播网络摄像头视频(上)

    本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...

  3. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  4. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  5. React++ node.js ++SQL Sever ++MySQL++ python ++ php ++ java ++ c++ c#++ java ++ android ++ ios ++Linux+

    "C语言在它诞生的那个年代,是非常不错的语言,可惜没有OOP.当项目臃肿到一定程度,人类就不可控了. 为了弥补这个缺陷,C++诞生了.而为了应对各种情况,C++设计的大而全,太多复杂的特性, ...

  6. Bodymovin:Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    转自:https://www.cnblogs.com/zamhown/p/6688369.html 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画 ...

  7. 大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

    前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...

  8. iOS系统中导航栏的转场解决方案与最佳实践

    背景 目前,开源社区和业界内已经存在一些 iOS 导航栏转场的解决方案,但对于历史包袱沉重的美团 App 而言,这些解决方案并不完美.有的方案不能满足复杂的页面跳转场景,有的方案迁移成本较大,为此我们 ...

  9. [翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信

    English document From http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communi ...

随机推荐

  1. AndroidStudio Gradle版本不匹配问题

    报错信息: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica } Error:(1, 1) A problem occurr ...

  2. python url解析

    >>> url="http://localhost/test.py?a=hello&b=world " >>> result=urlpa ...

  3. [BZOJ 2048] [2009国家集训队]书堆 【调和级数】

    题目链接:BZOJ - 2048 题目分析 只有一本书时,这本书的重心落在桌子边缘上,伸出桌面的长度就是 1/2. 有两本书时,第一本书的重心就落在第二本书的边缘上,两本书的重心落在桌子边缘上,两本书 ...

  4. BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路

    Description 农夫约翰正驾驶一条小艇在牛勒比海上航行. 海上有N(1≤N≤100)个岛屿,用1到N编号.约翰从1号小岛出发,最后到达N号小岛.一 张藏宝图上说,如果他的路程上经过的小岛依次出 ...

  5. Cloud Insight!StatsD 系监控产品新宠!

    年关将至,Cloud Insight 正式版悄然上线了.没有大张旗鼓的宣传,也没有热热闹闹的庆祝,只是一群人在上线前踏踏实实的优化了两周,然后发版,就是这样一件简单的事. 然而就是这样一个低调的产品, ...

  6. 【SGU 390】Tickets (数位DP)

    Tickets   Description Conductor is quite a boring profession, as all you have to do is just to sell ...

  7. Android 自定义组件随着手指自动画圆

    首先自定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andro ...

  8. RubyGems使用

    RubyGems的功能类似于Linux下的apt-get.使用它可以方便第从远程服务器下载并安装Rails. # 安装指定gem包,程序先从本机查找gem包并安装,如果本地没有,则从远程gem安装.g ...

  9. Handler sendMessage 与 obtainMessage (sendToTarget)

    这篇文章讲的很好: http://www.cnblogs.com/android007/archive/2012/05/10/2494766.html 两种用法: 1. private void se ...

  10. HDU 5935 Car 【模拟】 (2016年中国大学生程序设计竞赛(杭州))

    Car Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...