UI第十四天:UI⾼级可视化设计

⼀、Interface Builder 可视化编程

简称IB，是Mac OS X和iOS平台下⽤于设计和测试⽤户界⾯的 应⽤程序。

提供了拖放⾯板，可以将控件拖放到屏幕上。

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

程序运⾏后，.xib⽂件中的内容编译为.nib⽂件(⼆进制⽂件)， 存储在⼯程包中。

- (id)initWithNibName:(NSString *)nibNameOrNil bundle: (NSBundle *)nibBundleOrNil

nibNameOrNil是.xib⽂件的名字。注：nibNameOrNil如果填 nil，默认找与类同名的.xib⽂件(LoginViewController.xib LoginView.xib)。

可以直接使⽤init⽅法，默认找相关的.xib⽂件。

插座变量。⽤于控制IB中的UI控件。

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

设置：选中控件，按住command，向类中拖放，设置变量 名。

动作。⽤于响应UI控件的触发事件。

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

设置：选中控件，按住command，向类中拖放，设置⽅法 名。

⼆、Storyboard可视化编辑中的Segue使⽤⽅式

在AppDelegate的-application: didFinishLaunchingWithOptions:⽅法中不要再⽤代码初始化 ⼀个window

利将创建好的Storyboard在应⽤程序配置General中设置为 Main Interface

视图添加与控制和IB开发⼀样。

controller可以设置标识，通过标识从storyboard创建视图控 制器对象。

UIStoryboard，storyboard对象。视图控制器有属性 storyboard。也可以通过⽂件名创建对应的storyboard⽂件对 象。

[self.storyboard instantiateViewControllerWithIdentifier:**]

利⽤segue去push视图控制器。

选中按钮，按住command，从按钮向下⼀级⻚⾯连线。按钮不 需要添加响应⽅法。

注：适⽤于不存在传值的⻚⾯切换

要给segue设置唯⼀的标识符

利⽤segue去push视图控制器的时候,使⽤ 视图控制器的实例⽅法:

- ( void)performSegueWithIdentifier: (NSString *)identifier sender:(id)sender;

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender segue触发之后，下⼀个⻚⾯显⽰之前执⾏。

segue包含3个重要的属性：identifier、sourceViewController、 destinationViewController。

通过destinationViewController获取下⼀个⻚⾯对象。实现传值

三、Storyboard可视化编辑中的⾃定义单元格

单元格指的是UITableView的cell

在Storyboard中,可以直接在 TableView上添加Prototype Cells

可以在Prototype Cells中的单元格中 添加⾃定义⼦视图

选中Prototype Cells中的单元格后在Xcode⼯具的右边的检查器⼯ 具中修改单元格的标⽰符，注意标⽰符要与该表格视图的其他单元 格区分

如果有⾃定义单元格类的话，并且在⾃定义单元格类中添加了IB 修饰符修饰的属性和⽅法，需要在Storyboard的单元格检查器中的 Custom Class修改为⾃定义的类

四、Storyboard可视化编辑中的⾃适应布局(AutoLayout)

在Storyboard中进⾏配置，添加约束

约束：视图布局的规则。

利⽤约束可以指⽰：视图在同⼀⽔平⾏上对⻬、调整视图⼤⼩匹 配其他视图等等

/*
     添加约束条件 :
     真谛 : 每个空间至少添加四条约束条件 ( 跟 Frame 一样 x y 宽 高 ) 只可多 不可少
     1. 首先要先确定好 一个控件约束 ( 必须正确 )
     2. 其次 跟手写 Frame 一样 需要 依据上一个控件的约束来 添加下一个控件的约束
     3. 最后 添加完成后 看一下 有没有报红 ( 少约束条件 ) 报黄 ( 需要更新一下约束或者 Frame) 然后查看个屏幕下的视图布局是否正确
     */
   
    /*
     删除属性步骤
     1. 删除代码
     2. 删除属性连线
     3. 把自动生成 deallco 删除

     */

// 拉线跳转 会触发这个方法 ( 一般传值使用 )
// 但是一个界面可以去往很多界面 并且都可以通过拉线完成这时候就需要判断一个要操作的是那一根连线
// 需要用 segue 的 identifier 属性去判断
// 属性初值步骤
//1. 给 segeue( 跳转的线 ) 加一个 identifier( 标识 )
//2. 通过标识 判断出 你要操作的线
//3. 取出目的地控制器

//4. 利用目的地控制器传值

/*
 sizeclass
 九宫格 控制苹果产品的屏幕(适配)
 4个格子 BaseView状态下 是一个基础状态 这是你无论添加的是控件 还是给控件添加的约束条件 都可以被其他之态继承下来
 横2格 是iPhone横屏状态下你多加的控件和约束条件是不会被继承只有横屏显示
 竖3格 是iPhone横屏状态下你多加的控件和约束条件是不会被继承只有竖屏显示
 
 8字真言 戒骄戒躁 千锤百炼
 
 
 */

//利用XIB文件加载视图控制器 并作为window的根视图控制器

 RootViewController *root = [[RootViewController alloc]initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];