UI -- Xib界面

最新推荐文章于 2020-06-12 17:43:29 发布

毛利叔叔的叔叔

最新推荐文章于 2020-06-12 17:43:29 发布

阅读量1.1k

点赞数

分类专栏： UI

UI 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

iPhone开发学习笔记001——Xib界面上的控件与代码的相互关联方法

NIB 和XIB 的区别

NIB 和 XIB 都是 Interface Builder 的图形界面设计文档。引用《Cocoa Programming for Mac OSX》一书的说法，Interface Builder 把窗口、菜单栏以及窗口上的各种控件的对象都“冻结”在了一个 NIB文档里面了；程序运行时，这些对象将会“苏醒”。

在终端下我们可以看到，NIB 其实是一个目录。它里面有两个也是后缀为 NIB 的文件：designable.nib 和 keyedobjects.nib。前者是一个 XML 文档，而后者则是一个二进制文件。Interface Builder 3 之后，引入了新的文档格式：XIB。它是单一的 XML 文档，也就是一个纯文本文件。纯文本文件的好处是显而易见的。嗯，就是便于源代码版本管理。现在最新版本的 Xcode 在创建项目时，已经默认使用 XIB 格式的文档了。

不论在 Interface Builder 中选择的是 NIB 还是 XIB 格式，Xcode 编译后都将得到一个供程序运行时使用的经过编译的 NIB 文件。

(注：环境Mac OS X Lion 10.7.3 + Xcode 4.2.1 + iOS SDK 5.0.)
比如工程中添加了一个UIViewController的sub class，新建的时候选中“With XIB for user interface”，则新建完成会同时生成三个文件：xxx.h, xxx.m, xxx.xib（前期也可是*.nib，xib和nib都指UI源文件，后来苹果统一用xib后缀名了）。
xxx.h默认内容：
#import <UIKit/UIKit.h>
@interface xxx : UIViewController
@end

xxx.m默认内容：
除了工程自动添加的接口，其它的任何内容都没有。
*.xib默认有一个view，这个就是UIViewController的默认view，也是其它的任何子view都没有添加. 此时从Xcode的Object Library中拖两个控件到该view:一个label，一个button.
最后如下图：

此后在xxx.h中也添加一个UILabel和一个UIButton，并且做为属性。此时会发现Xcode自动在属性的定义旁边生成了两个用于连接的小圆标志，如下图：

可以看到上面对应的成员变量注释掉了，其实在以前的老版本上面是必须要写上的，表示对应的@property和@synthesize生成的属性访问器getter setter方法操作的是这两个成员变量。后期的版本成员变量可以不用再这样写了。即：
（1）以前的版本：

头文件：
@interface xxx :UIViewController {
UILabel *label;
UIButton *button;
}

@property (nonatomic,retain)IBOutletUILabel *label;
@property (nonatomic,retain)IBOutletUIButton *button;
@end

*.m源文件：
@implementation xxx
@synthesize label;
@synthesize button;
。。。
（2）Xcode 4.2的版本：

头文件：
@interface xxx : UIViewController {
// UILabel *label;
// UIButton *button;
}

@property (nonatomic,retain)IBOutlet UILabel *label;
@property (nonatomic,retain)IBOutlet UIButton *button;
@end

*.m源文件：
@implementation xxx
@synthesize label = _label;
@synthesize button = _button;
。。。
后来的版本表示属性访问方法默认操作的是_lable和_button成员变量。头文件中省写了，当然*.m中也还是可以像以前那样写，不用在后面添加=_label和=_button也没有任何问题，应该是编译器默认作处理了。细节没多追究。

现在源代码中有label和button，对应的xib文件中也有label和button，现在想把它们对应联系起来，毕竟很多时候一些动态的效果是需要代码来实现的。现在介绍方法：

方法：“拖拽”
如下图：

注意右上脚Editor位置，将视图打到assistant editor，使显示方式变成上面左边是xxx.xib,右边是xxx.h，此时点中右侧label property声明左侧的小圆，按住并移向左侧xib视图区域的Label控件上面。Xcode产生连线，此时松开即完成界面上label和代码中label属性的连接,button同理。连完后相应的小圆变成实心。鼠标移到上面，会变成+号，并且左侧xib界面上会显示已经和界面上哪个控件建立了连接。
如下图：

这就是所谓的拖拽方法，然后就可以在*.m文件里面随意控制该控件的显示样式了，包括背景颜色、背景图像，圆角，字体大小，所显示的文本等等。

补充：
最近在网上偶然看到一位大牛的博文，对Xcode4中xib的绑定原理又有了新的理解，下面摘录原文叙述如下：
1. 第一步：设置xib文件的File's Owner的class属性：
在xib文件中有一个最重要的就是File's Owner，这个对象指的就是Class属性中设定的那个类的对象。只有设定了Class属性中的类才有办法进行xib界面上的控件与IBOutlet与IBAction的绑定关联。也就是说要先检查xib文件中的File's Owner的属性Class是否设置正确，然后再去设置对应的Outlet与Action。即设置了File's Owner对应的实体类之后Xcode就知道这个实体类有哪些IBOutet与IBAction，这样在拖动进行连接的时候就会显示实体类的头文件中定义好的IBOulet与IBAction。

2. 第二步：在上面指定的所属类头文件中，声明IBOutlet与IBAction：
在头文件中声明IBOutlet与IBAction这两个作用就是让编译器知道这些属性与事件调用是公共给界面调用的。IBOutet就是把界面（xib）中的对象读取到实现类中，这样就可以在实现类中对这些界面控件进行属性的设置，从而改为界面的展示。

3. 第三步：在xib编辑器中（IB）进行关联绑定（选中xib的File's Owner，Utilities窗口切换到connections inspector选项卡）
将connections inspector选项卡下的Outlets（如果在指定所属类的头文件中声明有IBOutlet），和Received Actions（如果有指定所属类的头文件中声明有IBAction）与中间窗口中的Objects下的控件相拖拽连接。
具体即通过左键拖动关联界面控件与实现类的IBOulet或IBAction即可完成界面编辑与绑定的操作。
放两张图：
Outlets:

Received Actions: