• home > OS > IOS > Develop >

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

    Author:[email protected] Date:

    实现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


    转载本站文章《详iOS中xib与storyboard原理,与Android界面布局的异同》,
    请注明出处:https://www.zhoulujun.cn/html/OS/IOS/IOS-Develop/2017_0330_7969.html