一个开源iOS控件的诞生 MGTileMenu

From: http://www.lupaworld.com/article-218764-2.html

 

 

摘要: 英文原文：MGTileMenu导读：Matt Gemmell 是欧美知名 iOS/Mac 开发人员，现居苏格兰爱丁堡。Matt 围绕他近期发布的一个开源 iOS 控件 MGTileMenu 写了两篇博文。在惊叹国外顶尖开发人员对细节精益求精的专业态度之余 ...

 

        包裹式的背板

        接下来我用了一个可以完全包住所有按钮的圆角背板，感觉还不赖，但是少了几分活力，多了几分沉重。我理想中的背板应该更具动感，以迎合之后我通过 Core Animation 编写的动画效果的气质。

        最终设计

        所以我把圆角背板的尺寸裁剪了些许，这样既整合了四周的按钮，又为中心的关闭按钮提供的背景支撑。事实上在我看来，悬于背板边缘的按钮布局多了几分活泼和有趣的意味。

        在最终设计稿基础上，我通过代码实现了一切。下面是一个运行的实例，呈现的是缺省显示风格：

        缺省状态

        下面是使用一些定制化背景的效果。

        MGTileMenu 第二页

        我个人对最终的效果很满意。我想这是一个灵活、漂亮、吸引人的控件。接下来让我们看看用户交互设计及动画效果。

        用户交互设计

        设计伊始，我十分渴望能在用户手势操作上做出一些亮点。当我把自己的手放在 iPad 屏幕上，我发现我们会自然的把手向内侧弯曲，这使得我们的手指在屏幕上的滑动路径是斜向的而不是直上直下的。

        因此，在这个控件的左下角（针对左撇子用户）或者右下角（针对右撇子用户），我安排了一些的留白，这里不能安排按钮，以避免被用户的手遮挡，事实上为了得到最佳效果，我留出了两个按钮的留白位置。

        左右手使用习惯可以配置

        这样的留白设计同时也减少了在一页中可显示的最大按钮数量，这其实是件好事，我希望以此激发开发者在他们的应用中减少可选操作项，以体现简洁美。

        注意，在为左撇子用户布局按钮顺序的时候，我不是简简单单把右撇子的按钮排序镜像反转过去的哦。因为我不认为左撇子的阅读、理解顺序也是反着的。当然通过委托协议你依然可以坚持翻转按钮排序如果你认为有必要的话。

        好了，谈了这么多静态的布局和外观，现在我们看看动画效果。基于前面谈到的各种因素，我立刻想到我们需要以下几处动画效果：

        1. 菜单的显示和消失。

        2. 菜单换页时。菜单的显示消失动画很容易想：出现的时候是一个放大加淡入的效果，消失的时候是一个缩小加淡出的效果。难度在从一页菜单切换到下一页菜单的处理，因为同时要替换页面上所有的按钮。

        基于按钮的布局，因为它们看起来都是浮动在背板边缘的，我想到的动画效果是：当用户选择换页的时候，四周的按钮被吸收到中心位置，替换成下一页按钮的图标，在释放回到原位。

        我的最初实现看起来很傻很天真，我用慢动作回放一下动画效果给你们看一下：

        同步的吸放动画效果

        后来我在每个按钮的动画效果前都安排的一些滞后，这样出来的效果就好多了：

        布进式的吸放动画效果

        而按钮的替换我用了基本的淡入淡出效果，这样的替换看起来不那么唐突。

        上面演示的动画是最终版本的效果。实际上，一开始这些按钮的动画效果是按照从左到右、自上而下的顺序逐个激发的：

        按钮动画激发顺序

        可惜这种激发顺序产生的综合效果看起来比较杂乱，尤其是从上一行最右边按钮到下一行最左边按钮的过渡很不协调。后来我尝试了从翻页按钮（…）顺时针激发按钮动画，因为…按钮是用户触发整个切换场景的开端。所以最终的效果就是自翻页按钮（…）上面的那个按钮开始，顺时针绕一圈，逐个按钮吸收、替换、释放。如果配置成左撇子用户，则是反顺序的。

        最终动画激发顺序

        动画处理上画了我一点时间，但是看着最终的效果还是觉得很值得。

        当然，内部代码以及委托协议里面对按钮的排序还是基于从左到右、自上而下的自然逻辑，这里我就不折腾调用控件的程序员了。

        后记

        我个人很享受制作 MGTileMenu 的过程，同样我希望这个东西对你有所帮助，包括这篇文章 — 无论是设计还是编码，我注入的全是爱与激情。 不厌其烦的再次插播广告，请考虑通过捐赠或者购买非署名许可证的方式支持我的代码和博客。

        另外，我透过 MGTileMenu 开发过程的另外一个视角写了另外一篇博客： API Design, and why I designed it the way I did（译者注：此篇稍后翻译） 。对于开发者来说，API 就是他们的用户界面。在那篇博文里，我以 MGTileMenu 为例，阐述了自己对 iOS 及 OS X 组件开发的一些观点。

        预知更多信息，请粉我的推 (@mattgemmell). Enjoy MGTileMenu!

        英文原文：Matt Gemmell    编译：伯乐在线 – 陈远