如何使用storyboard和xib

Xib和storyboard都可以用来描述软件界面,都用Interface Builder工具来编辑.

两者的不同点:

1> Xib是轻量级的,用来描述局部的UI界面;

2> Storyboard是重量级的,用来描述整个软件的多个界面,并且能展示多个界面之间的跳转关系.

Xib文件的加载:

方法一:

?


1

NSArray *objs =[[NSBundle mainBundle] loadNibNamed:@"JNAppView"owner:nil options:nil];

这个方法会创建Xib中得所有对象,并且将对象按顺序放到objs数组中;

方法二(不常用):

?


1

2

UINib *nib = [UINib nibWithNibName:@"JNAppView" bundle:[NSBundle mainBundle]];

NSArray *objs =[nib instantiateWithOwner:nil options:nil];

bundle的参数可以为nil,默认就是main bundle

注意:NSBundle

1> 一个NSBundle代表一个文件夹,利用NSBundle能访问对应的文件夹

2> 利用mainBundle就可以访问软件资源包中的任何资源

3> 模拟器应用程序的安装路径:

/Users/aplle/资源库/Application Support/iPhone Simulator/7.1/Applications

1.Xib的创建

1.和UIViewController一起创建

new ==>file==>cocoa Touch  (Object_Class)==>VCView(继承与UIViewcontroller) 把also creat xib复选框选中

2.单独创建一个xib文件

new ==>file==>IOS   User Interface==>view 选phone

绑定一个viewController

选中files Ower  选择继承的类 同时把view添加到视图中

对应的图标是第三个,跟第六个

3.如何解除属性与xib的绑定,第六个按钮,按X刻印解除绑定

4.生成的函数代码,UI没有删除,运行程序会崩溃.也要在xib把绑定文件给删除

?在开发阶段,面向开发者的是xib文件; 当把应用装到手机上时,xib文件就会转为nib文件 ?

使用xib封装一个自定义view的步骤:

1> 新建一个继承UIView的自定义view,假设类名叫做(JNAppView)

2> 新建一个JNAppView.xib文件来描述JNAppView内部的结构

3> 修改UIView的类型为JNAppView真是类型

4> 将内部的子控件跟JNAppView进行属性连线

5> JNAppView提供一个模型属性

6> 重写模型属性的set方法,因为在set方法中可以拿到外界传递的模型数据

7> 把模型数据拆开,分别设置数据到对应的子控件中

8> 补充:提供一个创建JNAppView的类方法,将读取xib文件的代码屏蔽起来

关于使用storyboard

参考

一个Demo展示Storyboard的强大?

http://www.cocoachina.com/ios/20150330/11440.html

IO7使用storyboard?

http://www.cocoachina.com/industry/20131213/7537.html

Xcode6使用storyboard在TabBarController上建立三个以上Item?

http://blog.csdn.net/nogodoss/article/details/39575759

如何装载Storyboard中的ViewController?

http://blog.csdn.net/ztp800201/article/details/8987005

已经约束好的UIScrollView,如何动态的改变其contentSize?

http://www.cocoachina.com/ios/20150104/10810.html

错误现象:

1> XCODE 6.1 在使用storyboard时,报错:Failed to instantiate the default view controller for UIMainStoryboardFile ‘MainStoryboard‘ - perhaps the designated entry point
is not set?

原因分析:在StoryBoard中没有一个view controller设置了Initial Scene。

解决方案:在Storyboard中,选择一个view conroller作为story board的第一启动界面

2>设置约束的规则,不能过约束,也不能少约束,过约束会报警,少约束位置会跑

对于一个UI,要确定它的位置和大小,一般两种坐标系,一种相对于父视图,另一个相对于其他控件,当然这两种约束体系可以同时存在

设置约束的要领是要保证父视图建立好完全约束,然后再子视图

关于使用xib,storyboard,纯代码的到底使用哪种方式呢?

OS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系。而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:

1>使用代码手写UI及布局;

2>使用单个xib文件组织viewController或者view;

3>使用StoryBoard来通过单个或很少的几个(关于这点稍后会进行展开)文件构建全部UI。

三种方式各有优劣,所以也各有自己最适用的场合,而不会有完全的孰优孰劣。

对于初学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上找不着北,这其实会是对时间的巨大浪费,很不值得。

时间: 2024-10-12 19:20:34

如何使用storyboard和xib的相关文章

自定义不等高cell—storyBoard或xib自定义不等高cell

1.iOS8之后利用storyBoard或者xib自定义不等高cell: 对比自定义等高cell,需要几个额外的步骤(iOS8开始才支持) 添加子控件和contentView(cell的contentView)之间的间距约束(需要代码控制约束) 设置tableViewCell的真实行高和估算行高 // 以下两行代码就被苹果成为self0sizing技术,可惜只能在iOS8及其之后应用 // 告诉tableView所有cell的真实高度是自动计算(根据设置的约束来计算) self.tableVie

[BS-13] 创建和注册UITableViewCell及Storyboard和Xib区别

创建和注册UITableViewCell及Storyboard和Xib区别 // 界面创建完成被调用 - (void)viewDidLoad { [super viewDidLoad]; /** 如果采用如下3种方式,为tableView注册了原形Cell,系统会用注册的cell作为显示用的cell和可重用cell,一旦缓冲区中不存在可重用cell,系统会使用注册的原形Cell新实例化一个Cell供程序使用! 因此只要注册了原形Cell,创建cell时就不再需要cell == nil的判断了.

iOS之分别使用代码和storyboard、xib为控件设置圆角(以按钮为例)

首先我们看一下代码是如何给按钮设置圆角的: 我们再来看看如何在storyboard或xib中给按钮设置圆角: 1.在storyboard或xib中添加按钮后,设置标题和背景色,做好约束: 2.点击 Show the identity inspector 按钮:按钮位置如下图所示: 3.然后在User Defined Runtime Attributes 栏为按钮添加layer.cornerRadius属性,类型为Number,根据需求设置一个Value值.如下图所示: 4.到这里基本完成了对按钮

storyboard或者Xib给View设置边框属性(颜色,宽度,圆角)

纯代码设置Button或者其他View的边框属性 例: UIView* view = [[UIView alloc]init]; view.layer.borderWidth = 2.0; view.layer.masksToBounds = YES; view.layer.cornerRadius = 5.0; view.layer.borderColor = [UIColorredColor].CGColor; 以下提供自定义控件的时候,使用Xib,或者用sb来进行布局,那么这时候怎么来使用

软件界面---文件--- storyboard和xib的区别

1.storyboard:描述软件界面,重量级,一般描述整个软件的所有界面 2.Xib:描述软件界面,轻量级,一般用来描述局部界面(xib的本质---转化为代码) storyboard和xib都是描述软件界面的文件,storyboard一般描述整个软件界面,xib用来描述局部界面,当发现storyboard上有许多相同的子视图块的时候,用局部的xib描述子视图,当读取xib文件的时候,会读取xib文件中的所有的对象,用数组接收. NSBundle *bundle = [NSBundle main

Storyboard、xib中的UIScrollView使用autolayout,使其能够滚动

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

加载storyboard和xib文件

// 加载storyboard UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Two" bundle:nil]; // 创建storyboard里面灰色的控制器 //找到shtoryboard里面设置的初始控制器 // UIViewController *vc = [storyboard instantiateInitialViewController]; // 从storyboard里面找出绑定标识的控制器

iOS UICollectionView的使用(用storyboard和xib创建)

1. 在storyboard中,拖出1个UICollectionViewController 2. 新建file--Cocoa Touch Class,继承自UICollectionViewController,假设名字是CollectionDemo 3. 在storyboard, 把刚才拖出来的UICollectionViewController的class改成CollectionDemo 4. 在 CollectionDemo.m 中实现,数据源方法 - (NSInteger)collect

storyboard中xib文件不加载问题

今天在用Xcode6自定义视图控制器时附带了一个XIB文件,然后把自定义的类绑定到storyboard的ViewController,如图所示 , 发现RootViewController对应的xib文件RootViewController.xib并没有执行,原来要把从storyboard拖出来的ViewController中自带的view删掉才行.如图: