`
janedoneway
  • 浏览: 585330 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

一个开源iOS控件的诞生 MGTileMenu

 
阅读更多

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

 

 

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

 


MGTileMenu:一个开源iOS控件的诞生

        包裹式的背板

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

MGTileMenu:一个开源iOS控件的诞生

        最终设计

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

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

MGTileMenu:一个开源iOS控件的诞生

        缺省状态

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

MGTileMenu:一个开源iOS控件的诞生

        MGTileMenu 第二页

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


        用户交互设计


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


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


MGTileMenu:一个开源iOS控件的诞生

        左右手使用习惯可以配置

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


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


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


        1. 菜单的显示和消失。


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


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


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


        同步的吸放动画效果

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

        布进式的吸放动画效果

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

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

MGTileMenu:一个开源iOS控件的诞生

        按钮动画激发顺序

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

MGTileMenu:一个开源iOS控件的诞生

        最终动画激发顺序

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


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


        后记


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


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

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

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

分享到:
评论

相关推荐

    ihalcon开源窗体控件.rar

    【标题】"ihalcon开源窗体控件.rar"是一个压缩包,其中包含了ihalcon开源窗体控件的相关文件。这个框架主要用于计算机视觉领域,特别是基于Halcon机器视觉算法的开发。 【描述】提到,该框架具有很好的功能,能够...

    c#做的一个开源日历控件

    标题中的“c#做的一个开源日历控件”指的是使用C#编程语言开发的一款开源的日历应用程序。C#是微软公司推出的一种面向对象的、现代的编程语言,尤其适合于Windows平台上的应用开发。开源意味着该日历控件的源代码可...

    halcon开源窗体控件(19.11).rar

    Halcon,作为一个全球知名的机器视觉软件,其强大的图像处理功能和丰富的算法库深受业界赞誉。而在【标题】"halcon开源窗体控件(19.11).rar"中提到的开源窗体控件,是Halcon为开发者提供的一种高效集成机器视觉功能...

    C#支持等比例缩放拖动的halcon WPF开源窗体控件

    C#支持等比例缩放拖动的halcon WPF开源窗体控件

    开源表格控件mmGrid

    开源表格控件mmGrid,通俗易用易操作,强烈建议大家使用

    winform开源ribbon控件源码.rar

    这个控件允许开发者轻松地在他们的应用中集成类似于Office软件的顶部菜单栏,提供了一个高效且用户友好的交互界面。 描述中的".rar"文件扩展名表明这是一份压缩文件,通常用于存储多个文件或文件夹,并使用RAR格式...

    经典开源的c#界面控件

    标题中的“经典开源的C#界面控件”指的是在C#编程环境中,使用开源库来创建用户界面(UI)的一种方法。这些控件允许开发者构建功能丰富、视觉吸引力强的WinForm应用程序。开源控件的优点在于它们是免费的,源代码...

    WPF 开源控件库(含Demo)

    综上所述,【WPF 开源控件库(含Demo)】是一个强大的开发工具包,它集成了JSON处理、MVVM架构支持以及一系列增强的UI控件。通过这个库,开发者能够快速实现高级的用户界面效果,提高开发效率,同时得益于其开源特性...

    iOS Switch 控件的动画集合.zip

    这个“iOS Switch 控件的动画集合.zip”是一个开源项目,它提供了一系列定制化的Switch控件动画效果,为你的应用增添视觉吸引力。下面我们将详细探讨Switch控件的基本使用、自定义动画以及开源项目...

    基于Face++ios版的源码.zip_face ios_face+ 开源_ios 人脸_ios开发_开源人脸识别

    本资源“基于Face++ios版的源码.zip”提供了一个针对iOS的开源人脸识别项目,适用于开发者想要集成面部识别功能到自己的应用程序中。 1. **Face++ SDK**: Face++为开发者提供了iOS SDK,包含了一系列用于人脸识别...

    ios日历控件

    在iOS开发中,日历控件(Calendar View)是一个常用的功能,它允许用户方便地查看和选择日期。本文将深入探讨如何在iOS应用中实现一个日历控件,并结合提供的资源进行详细说明。 首先,iOS提供了内置的日历框架——...

    C# 开源图表控件ZedGraph.zip

    C# 开源图表控件ZedGraph,ZedGraph.dll,图表控件,显示功能强大,代码简单,比VS自带的chart方便,自带的chart编写代码麻烦,而且在大量数据显示的时候刷新显示很慢,

    Syncfusion 开源控件库.zip

    "syncfusionessentialstudiosourceaddonsetup.exe"很可能是一个安装程序,用于安装Syncfusion的开源控件库源代码。通过安装这个程序,开发者可以获得控件的源代码,这对学习、自定义和调试控件非常有用。源代码访问...

    winform 第三方开源控件

    winform 很实用的第三方开源控件,希望能给你 的项目带来帮助!

    .NET的一个开源绘图控件 - ZedGraph

    ### .NET 的一个开源绘图控件:ZedGraph #### 概述 ZedGraph 是一款基于 .NET 的开源绘图控件,它能够帮助开发者轻松地绘制出高质量的二维图表,包括折线图、柱状图以及饼图等。ZedGraph 以其高度的灵活性和易用性...

    swift-JZClooectionControls一套平时开发用到的iOS控件集合的归类

    `JZClooectionControls` 是一个开源项目,它提供了一系列常见的iOS控件的集合,帮助开发者更高效地构建应用程序的用户界面。在这个项目中,作者将这些控件进行了归类,方便开发者快速找到并使用。 首先,`...

    C# Winform开源控件AboControls6.rar

    C# Winform开源控件AboControls6是一个针对Windows Forms应用程序设计的开源组件库,它为开发者提供了丰富的自定义控件,以增强用户界面的视觉效果和交互性。这个库包含了一系列精心设计的控件,如按钮、图表、状态...

    开源表格控件ReoGrid

    1. **单元格合并**:ReoGrid允许用户将多个相邻的单元格合并为一个大的单元格,这在创建复杂布局或标题时非常有用。 2. **边框样式**:用户可以自定义单元格的边框样式,包括线条宽度、颜色和样式(如实线、虚线、...

    c#ribbon界面全开源控件

    标题中的“c# ribbon界面全开源控件”指的是一个基于C#编程语言的Ribbon界面控件,这个控件是完全开源的,意味着它的源代码对开发者开放,允许用户自由查看、修改和分发。Ribbon界面是微软在Office 2007中引入的一种...

    开源客服控件使用教程

    通过以上步骤,我们可以使用 PowerTalkBox 控件轻松构建一个功能完善的聊天室或客服系统。这种方式不仅提高了开发效率,还大大降低了维护成本。对于那些希望快速部署在线客服或聊天应用的团队来说,这是一个理想的...

Global site tag (gtag.js) - Google Analytics