简谈xib storyboard的使用

引言

在iOS开发过程中,根据项目需求,有很多情况下使用xib和storyboard会更加的方便。

xib针对的是单独的一个UIViewController或者UIView所对应View的界面布局。而storyboard所针对的是n多个UIViewController的界面布局以及UIViewController之间的跳转关系,因此,在新建的空xib中,拖拉的第一个容器类应该是View而不是ViewController;但是在storyboard当中,拖拉的则应该是ViewController,理清了这层关系,下面关于xib和storyboard的使用则进了一大步。

xib的使用

xib的使用主要包含两类情况,一种是xib绑定UIView,另一种是xib绑定UIViewController,两种方式,略有不同,大体上还都是一样的原理。

一. xib绑定UIViewController

一般情况下,在新建UIViewController的时候,会有一个复选框勾选来表示在新建UIViewController的时候是否要同时也建一个xib。如果需要xib的话,直接勾选即可。如图1所示。

图 1

接下来主要说一下xib和UIViewController分别新建并绑定的情况。

1. 新建工程(这个就不再细说了)

2. 在新建的工程当中,直接 command+n 仅新建UIViewController。如图2所示。

图 2

3. 接下来,直接创建xib文件(如图3、图4),xib文件可以和上面的UIViewController名字一样,也可以取不一样的名字,不过为了编码规范,为了方便以后代码的维护等工作,最好是起和UIViewController类名一样的名字。


图 3


图 4

4. 由于创建的是一个空的xib,所以要往里面拖一个View(要说明一点,在storyboard当中是一对多的关系,并且在storyboard当中是拖的Controller。在xib当中应该是拖View)。如图5所示。

图 5

5. 接下来至关重要的任务就是绑定UIViewController和xib。在xib中有一个File‘s Owner,首先要做的就是让自己新建的HmTestController和xib绑定,再者就是和新拖的View拖线绑定。如图6、图7所示。

图 6
图 7

6. 以上的步骤就已经完成了xib和UIViewController的绑定,接下来就跳转加载当前页了,代码如图8.1所示。如果ViewController的名字和xib文件的名字一样,也可以使用图8.2所示的代码。

图 8.1
图 8.2

有一点要说明的是关于- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil;方法,点击去可见详细解释如图8.3所示。

OMG!一大堆英文,看得懂吗?晕晕乎乎的。不过还是要借助各种手段耐心看,理解到位。总体来说,上面的绿色英文的意思是说:如果你的subclass的一个UIViewController不管是否存在一个与之对应的NIB,都要调用[super initWithNibName:bundle]这个方法,这个方法将会在以下两种情况下调用:

* 显示调用, 指定一个nib名称,系统会去找指定的nib

* 在父类的Init方法中被调用,如果这种情况,两个参数都会是nil,系统会去找和你自定以的UIViewController相同名字的nib

如果系统找到nib文件,就会把nib文件中的内容加载进来,有一点需要解释,initWithNibName:bundle方法并不会加载nib, 当UIViewController的view属性第一次被使用的时候,系统就会调用UIViewController中的loadView方法,在这个方法中会加载nib文件。

如此说来,就可以知道在图8.1中NibName参数即便是传一个nil,该xib文件还同样是会被加载的。所以也就可以理解为什么使用图8.2中的代码也可以被加载了。

图 8.3

二. xib绑定UIView

xib绑定UIView的情况在实际的应用开发过程中也是非常实用和常用的。比如在应用开发的过程中,某几个页面都需要使用到的一些元素,在Xcode中自带的控件中并没有,我们就可以自定义一些控件,依次来满足需求。实现自定义控件可以实用纯代码布局,使用纯代码布局对于复杂的自定义控件是很好的选择,并且使用纯代码自定义控件对于后期维护也是很方便的。除此之外,我们为了快速开发,也可以使用xib来自定义控件,在Xcode当中,新建UIView的时候是没有选项可以同时新建xib文件的。所以就需要UIView和xib的绑定。

接下来就说说UIView和xib是如何进行绑定的

1. 同样的新建项目,在此不过多赘述。

2. command + n  新建UIView。如图9所示。

图 9

3. 新建xib文件。如图10所示。

图 10

4. 既然是自定义控件,这个控件也是基于UIView的,所以在空的xib文件中要拖拉的是UIView,而不是UIViewController,这点谨记。如图11。

图 11

5. 在View的size项改为Freeform之后,就可以根据实际需求随意改变View的大小。最后就可以进行UIView和xib文件的绑定。

图 12

6. 调用TestView。代码如图13所示。

图 13

storyboard的使用

storyboard所代表的不仅仅是单独一个UIViewController,而是多个ViewController以及其关系。下面就来介绍一下如何新建一个storyboard并使用。

1. 老样子,新建项目。

2. command + n 新建storyboard文件。如图14、图15所示。

图 14
图 15

3. 新建的storyboard当中为空,通常情况下,我们所建立的页面当中都是包含UINavigationController的,所以我们要先拖一个NavigationController(也可以拖一个ViewController,当然要根据实际需求来了,这里仅仅是以拖NavigationController为例)。如图16所示。

图 16

关于图中所说的,为什么要勾选is initial view controller选项呢? 根据字面意思,就是说:是否要把当前选中的Controller作为初始视图控制器,因为storyboard当中将会有多个Controller,在系统加载的时候,肯定要指定一个初始控制器。

除此之外,还要为storyboard设置一个id以此来辨别不同的storyboard。如图17所示。

图 17

4. 接下来再看拖出来的NavigationController的第二个Controller,他是一个一个带有TableView的RootViewController,在很多情况下并不会符合我们的需求,一个字,删!(选中第二个Controller,按delete删除)删除掉第二个Controller,再拖拉一个符合需求的Controller,并将其设置为RootViewController。这里以ViewController为例来说明了。如图18所示。

图 18

除此之外,还要为RootViewController设置一个id来辨别。如图19所示。

图 19

5. 接下来在拖两个ViewController VC1 和 VC 2,并且在rootviewcontroller当中拖两个button VC1 和 VC2,点击按钮VC1跳转到VC1界面,点击按钮VC2跳转到VC2界面。如图20所示。

图 20

6. 全部设置好以后的效果图如图21所示。

图 21

7. 全部设置完成以后,就要能够加载storyboard并展示在storyboard上的所有设置。如图22所示为加载storyboard的代码。

图 22

以上的代码我是写在一个按钮事件当中的,不是在程序启动的时候就加载这个storyboard的。

关于storyboard的讲述到此为止。

总结

以上就是关于xib和storyboard的部分使用介绍,在具体的项目当中可以视具体情况来选择是使用xib还是storyboard。不论使用哪种方法进行开发,最终的目的就是为了开发更方便,更快速,更利于项目的后期维护和迭代更新。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容