首页 > os > ios > > 正文

详iOS中xib与storyboard原理,与Android界面布局的异同

发布人:zhoulujun@live.cn    点击:

实现ios界面总的来说,有三种方式传统的是纯代码创建、xib创建、storyboard近年来,苹果官网一直推荐用storyboard管理项目界面,最新的xcod

实现ios界面总的来说,有三种方式

传统的是纯代码创建xib创建storyboard

近年来,苹果官网一直推荐用storyboard管理项目界面,最新的xcode 创建的project也是默认为storyboard方式了。Storyboard是IOS5以后新增的内容,从名字上看,是以故事面板的形式来展现界面间的逻辑关系

相对于Android开发而已,界面的管理就两种方式,一种是纯代码,另外一种技术XML布 局方式。其实ios与Android的界面管理相同点挺多的,下面就分开说说。



一、iOS中xib与storyboard显示原理

在iOS中主要的布置界面的方式有3种:代码,xib,storyboard。

1. 代码

代码布置界面是万能的,但通常很复杂。布置一个简单的界面可能需要很多行代码,因此十分繁琐。

下面为创建一个按钮的代码,最少也要3行:


UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];  
    btn.center = CGPointMake(100, 100);  
    [self.view addSubview:btn];

优点:可以灵活地适应各种环境,无论是什么ios版本,或者iPhone,ipad,都可以动态地适应各种场景。

缺点:代码量大,构建控件麻烦,点击的监听函数和delegate要自己手动创建。

2. xib

xib适合布置小块界面,也可以用来做单个界面。属于拖控件型,只需要写加载xib的代码。

下图为用文本编辑器打开xib文件的结果:

ios开发

可以看到,xib本质也是xml文件。

<document>标签内就是xib要显示的内容。

可以看到<view>标签内就要显示的内容。该xib只显示了一个带颜色的空白view。

xib的原理就是将xml文件解析出来,找到相应的view,转换成代码,然后创建对象并显示。

形如:

UIView *view = [[UIView alloc] init];  
   view.frame = CGRectMake(0.0, 0.0, 320, 480);

 xib创建视图,就如同Android的XML一样,但是它比Android的XML方式还强大。可以直接设置控件的监听函数与delegate,控件的各种属性基本都能设置。

优点:每个viewcontroller对应单独的xib,可以更加方便单独管理,项目也方便多人一起开发,改动视图方便,不用全局改动。

缺点:项目大的话,xib文件过多,不容易统一管理。跳转只能在代码实现,比较混乱。



3.storyboard

Storyboard是什么

用 XCode 新建一个 Project 后,系统会自动添加一个叫 Main.storyboard 的文件,然后大部分的UI,包括页面的跳转都可以在这个 Storyboard 中构建。下图是一个典型的工程目录结构。

iOS xcode iphone开发

Storyboard 的中文意思是情节串联图板,顾名思义,Storyboard 会把一些列的 Scene(情节)串联起来,构成一个 Story。

这个概念应用到APP开发中也比较容易理解:

每个页面就相当于一个Scene,Storyboard 把这些页面串联起来之后,就形成了一个 Story,也就是我们的 APP。

严格的定义可参考官方解释:

A storyboard is a visual representation of the app’s user interface, showing screens of content and the transitions between them. You use storyboards to lay out the flow — or story — that drives your app.

概念比较简单,用法当然也非常简单,因为 Storyboard 是一个 visual representation,所以打开 Main.storyboard 之后就可以进行WYSIWYG的编辑,如果一个 APP 包含多个 screens of content,那么它的 Storyboard 可能会如下所示: 



图中可以看出,每个 screen of content 可以呈现可视化的控件(Control),连线则表示 transition,它们作为一个整体构成了一个 flow / story。


一个 Storyboard 可以完整地展现出一个 APP,包括它的页面跳转和大部分的UI元素。


所以,storyboard适合做大界面的跳转等,而且丰富的viewController使得做减免变得非常简单。

同样,将storyboard用文本编辑器打开,可看到如下:

20140618205946921.png

本质上还是xml文件。

<objects>标签下就是要创建的界面。这里用到了tabBarController作为根视图控制器。

tabBarController下指向4个其他视图控制器。

storyboard的原理也是将xml文件解析出来,找到相应的控制器等,转换成代码,然后创建对象并显示。和xib原理一样。


虽然 Storyboard 的功能已经很强大,但是也有一个不可回避的问题,如果 APP 的页面比较多,势必会导致数据的可视化变得比较复杂,当然如果你有一个很大的显示器,可以另当别论。相信 Apple 会逐渐解决这个交互问题。


优点:所有xib集中在一个storyboard文件中,管理方便,View Controller跳转很轻松就可以实现,大大减少代码量。

缺点:由于所有xib都集中在一个文件中,对于一些大型项目,分工起来就比较困难,不好分工,而且采用storyboard方式对系统资源的耗费比代码和xib方式要大。

二、Android与iOS布局显示的比较

众所周知,Android中布局基本完全是用xml完成,即使有一个所谓的可以拖控件的地方,也只能用粗制滥造来形如。

而iOS封装的可谓相当出色,要是不用文本编辑器打开,很多人可能不知道这是用xml文件的方式来显示布局的。

关于基本原理:Android与iOS基本布局显示原理是一样的,都将视图与模型数据分离,都遵循MVC的设计模式。


参考文章:

http://blog.csdn.net/xn4545945/article/details/32171353

http://blog.sina.com.cn/s/blog_a61db20d0102wt46.html

http://blog.csdn.net/feelang/article/details/46126237