搜索
首页数据库mysql教程代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的

Code-vs-Xibs-vs-StroyBoard 最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面。iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系。而随着iOS开发发展

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的Code-vs-Xibs-vs-StroyBoard

最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面。iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系。而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局;使用单个xib文件组织viewController或者view;使用StoryBoard来通过单个或很少的几个(关于这点稍后会进行展开)文件构建全部UI。应该使用哪种方式来制作UI已经是iOS开发中亘古不变的争论话题了,或许永远不会有一个统一的结论。但是首先需要知道的是三种方式各有优劣,所以也各有自己最适用的场合,而不会有完全的孰优孰劣。对于初学iOS开发来说,一时间其实是很难判定最适合自己的UI架构方式的。在这篇文章里我希望能够通过自己的经验给出一些意见,以期能帮助入门者来挑选最适合自己应用场景的方案。对于老鸟的话,也不妨对照自己平日的使用习惯和运用场景,看看有没有可以改进或变化的地方。最后,因为我本人现在最习惯和喜欢的是用Interface Builder(之后简称IB)及xib来做UI,所以文末附上了一些IB使用时候的小技巧,算是做个总结。

代码手写UI

这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用。Geek们喜欢用代码构建UI,是因为代码是键盘敲出来的,这样可以做到不开IB,手不离开键盘就完成工作,可以专注于编码环境,看起来很cool很高效,而且不到运行时大家都不知道会是什么样子,也显出了程序员这一职业的高大上及神秘气息(这个真的不是在黑..想想大家一起在设计师背后指点江山的场景吧)。大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些。

另外,代码UI可以说具有最好的代码重用性。如果你的目的是写一些可以高度重用的控件提供给其他开发者使用,那毫无疑问最好的选择应该是使用代码来完成UIView的子类。这样进一步的修改和其他开发者在使用时,都会方便不少。使用代码也是最为强大的,会有xib或者StoryBoard做不了的事情,但是使用代码最终一定能够完成所要的需求。

但是代码手写UI的劣势同时也是最明显的,主要就是一个字:慢。首先相比可视化的IB来说,完成一个并不太复杂的界面,你可能需要写上数百行的UI代码。不论是初始化一个Label,还是设定一个frame或者添加一个target-action,都需要写代码,这不仅在前期极为浪费时间,在之后维护时代码定位和寻找也会很痛苦。其次,因为你无法直观地看到你能得到的结果,所以你很可能需要不断地Cmd+R/Cmd+.来修改各个视图的位置大小。即使你用上了Reveal或者RestartLessOften之类的工具,也还是无法特别方便地完成需要的布局。另外加上如果需要利用AutoLayout来进行尺寸适配的话,使用代码进行约束就更加头疼了。很多时候一个无法满足的约束的问题就够来回运行修改调试很长时间了。

Xibs

相对于代码,使用IB和xib文件来组织UI,可以省下大量代码和时间,从而得到更快的开发速度。如果你曾经受到过微软家Visual Basic或者其他Visual系的可视化界面的荼毒与残害,因此怀疑Interface Builder的纯正血统和工作能力,建议可以看看这些资料以纠正三观:Jean-Marie Hullot的Interface Builder神话,西装革履的青涩乔帮主在NeXT时亲手用IB构建应用(需要翻墙)。另外,不妨打开你的Mac上的Application文件夹中或者iPhone上Apple家的各种应用。你会惊奇地发现,IB远比你看到的要强大:小至计算器取色器这类小工具,大至iWork三件套,Aperture或Final Cut这样的专业级应用,无一不是使用IB来完成UI制作的。

其实IB和xib是从iOS SDK初次面世开始就是捆绑在开发者工具套装内的内容了,而到了Xcode 4之后更被直接集成到了Xcode中成为了IDE的一部分。xib设计的一大目的其实是为了良好的MVC:一般来说,单个的xib文件对应一个ViewController,而对于一些自定义的view,往往也会使用单个xib并从main bundle进行加载的方式来载入。IB帮助完成view的创建,布局和与file owner的关系映射等一些列工作。对于初学者来说,牢记xib的文件都是view的内容,有助于建立起较好的MVC的概念,从而在开发中避免或少走弯路。

xib文件之前一大被诟病的问题是文件内容过于复杂,可读性很差,即使只是简单打开没有编辑也有可能造成变化而导致合并和提交的苦难。在Xcode 5中Apple大幅简化了xib文件的格式,使其变得易读易维护。可以说现在对于xib文件在版本管理上其实和纯代码已经没有太大差异,只要仔细看过一遍xib的文件内容,自然能理解绝大部分,并很好地追踪并查找过往的修改记录了。

当然xib也不是完美的。最大的问题在于xib中的设置往往并非最终设置,在代码中你将有机会覆盖你在xib文件中进行的UI设计。在不同的地方对同一个属性进行设置,这在之后的维护中将会是噩梦般的存在。因为其实IB还是有所局限的,它没有逻辑判断,也很难在运行时进行配置,而反之使用代码确是无所不能的。在使用xib时,辅以部分代码来补充和完成功能几乎是不可避免的。关于这点在开发时应该予以高度重视,如果选择xib,那么要尽量将xib的工作和代码的工作隔离开来:能够使用xib完成的内容就统一使用xib来做,而不要说三个Label其中两个在xib设置了字体而另一个却在代码中完成。尽量仅保持必要的、较少的IBOutlet和IBAction会是一个好方法。

StoryBoard

iOS5之后Apple提供了一种全新的方式来制作UI,那就是StoryBoard。简单理解来说,可以把StoryBoard看做是一组viewController对应的xib,以及它们之间的转换方式的集合。在StoryBoard中不仅可以看到每个ViewController的布局样式,也可以明确地知道各个ViewController之间的转换关系。相对于单个的xib,其代码需求更少,也由于集合了各个xib,使得对于界面的理解和修改的速度也得到了更大提升。减少代码量就是减少bug量,这也是程序开发中的真理之一。

在Xcode5之后,StoryBoard已经成为新建项目的默认配置,这也代表了Apple对开发者的建议和未来的方向。WWDC2013的各个Sample Code中也基本都使用了StoryBoard来进行演示。可以预见到,之后Apple必定会在这方面进行继续强化,而反之纯代码或者单个xib的方式很可能不会再得到增强。

如果不考虑iOS版本的支持(其实说实话现在已经很少还见到要从iOS4开始支持的app了吧),现在StoryBoard面临的最大问题就是多人协作。因为所有的UI都定义在一个文件中,因此很多开发者个人或企业的技术负责人认为StoryBoard是无法进行协作开发的,其实这更多的是一种对StoryBoard的陌生所造成的误解。虽然Apple并没有在WWDC明确提及,但是没有人规定整个项目只能有一个StoryBoard文件。一种可行的做法是将项目的不同部分分解成若干个StoryBoard,并安排开发人员对自己的部分进行负责。简单举例比如一个有4个tab功能相互独立的基于UITabBarViewController的应用,完全可以使用4个StoryBoard来分别代表4个tab,并在相互无干扰的情况下完成开发。这样一来就不会存在所谓的冲突问题了。StoryBoard的API是如此简单,现在的SDK中一共方法数量一只手就能数过来,所以具体方法在这里就不再罗嗦了。

StoryBoard的另外的挑战来源于ViewController的重用和自定义的view的处理。对于前者,在正确封装接口以及良好设计的基础上,其实StoryBoard的VC重用与代码的VC重用是没有本质区别的,在StoryBoard中添加封装良好需要重用的Scene即可解决。而对于后者,因为StoryBoard中已经不允许有单个view的存在,因此很多时候我们还是需要借助于单个的xib来自定义UI。这一点可以说是由于StoryBoard的设计思路所造成的,StoryBoard更强调的是一种层次结构,是在全局的视角上来组织UI设计和迁移。而对于单个的view,更多的会注重于重用和定制,而与整个项目的流程没有太大关系。相信抓住这一要点,就能很好地了解什么时候使用xib,什么时候使用StoryBoard。

关于StoryBoard最后要说的是,现在会有一些对于StoryBoard性能上的担忧。因为相对于单个xib来说,StoryBoard文件往往更大,加载速度也相应变慢。但是其实随着现在设备的更新换代,在iPhone4都难觅的今天,这点性能上的差距几乎可以忽略了。而再之后的设备,不论读取还是解析,只会越来越快。所以性能上的问题完全是没有担心的必要的。

我的观点和选择

我入门的时候是使用xib的,因为那时候还没有StoryBoard,而我也不是喜欢代码的学院派Geek。到现在,三种方式我都有尝试过,并分别得到了一些可能还并不是特别深刻体会。对于现在的我来说,xib是我的奶酪,也是我在自己的一些项目里一直使用的方式,我可以在极短短时间内用xib架起一套包括自定义要素和良好部件重用性复杂UI。但是在我尝试了几次使用StoryBoard制作demo之后,我已经决定在之后的项目转向使用StoryBoard。一方面因为确实是未来方向(每次新工程删StoryBoard很讨厌..),现在的StoryBoard专有的preview功能,以及之后AutoLayout的进一步改进等都很值得期待;另一方面也觉得奶酪放一个地方太久了会不好,趁着iOS7的大变革,也更新一下自己的观念和方式,把奶酪换个地方摆摆,也许会对以后大有裨益。

对于初心者来说,我并不建议上手就直接使用代码来进行UI制作和布局,因为冗长的UI代码确实非常乏味无趣。尽快看到成品,至少尽快看到原型,是保持兴趣,继续深入和从事职业的有效动力。所以如果有可能有条件,在老鸟的指导下选择StoryBoard来进行快速构建(或者如果是单个人开发的话,可以不用考虑多个StoryBoard协作,就更容易),会是入门的好选择。而最新的教程和文档已经开始逐渐偏向StoryBoard,关于StoryBoard的问题在SO上关注度也会更高,这样在入门时会有更多的资料可以进行参考。

这并不是说不需要关心代码UI或者xib,因为使用StoryBoard的时候在只能使用代码以及自定义单个view时,还是不可避免地需要接触它们的。这里想给的一点建议就是,虽然你不依赖代码来进行UI制作,但是了解并掌握如何使用纯代码来从头构建UI还是非常必要的:包括从新建Window开始,到初始化ViewController,添加必要的view,设定它们的property,以及添加和处理它们的各种响应及responser链等内容。现在iOS开发入门非常容易,Xcode和xib/StoryBoard帮助开发者隐藏了太多的细节,但是很多时候如果你不明白underhood到底是些什么,为什么这些xib/StoryBoard会这样运作的话,经常会出现卡在一些很可笑的和初级的bug上找不着北,这其实会是对时间的巨大浪费,很不值得。

一些IB小技巧

最后分享一些IB使用上的小技巧作为结束吧。其中很多方法也可以用在StoryBoard上,所以在向我自己之前xib使用者生涯致敬的同时,也算是一点小的备忘总结吧。

同时添加多个outlet

在IB中,选中一个view并右键点击,将会出现灰色的HUD,可以在其上方便地拖拉或设定事件和outlet。你可以同时打开多个这样的面板来一次性添加所有outlet。右键点击面板,随便拖动一下面板,然后再打开另一个。你会发现前一个面板也留下来了,这样你就可以方便地进行拖拽设定了。

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的多个Outlet HUD

当然,对于成组和行为类似的IBOutlet,应该直接使用IBOutletCollection来进行处理会更方便。

可视化坐标距离

IB最烦人的问题就是对其。用代码的时候我们可以明确地指定x,y坐标,但是换到IB的时候我们更多的时候是靠拖拽UIView来布局。比如需要三个间隔相同的label,除了用强大的肉眼来估测距离是否相等以外,难道只能乖乖分别选中三个label,记下它们的坐标然后打开计算器来做加减法么?

显然不要那么笨,试试看选中一个label,然后按住option键并将鼠标移动到其他label上试试?你可以发现view之间的距离都以很容易理解的方式显示出来了。不仅是同层次的view,被选中view与其他层次的view之间的距离关系也可以同样显示。

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的显示View之间的距离

在一组view层次中进行选择

对于一些复杂的view层级关系,我们往往直接在IB中选择会比较困难。比如view相互覆盖时,我们很难甚至不能在编辑视图中选中底层的view。这时候一般的做法是打开左侧的view层级面板,一层层展开然后选择自己需要的view。其实我们也有更简单的方法:按住CmdShift,然后在需要选择的view上方按右键,就可以列出在点击位置上所有的view的列表。藉此就可以方便快速地选中想要的view了。

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的在编辑视图中选则底层view

添加辅助线

这么高大上的技巧必须放在最后啊…在左边的层级列表中双击某个view,然后Cmd+_或者Cmd+|即可在选中的view上添加一条水平或者垂直中心的辅助线。当然这个辅助线是可以随意移动的。如果干过设计的同学肯定明白这个的意义了,在之后的对其和设计变更的时候都有重要的参考价值。

代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的为IB添加辅助线

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
您什么时候应该使用复合索引与多个单列索引?您什么时候应该使用复合索引与多个单列索引?Apr 11, 2025 am 12:06 AM

在数据库优化中,应根据查询需求选择索引策略:1.当查询涉及多个列且条件顺序固定时,使用复合索引;2.当查询涉及多个列但条件顺序不固定时,使用多个单列索引。复合索引适用于优化多列查询,单列索引则适合单列查询。

如何识别和优化MySQL中的慢速查询? (慢查询日志,performance_schema)如何识别和优化MySQL中的慢速查询? (慢查询日志,performance_schema)Apr 10, 2025 am 09:36 AM

要优化MySQL慢查询,需使用slowquerylog和performance_schema:1.启用slowquerylog并设置阈值,记录慢查询;2.利用performance_schema分析查询执行细节,找出性能瓶颈并优化。

MySQL和SQL:开发人员的基本技能MySQL和SQL:开发人员的基本技能Apr 10, 2025 am 09:30 AM

MySQL和SQL是开发者必备技能。1.MySQL是开源的关系型数据库管理系统,SQL是用于管理和操作数据库的标准语言。2.MySQL通过高效的数据存储和检索功能支持多种存储引擎,SQL通过简单语句完成复杂数据操作。3.使用示例包括基本查询和高级查询,如按条件过滤和排序。4.常见错误包括语法错误和性能问题,可通过检查SQL语句和使用EXPLAIN命令优化。5.性能优化技巧包括使用索引、避免全表扫描、优化JOIN操作和提升代码可读性。

描述MySQL异步主奴隶复制过程。描述MySQL异步主奴隶复制过程。Apr 10, 2025 am 09:30 AM

MySQL异步主从复制通过binlog实现数据同步,提升读性能和高可用性。1)主服务器记录变更到binlog;2)从服务器通过I/O线程读取binlog;3)从服务器的SQL线程应用binlog同步数据。

mysql:简单的概念,用于轻松学习mysql:简单的概念,用于轻松学习Apr 10, 2025 am 09:29 AM

MySQL是一个开源的关系型数据库管理系统。1)创建数据库和表:使用CREATEDATABASE和CREATETABLE命令。2)基本操作:INSERT、UPDATE、DELETE和SELECT。3)高级操作:JOIN、子查询和事务处理。4)调试技巧:检查语法、数据类型和权限。5)优化建议:使用索引、避免SELECT*和使用事务。

MySQL:数据库的用户友好介绍MySQL:数据库的用户友好介绍Apr 10, 2025 am 09:27 AM

MySQL的安装和基本操作包括:1.下载并安装MySQL,设置根用户密码;2.使用SQL命令创建数据库和表,如CREATEDATABASE和CREATETABLE;3.执行CRUD操作,使用INSERT,SELECT,UPDATE,DELETE命令;4.创建索引和存储过程以优化性能和实现复杂逻辑。通过这些步骤,你可以从零开始构建和管理MySQL数据库。

InnoDB缓冲池如何工作,为什么对性能至关重要?InnoDB缓冲池如何工作,为什么对性能至关重要?Apr 09, 2025 am 12:12 AM

InnoDBBufferPool通过将数据和索引页加载到内存中来提升MySQL数据库的性能。1)数据页加载到BufferPool中,减少磁盘I/O。2)脏页被标记并定期刷新到磁盘。3)LRU算法管理数据页淘汰。4)预读机制提前加载可能需要的数据页。

MySQL:初学者的数据管理易用性MySQL:初学者的数据管理易用性Apr 09, 2025 am 12:07 AM

MySQL适合初学者使用,因为它安装简单、功能强大且易于管理数据。1.安装和配置简单,适用于多种操作系统。2.支持基本操作如创建数据库和表、插入、查询、更新和删除数据。3.提供高级功能如JOIN操作和子查询。4.可以通过索引、查询优化和分表分区来提升性能。5.支持备份、恢复和安全措施,确保数据的安全和一致性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器