可视化编程-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，向接口部分中拖拽，即可关联。
- Connection：拖拽之后创建的类型（属性、方法、集合属性）。
- Object：绑定的对象。
- Name：方法名或者属性名字。
- Type：控件类型。
- Storage：控件的内存修饰参数。
3、事件关联
- 动作：用于响应UI控件的触发事件。IBAction，连接方法和IB中的UI控件。
- 设置：选中控件，按住control，向原类接口部分或者实现部分中拖拽，设置响应方法。
- Name:方法名。
- Type：方法中的参数类型。
- Event：触发方法的方式。
- Arguments：方法中携带的什么样的参数。
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：删除所有的约束。
