IOS入门之StoryBoard

概述

在iOS的发展历程中,IOS开发经历了三种主要流派:使用代码手写UI及布局;使用单个xib文件组织viewController或者view;使用StoryBoard来通过单个或很少的几个文件构建全部UI。而在最近几年的开发中,苹果对 Storyboard 的开发力度也不断增强,添加了更多功能和特性,大大方便了界面的开发、适配以及提升代码性能。

我们来看看三种方式的主要区别:

手写页面和逻辑代码

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

XIB

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

但是xib最大的问题在于xib中的设置往往并非最终设置,在代码中你将有机会覆盖你在xib文件中进行的UI设计.在不同的地方对同一个属性进行设置,这在之后的维护中将会是噩梦般的存在.因为其实IB还是有所局限的,它没有逻辑判断,也很难在运行时进行配置。

StoryBoard

简单理解来说,可以把StoryBoard看做是一组viewController对应的xib,以及它们之间的转换方式的集合.在StoryBoard中不仅可以看到每个ViewController的布局样式,也可以明确地知道各个ViewController之间的转换关系。

现在StoryBoard面临的最大问题就是多人协作.因为所有的UI都定义在一个文件中,因此很多开发者个人或企业的技术负责人认为StoryBoard是无法进行协作开发的,其实这更多的是一种对StoryBoard的陌生所造成的误解.虽然Apple并没有在WWDC明确提及,但是没有人规定整个项目只能有一个StoryBoard文件。

现在会有一些对于StoryBoard性能上的担忧. 因为相对于单个xib来说,StoryBoard文件往往更大,加载速度也相应变慢。不过苹果正在这方面做大的改进。

StoryBoard本质

StoryBoard 的本质是一个 XML 文件,描述了若干窗体、组件、Auto Layout 约束等关键信息。示例文件

https://github.com/johnlui/AutoLayout/blob/master/AutoLayout/Base.lproj/Main.storyboard

Storyboard 最大的好处就是把界面和代码分离,如同 Web 开发中 CSS 描述界面,HTML 描述内容,JavaScript 描述行为一样,能让代码变得更清晰易读,界面的行为以及相互的逻辑也变得更直观。

使用 StoryBoard 的 iOS 项目均以初始化 StoryBoard 文件作为整个程序的初始化入口,UIViewController 类是由于被 StoryBoard 绑定而初始化,从而启动app并运行。

StoryBoard使用

1,在ARC下创建StoryBoard文件

2,一般情况下, 程序都是写在Xcode默认的Main.storyboard里面,也可以自定义storyboard到相应的模块。

3,创建自定义StoryBoard后, 记得要修改Main Interface为自己定义的StoryBoard

注:大家记得主界面这里Is Initial View Controller要记得勾选, 这样红圈里面的小箭头才会出现, 表示程序运行从这个界面开始。

Storyboard下Xcode右下角, 大家在下方Filter搜索栏可搜索自己想要添加的控件类型, 并拖拽至屏幕中央的View Controller上。这和其他的界面开发软件都差不多。

当然也可以对控件的属性进行编辑。

我想看到这里大家都不禁想跃跃欲试了吧。入门教程就讲到这里,接下来说说如何写一套代码和页面分离的ios高质量代码规范。

Storyboard 使用规范

Storyboard 分离规范

除非是单页面应用,在大多数情况下,使用单一 Storyboard 往往是不可行的,因为每个 App 通常由各种不一样的复杂模块构成,每当里面的一个元素的属性或位置产生变化,都会导致整个 Storyboard 文件产生多处代码的变动。尤其在 Git 代码版本的控制下,处理分支合并产生的冲突会变得非常麻烦。

所以,把 Storyboard 分离有一个 1 - 5 原则:把每一个 Storyboard 尽量分离成一个人处理范围,每一个 Storyboard 尽量控制少于 5 个 View。例如,设置页面、注册页面、信息详情页、发布页面等,基本上只需要一人就能负责,而且页面大多数情况下都会少于 5 个 View (如果超过 5 个的时候,就可以考虑是不是在里面可以考虑把它们再分离)。把该模块的所有 View 都放在同一个的 Storyboard 文件里进行管理。这样就能大大减少相互冲突的情况,并且 Storyboard 的读取和渲染性能也比单独打开一个大型 Storyboard 的要快不少。

比如我们把项目的Storyboard 全部放在一个文件维护。

Storyboard 命名规范

一套优秀的代码项目,变量的命名,代码的语言风格都会有一套对应的规范,以便于成员之间进行沟通和开发。在 Storyboard 里面,各种的元素标识同样地也需要一套命名的规范,以便于开发之间的沟通。。例如:albumCollectionViewController -> Album Collection View Controller,passwordLabel -> Password Label。这个可以根据各个团队和行业的规范自己作一个命名规范。

Storyboard 界面规范

Storyboard 除了作为 UI 界面的构建语言之外,还担当着界面预览的角色。界面规范有一个原则,就是当把 Storyboard 展示给其他人的时候,尽量做到能让别人一看就知道这个 Storyboard 是干什么的,界面之间的逻辑是怎样的,界面大致的效果是如何的。

布局规范

Xcode 本身就有就有布局辅助线提示的功能,当进行拖动的时候,可以根据提示的辅助线来进行 View 或控件之间的对齐,合理利用此特性能方便我们调整出整齐的布局。

View 和 View 之间的摆放,可以遵循从左往右,从上到下的原则,进行逻辑排列。因为在 Storyboard 里 View 之间的连线算法都是从 View 的右边缘出发,到另外一个 View 的左边缘结束,如果调转了,就会出现很多交叉的连线,让界面看起来很乱。

在 Xcode 7 里,新增加了 Storyboard Reference 控件(虽然是在 iOS 9 新增加的,但 iOS 8 也可用)。合理使用此控件,能让 Storyboard 描述出 View 与其它 Storyboard 的跳转逻辑。并且可以通过 Segue 来进行 View 之间的数据传递,统一规范 View 之间跳转的代码,让逻辑更清晰。

所以我们在写布局的时候尽量预览下实际效果。

初学StoryBoard的一些bug

问题1

初学 iOS 开发的时候,如果使用了 StoryBoard,大家可能遇到过这个奇怪的 bug,比如页面全黑。

APP 在启动以后,会先启动主 StoryBoard,这时候一定要记得主勾选Is Initial View Controller这个选项。

问题2

如果我们在写多个StoryBoard的时候,对于初学者经常回初学下面的情况。

这个警告的意思是,这个窗体没有入口,无法被触达。解决方式有两种:

1,设置为该 StoryBoard 的初始窗体:

给该窗体设置一个 StoryBoard ID:

然后我们就可以在代码中写跳转逻辑了。

主界面

let vc = UIStoryboard(name: "Second", bundle: nil).instantiateInitialViewController() as! UIViewController
self.navigationController?.pushViewController(vc, animated: true)

第二界面

let vc = UIStoryboard(name: "Second", bundle: nil).instantiateViewControllerWithIdentifier("First") as! UIViewController
self.navigationController?.pushViewController(vc, animated: true)

当然,也可以用 self.presentViewController 调用他们。

时间: 2024-10-11 23:51:04

IOS入门之StoryBoard的相关文章

[IOS初学]ios 第一篇 storyboard 与viewcontroller的关系

学习了一下ios,把一个基本的概念搞清楚了,在android或者wp中,大家基本都是习惯与一个画面场景代表一个类,新建场景的时候自动新建了类,但在ios中使用了storyboard之后发现,在storyboard中新加入了一个新的viewcontroller之后,就不知道在哪里写代码来控制这个viewcontroller,因为默认初始化创建这个app的时候自动带了一个viewcontroller. 对于我来说这个一开始就没搞清楚,就像下面这个图,建立了一个新的viewcontroller直接在s

iOS基础 02 StoryBoard 故事板文件

iOS基础 02 StoryBoard 故事板文件 目录: 1. 故事板的导航特点 2. 故事板中的Scene和Segue 3. 本文最后 在上篇HelloWorld工程中有一个Main.storyboard文件,它被称为“故事板”(storyboard)文件. 它可以描述应用中有哪些界面,界面有哪些控件以及它们的事件. 此外,故事板还能描述界面之间是如何导航的. 1. 故事板的导航特点 在包含多个视图控制器的情况下,采用故事板管理比较方便,而且故事板还可以描述界面之间的导航关系. 下面我们举例

ios入门篇 -hello Word(1)

温馨提示:,如果您使用移动终端阅读本篇文章,请连接wifi的情况下阅读,里面有大量图片,以免造成您不必要的损失. 潜水博客园很多年,闲来无事,聊一下自己的经历,语文不好(如有什么错别字,请您在下评论)望您谅解,没有上过什么学的. 博主介绍   2010 入园博客园学习.net,只是为后面做.net开发做铺垫.   2011-2012年 2年一直做.net开发(一直处于打杂状态),由于一直打杂状态,萌发转行做ios的状态.   2013-至今 做过4-5个ios方面的app(现阶段处于打杂状态).

iOS入门学习详解

本文来源:http://www.zretc.com/technologyDetail/447.html ios学习起来并没有想象中的那么困难,只不过是你想要开发ios的话,成本相对比较高吧,在windows里面装虚拟机的时代我是体验过的,那个开发起来简直就是苦不堪言啊,那个宕机的速度真是分分钟的事,reset已经被用的如火纯清了,这样你就需要一台mac,有了mac还不够,总不能全部用模拟器开发吧,像定位啊之类的,还是需要实机来测试的,模拟器跟实机的差别还是挺大的.当然也没必要开发之前就买一个帐号

记录IOS入门的过程

先说点私话,再进入正题吧,顺便抒发下情绪.公司传统业务不景气,而互联网正如火如荼,无奈被逼上梁山,开始学起了IOS编程,后来想想闲着也是闲着就学习学习呗,无奈公司确实不希望投入了,不愿意提供苹果电脑,只能整个黑苹果玩耍了,对照着已经实现的andriod版本客户端,一步步学习实现吧.虽然做得不完美,虽然现在学习IOS有点晚了,起码也算入了门吧.不过在这个过程中,实在没有时间和心思去总结,去看知识点,知道拷贝代码然后修改修改能否实现出效果就可以了.利用快十一放假无心编程,就静下心好好修补下理论知识吧

iOS学习之Storyboard中的UIScrollView使用自动布局

在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一下我的理解,在故事板或xib中,ScrollView是根据其下面的一个View的大小来确定ContentSize的大小. 看一下效果 1. 创建一个项目,拖拽一个ScrollView到故事板中,如下图 2. 选中ScrollView,添加约束. 3. 拖拽一个View到ScrollView上, 然后

IOS开发之Storyboard应用

制作一个Tab类型的应用 制作一个表格视图 原型表格单元 设计自定义的原型单元格 为原型单元格设置子类 故事版(Storyboard)是一个能够节省你很多设计手机App界面时间的新特性,下面,为了简明的说明Storyboard的效果,我贴上本教程所完成的Storyboard的截图:   现在,你就可以清楚的看到这个应用究竟是干些什么的,也可以清楚的看到其中的各种关系,这就是Storyboard的强大之处了.如果你要制作一个页面很 多很复杂的App,Storyboard可以帮助你解决写很多重复的跳

IOS入门学习随笔

我的IOS学习之路并非起于大学期间,而是毕业后所在公司有相关的开发业务,所以我在今年10月份开始了我的IOS之旅. 在今年6月份苹果公司推出了全新的IOS开发语言Swift,这是件让IOS程序员兴奋的事件.因为Swift不仅有新的开发体验,更可以说这次让中国程序员有了一次和世界同步的机会.在我开始接触IOS的时候,我一直在犹豫是直接从ObjectC开始啃还是直接搭上Swift这班顺风车.在我考虑了学习的渐进性和公司实际开发任务之后,我决定从ObjectC开始我的IOS学习之路. 在确定了学习方向

Xamarin.iOS学习一:Hello.iOS 入门学习

介绍使用Xamarin开发iOS 在这两个章节里面,我们会使用Xamarin Studio 或者Visual Studio 创建第一个Xamarin.iOS程序并且去理解使用Xamarin开发iOS程序的基础概念.接着我们将会介绍创建和部署iOS程序所需要的工具.概念和步骤. Hello.iOS 快速入门 首先我们将创建一个让用户输入字母和数字并且可以拨打号码的应用程序,最终效果图如下: