iOSDay32之UIKit框架-可视化编程-XIB

1. Interface Builder 可视化编程

　1> 概述

　　GUI : 图形用户界面(Graphical User Interface, 简称GUI, 又称图形化界面) 是指采用图形方式显示的计算机操作用户界面。

　　Interface Builder (简称IB) : 是MAC OS X 平台下用于设计和测试图形用户界面 (GUI) 的应用程序。代码 和 IB 都可以生成 GUI。

　　优势: IB 能使开发者简单快捷的开发出符合Mac系列操作系统的GUI。通常你只需要通过简单的拖拽操作来构建UI就可以了。IB 使用Nib文件存储 GUI 资源，在需要的时候，Nib文件可以被快速地载入内存。

　2> iOS可视化编程

• iOS下可视化编程分为两种方式：xib 和 storyBoard

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

2. xib创建及使用

　1> 概述

• xib 创建 .xib 文件，包括视图布局，以XML格式存储。

• 程序运行后，.xib 文件中的内容编译为.nib 文件（二进制文件），存储在工程包中

• .xib 通常以关联方式出现在工程文件中，即在被创建时是伴随一个类（UIKit框架下的类）诞生的

　2> .xib创建

　　视图控制器独有初始化方法

　　- (instancetype)initWithNibName:(NSString *)nibNameOrNib bundle:(NSBundle *)nibBundleOrNil

　　nibNameOrNib：当前控制器相关联的nib文件，如果写nil默认为同名文件

　　nibBundleOrNil：当前应用程序包所在文件，如果写nil默认为mainBundle

　　在我们使用init初始化（或者new直接创建）控制器的时候，会自动执行控制器的此方法，参数均为默认值执行，所以可不写

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { 2     // 创建window 3     self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 4     self.window.backgroundColor = [UIColor whiteColor]; 5     [self.window makeKeyAndVisible]; 6      7     // 程序编译时,会将xib文件编译成nib的二进制文件,运行时加载nib文件 8     // NibName:当前控制器的相关联的nib文件, 如果写为nil,默认查找和控制器名相同的文件名,但是如果xib文件与控制器名不同,则查不到 9     // bundle:获取程序资源路径,如果写为nil,默认是主路径,因为iOS只有一个主路径,在mac端开发时必须写10     11     // 创建根视图12     RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];13     14     self.window.rootViewController = rootVC;15     16     return YES;17 }　　

　3> 选项卡

　　在Xcode工具栏（快捷键command + option(alt) + 0）管理者一组选项卡，用以对Xcode中文件（类文件或者IB文件）进行设置和描述。

　　在选中IB文件的情况下Xcode会有六个标签分别负责对选中的内容的信息查看和操作，包括文件基本信息、快速帮助、属性设置等。

　4> 插座变量(Outlet)

• 插座变量:用于控制IB中的UI控件。

　　　IBOutlet:外联指针,连接插座变量和IB中的UI控件。

• 设置:选中控件,按住control , 向接口部分中拖拽。

　　　Connection: 拖拽之后创建的类型(属性、方法、集合属性)。

　　　Object:绑定的对象。

　　　Name: 法名或者属性名字。

　　　Type:控件类型。

　　　Storage:控件的内存修饰参数。

　5> 事件关联(IBAction)

• 动作,用于响应UI控件的触发事件。

　　　IBAction,连接方法和IB中的UI控件。

• 设置,选中控件,按住 ,向原类接 部分或者实现部分中 拖拽,设置响应 法。

　　　Name :方法名。

　　　Type :方法中的参数类型。

　　　Event : 触发方法的方式

　　　Arguments :方法中携带的什么样的参数。

　6> 代理设置

• File’s owner : 文件的拥有者,即视图控制器。
• 设置:右键单击控件,连接代理变量 和 File’s owner
• 注意 :在拖拽的时候必须拖拽到 File’s owner 。
  

　　拖拽方式一：

　　拖拽方式二：　　

3. xib绘制单元格

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

• 声明和定义重用标识符　

 1 #import "RootTableViewController.h" 2 #import "RootCell.h" 3  4 @interface RootTableViewController () 5  6 @end 7  8 @implementation RootTableViewController 9 10 // 定义重用标识符(标准版)11 static NSString * const identifier_cell = @"cell";

• 注册Cell　　

 1 - (void)viewDidLoad { 2     [super viewDidLoad]; 3      4     // 以前普通方式 5 //    [self.tableView registerClass:[RootCell class] forCellReuseIdentifier:@"cell"]; 6      7     // xib 注册cell 8     [self.tableView registerNib:[UINib nibWithNibName:@"RootCell" bundle:nil] forCellReuseIdentifier:identifier_cell]; 9 }10 // 返回Cell11 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {12     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier_cell forIndexPath:indexPath];13     14     return cell;15 }

　　记得设置自定义cell的高度

1 // 设置每一行的高度2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath3 {4     return 120;5 }

4. 自动布局

　1> 概述

• 自动布局:autoLayout , 不给View 固定的位置, 通过某些规则让View 自己适应自己的位置。
• iOS6.0之后推出, 在 iOS8.0 自动布局被大幅度优化, iOS9 中新增了许多功能。
  

　2> 自动布局中常用的四个选项

 

　3> Stack

　　

• UIStackView, 可以管理多个视图。一次性为多个视图进行约束设置。      
• Axis : 子视图排布方向。
• Alignment :子视图对齐方式。
• Distribution : 分布方式。(调整 StackView 的大小 , 切换选项观察）
• Space : 子视图的最小间距。
• 备注 : 选中多个排列的视图 , 勾选 Stack 即可进行编辑 StackView 选项卡。

 

　4> Align（设置视图的对齐方式）

　　

• Leading Edges :左对齐。 　　
• Trailing Edges :右对齐。
• Top Edges :上对齐。
• Bottom Edges :下对齐。
• Horizontal Centers :纵向中心对齐
• Vertical Centers :横向中心对齐。
• BaseLine :基线对齐。
• Horizontal in Container :以屏幕的纵向中心线对齐。
• Vertical Container :以屏幕的横向中心对齐。
• 两者结合使用可以让View 的中心点和屏幕的中心点对齐。 　

　5> Pin (设置视图的尺寸相关属性)

　　

• 上面的四个方向的设置尺寸代表距离四个方向的最近的视图的距离
• 如果对应方向没有视图 , 则视为对应的屏幕方向的距离。Constrain to margins 选项表示是否留下20个点的位置。 　　
• Width：视图的宽度
• Height：视图的高度
• Equal Width: 两个视图等宽。
• Equal Height :两个视图等高。
• Aspect Ratio: 设置宽高比
  

 

　6> Resolve Auto Layout Issues

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