iOS学习33之可视化编程-StoryBoard

1. storyBoard与xib

　1> 概述

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

　2> 对比

　　相同点:都属于 IB 编程的方式, 可以快速构建 GUI

　　不同点:xib 侧重于单文件(单独的控制器或者视图)编辑, storyboard 侧重于多页面关联.  storyboard 可以直观的梳理出页面间的逻辑, 并且所有页面跳转逻辑均可在 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 方法完成, 方便界面间数据统一管理

　3> storyboard 注意事项

• 在 AppDelegate 的 -application: didFinishLaunchingWithOptions: 方法中不要再用代码初始化一个 Window。
• 将创建好的 storyboard 在应用程序配置 General 中设置为 Main Interface。
• 视图添加与控制和 IB 开发 样。

　4> storyboard 创建视图控制器

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

　　[self.storyboard instantiateViewControllerWithIdentifier: @"identifier"];

　5> storyboard 侧重于页面控制

　　使 storyboard 可以方便快捷的直接拖拽出一个视图控制器, 其中包括 View Controller、Navigation Controller、Table View  Controller 等等。

　　我们可以通过选中控制器, 修改下图所示的选项, 或者直接移动表示程序入口的箭头,来观察各控制器的效果

　6> 利用 storyboard 绘制自定义单元格

　　storyboard 绘制单元格的时候要注意以下几点:

• 创建自定义 cell 时选中左侧 TableViewCell。
• 绘制自定义 UI 界面。
• 设置重用标识符。
• 将 storyboard 文件关联至对应的 UITableViewController 和 UITableViewCell 类(自己创建的类)。
• 在 UITableViewController 中完成代码书写:设置 section 和 row 数量, 设置 cell , 根据实际情况调整 cell 的高度。

　　注意: cell 不再需要注册。

2. 页面跳转

　1> storyboard 页面跳转分为两种

　　① 代码方式 : 使用代码通过控制器识别来跳转. 比如在当前页面的某一个事件中跳转到一个标识为 "customVC" 的控制器页面中: [self performSegueWithIdentifier:@"customVC" sender:nil];

　　② 连线方式 : 直接使用拖拽可以给按钮连线关联两个页面: 选中按钮, 按住 control ,从按钮向下一级页面连线. 按钮不需要添加响应方法.

　2> 方式

　　push : push出下一个界面.

　　modal : 模态出下一个界面

　　custom : 自定义,需要我们自己实现页面跳转, 需要自定义segue.

　　注意: 以上是 sizeclasses 未勾选的状态下的三种方式. 在默认状态下有很多种, 其中包括show, showDetail等等.

3. segue

　1> 概述

　　segue: 可视化编程中连接两个页面的线条,称之为 segue.

　　iPhoneGUI 开发中 segue 主要有三种类型, 包括 push, model, custom.

　　其中 custom 需要我们自定义 segue 来完成页面间跳转.

　　segue 有三个重要属性: 标识符, 源控制器, 目标控制器.

　2> 自定义 segue

　　步骤一: 新建一个类继承自 UIStoryboardSegue

#import <UIKit/UIKit.h>
 
@interface CustomSegue : UIStoryboardSegue
 
@end

　　步骤二: 选中一个控制器,按住 control 鼠标辅助完成连线, 选择 custom

　　步骤三: 选中自定义 segue, 设置 segue 的 identifier 以及关联类

　　步骤四: 在 segue 类里面重写 perform 方法(界面跳转默认的执行方法), 自定义跳转效果

 #import "CustomSegue.h"
 #import "LoginViewController.h"
 #import "CustomViewController.h"
 
 @implementation CustomSegue
 
 // 重写系统方法，页面跳转会走这个方法
 - (void)perform {
 
     // 1. 获取源控制器
     LoginViewController *loginVC = self.sourceViewController;
     // 2.获取目标控制器
     CustomViewController *customVC = self.destinationViewController;
 
     // 3.自定义页面切换效果
     [UIView transitionFromView:loginVC.view toView:customVC.view duration: options:UIViewAnimationOptionTransitionCurlUp completion:^(BOOL finished) {
 
         // 动画完成后的操作
         [loginVC.navigationController pushViewController:customVC animated:NO];
 
     }];
 
 }
 
 @end

　3> 界面传值

　　storyboard界面间跳转会执行

　　- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 方法, 方便界面间数据统一管理.

　　依据不同的标识符来完成数据处理.

 // storyboard页面跳转会走这个方法
 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
 
     if ([segue.identifier isEqualToString:@"welcome"]) {
 
         // 属性传值(从前往后传)
         // 获取到要跳转的控制器对象
         WelcomeViewController *welcomeVC = segue.destinationViewController;
         // 2.设置属性
         welcomeVC.textString = self.userTextField.text;
      }
 }　

4. sizeClasses屏幕适配

　在实际开发当中程序员不可能只考虑一种尺寸, 有时需要做必要的屏幕适配工作, 甚至还会遇到横竖屏时不同的布局方式, 在可视化编程中, sizeClasses 就是因此而诞生的.

　sizeClasses 可以根据不同的选择,筛选出不同的布局情况来绘制 UI　

　设备对应关系如下:

• iPhone4S, iPhone5/5S, iPhone6, iPhone6s

　　　竖屏: (w:Compact h:Regular)

　　　横屏: (w:Compact h:Compact)

• iPhone6 Plus/iPhone6s Plus

　　　竖屏: (w:Compact h:Regular)

　　　横屏: (w:Regular h:Compact)

• iPad

　　　竖屏: (w:Regular h:Regular)

　　　横屏: (w:Regular h:Regular)