iOS学习之UI可视化编程-XIB

一、Interface Builder可视化编程

　　1、Interface Builder简介：

• GUI：图形用户界面（Graphical User Interface，简称GUI，又称图形用户接口）是指采用图形方式显示的计算机操作用户界面。
• Interface Builder（IB）：是Mac OS X 平台下用于设计和测试图形用户界面的应用程序。代码和IB都可以生成GUI。
• 优势：IB能够使开发者简单快捷的开发出符合Mac系列操作系统的GUI。通常只需要通过简单的拖拽操作来构建GUI。IB使用Nib文件储存GUI资源，在需要的时候，Nib文件可以被快速的载入内存。

　　2、iOS可视化编程

• iOS下可视化编程分为两种方式：xib和storyBoard。
• 在使用xib和storyBoard创建GUI过程中，以XML文件格式存储在Xcode中，编译时生成nib的二进制文件。在运行时，nib文件被加载并且开始创建和实例化GUI元素。

二、xib简单实用

　　1、.xib创建

• xib通常以关联方式出现在工程文件中，即在被创建时是伴随一个类（UIKIT框架下的类）诞生的。如图所示：
• 
• 
• 关联xib后，视图控制器独有的初始化方法：

    // 创建视图控制器，给window指定根控制器
    // 程序编译时会将xib文件编译成nib的二进制文件，运行时加载nib文件
    // nibName：当前控制器相关联的nib文件，如果写为nil，默认查找和控制器名相同的文件名，但是如果xib文件与控制器名不相同，则查找不到。
    // bundle：获取程序的资源路径，如果写为nil，默认是主路径，因为iOS只有一个主路径，在mac端开发时必须写。
    self.window.rootViewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];

• 创建好后.xib文件的样式
• 
• 

　　2、控件关联

• 在可视化编程中，功能部分仍然需要依赖于代码，所以我们需要将控件和代码相关联起来。
• 插座变量：用于IB中的UI控件。
• IBOutlet：外联指针，连接插座变量和IB中的UI空间。
• 设置：选中控件，按住control，向接口部分中拖拽，即可关联。

1. Connection：拖拽之后创建的类型（属性、方法、集合属性）。
2. Object：绑定的对象。
3. Name：方法名或者属性名字。
4. Type：控件类型。
5. Storage：控件的内存修饰参数。
6. 

　　3、事件关联

• 动作：用于响应UI控件的触发事件。IBAction，连接方法和IB中的UI控件。
• 设置：选中控件，按住control，向原类接口部分或者实现部分中拖拽，设置响应方法。

1. Name:方法名。
2. Type：方法中的参数类型。
3. Event：触发方法的方式。
4. Arguments：方法中携带的什么样的参数。
5. 

　　4、代理设置

• File's owner：文件的拥有者，即视图控制器。
• 设置：右键单击控件，连接代理变量和File's owner。
• 
• 

三、xib绘制单元格

　　1、自定义单元格

• 自定义单元格指的是UITableView的自定义cell。
• 通过xib可以快速的绘制cell。
• 新建UITableViewController子类，设置为根视图控制器。
• 新建一个UItableViewCell子类，勾选Also create XIB file。
• 设置cell的重用标识符
• 

    // 注册cell
    [self.tableView registerNib:[UINib nibWithNibName:@"CustomCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:identifier_cell];

    // 返回cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier_cell forIndexPath:indexPath];
    return cell;
}

四、自动布局

　　1、自动布局

• 自动布局：autoLayout，不给View固定的位置，通过某些规则让View自己适应自己的位置。
• 自动布局中常用的四个选项
• 

　　2、Stack

• UIStackView，可以管理多个视图。一次性为多个视图进行约束设置。
• Axis：子视图排布方向。
• Alignment：子视图对齐方式。
• Distribution：分布方式。（调整StackView的大小，切换选项观察）。
• Space：子视图的最小间距。
• 

　　3、Align

• Align，设置视图的对齐方式。
• 
• Leading Edges：左对齐。
• Trailing Edges：右对齐。
• Top Edges：上对齐。
• Bottom Edges：下对齐。
• Horizontal Centers：纵向中心对齐。
• Vertical Centers：横向中心对齐。
• BaseLines：基线对齐。
• Horizontally in Container：以屏幕的纵向中心线对齐。
• Vertically in Container：以屏幕的横向中心对齐。
• 两者结合使用可以让View的中心点和屏幕中心点对齐。

　　4、Pin

• Pin：设置视图的尺寸相关属性。
• 
• 上面的四个方向的设置尺寸代表距离四个方向的最近的视图的距离。
• 如果对应方向没有视图，则视为对应的屏幕方向的距离。
• Constrain to margins选项表示是否留下20个点的位置。
• Width：视图的宽度。
• Height：视图的高度。
• AspectRatio：设置宽高比。
• 当选中一个以上的视图个数：
• Equal Width：两个视图等宽。
• Equal Height：两个视图等高。

　　5、Resolve Auto Layout Issues

• Resolve Auto Layout Issues：解决自动布局的问题。
• 
• Selected Views：选中的View，不包含子视图。
• All Views in View：选中的View，包含子视图。
• Update Frames：更新位置信息。
• Update Constraints：更新约束信息。
• Add Missing Constraints：忽略约束不足的错误。
• Reset to Suggersted Constraints：重置被建议的约束。
• Clear Constraints：删除所有的约束。