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

本讲内容

⼀、Interface Builder可视化编程

二、Storyboard可视化编辑中的Segue使⽤用⽅方式 

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

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

一、Interface Builder

什么是Interface Builder简称IB,是Mac OS X和iOS平台下⽤用于设计和测试⽤用户界⾯面的应⽤用程序。

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

.xib 和.nibIB创建.xib⽂文件,包括视图布局,以XML格式存储。

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

使⽤用IB初始化视图控制器

创建视图控制器

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

nibNameOrNil是.xib⽂文件的名字。注:nibNameOrNil如果填nil,默认找与类同名的.xib⽂文件(LoginViewController.xibLoginView.xib)。

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

拖放控件

插座变量。

⽤用于控制IB中的UI控件。

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

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

动作

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

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

设置:选中控件,按住command,向类中拖放,设置⽅方法名。

设置代理

File’s owner。⽂文件的拥有者,即视图控制器。设置:右键单击控件,连接代理变量 和File’s owner

二、StoryBoard的使⽤用

什么是StoryBoard

StoryBoard的注意事项

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

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

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

StoryBoard创建视图控制器controller可以设置标识,通过标识从storyboard创建视图控

制器对象。UIStoryboard,storyboard对象。视图控制器有属性

storyboard。也可以通过⽂文件名创建对应的storyboard⽂文件对象。

[self.storyboard instantiateViewControllerWithIdentifier:**]

三、Segue的使⽤用

Segue关联按钮利⽤用segue去push视图控制器。

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

 注:适⽤用于不存在传值的⻚页⾯面切换。

!

Segue关联按钮利⽤用segue去push视图控制器。

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

 注:适⽤用于不存在传值的⻚页⾯面切换。

!

Segue关联两个⻚页⾯面要给segue设置唯⼀一的标识符

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

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

Segue实现传值
- (void)prepareForSegue:(UIStoryboardSegue*)segue

sender:(id)sender segue触发之后,下⼀一个⻚页⾯面显⽰示之前执⾏行。segue包含3个重要的属性:identifier、sourceViewController、

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

四、自定义单元格

⾃定义单元格单元格指的是UITableView的cell

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

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

⾃自定义单元格的注意事项

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

格区分

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

五、⾃自动布局

配置⾃自动布局的⽅方式

在Storyboard中进⾏行配置,添加约束约束:视图布局的规则。

 利⽤用约束可以指⽰示:视图在同⼀一⽔水平⾏行上对⻬齐、调整视图⼤大⼩小匹配其他视图等等

约束配置

课程预告

解析