可视化编程-xib

1、Interface Builder可视化编程

　　一、Interface Builder简介：

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

　　二、iOS可视化编程

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

2、xib简单实用

　　一、.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文件的样式

　　二、控件关联

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

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

　　三、事件关联

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

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

　　四、代理设置

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

 

3、xib绘制单元格

　　一、自定义单元格

• 自定义单元格指的是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;
}

 

 

4、自动布局

　　一、自动布局

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

　　二、Stack

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

　　三、Align

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

　　四、Pin

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

　　五、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：删除全部的约束。