[iOS] Storyboard (3) -- 使用:常用Tip
Storyboard 系列文章
[iOS] Storyboard (1) -- 入门:API 篇
[iOS] Storyboard (2) --入门:约束篇
[iOS] Storyboard (3) -- 使用:常用Tips
[iOS] Storyboard (4) -- 实践:问题总结
[iOS] Storyboard (4) -- 实践:UIScrollView
[iOS] Storyboard (4) -- 实践:UICollectionView
1. 设置 Storyboard 跟视图
一般新建项目后,会默认创建一个Storyboard:Main.storyboard
,该Storyboard
的跟视图也就是我们项目的跟视图,每个 Storyboard
也有一个跟视图,在 Storyboard
中的体现就是前面有个箭头指向这个控制器:
如果是我们新建的 Storyboard
,默认是没有跟视图的,在控件库拖一个UIViewController
到 Storyboard
中,然后选中该控制器,在其右侧的菜单倒数第三个(Show the Attributes inspector
)-View Controller
栏目下有个:Is Initial View Controller
复选框,勾选就是作为跟视图,不勾选即是取消;
如果设置了跟视图,那我们使用
Storyboard
的instantiateInitialViewController
方法能够获取到该跟视图控制器,如果没有设置,则获取不到;这个不是必须要设置的,如果不是整个app
启动加载的Storyboard
,可以不设置;而如果是整个app
启动加载的Storyboard
则必须要设置,因为该跟视图也会被作为当前Window
的跟视图进行加载;
2. 设置 app 启动 Storyboard
应用创建后默认的 Storyboard
为 Main.storyboard
,当然我们也可以使用我们自己创建的 Storyboard
来作为启动的 Storyboard
进行加载:
3. 添加导航 UINavigationController
3.1. 方法一:手动添加
直接在控件库里搜索 UINavigationController
,然后拖到 Storyboard
中,默认会带个跟视图 tableViewController
,选中他们的连线(Segue
),然后点击键盘的 Delete
删除,然后选中多余的tableViewController
,同样是点击键盘的 Delete
删除, 只留导航控制器,接着选中导航控制器:右键 - 选择 Triggered Segues
下的 root view Controller
。拖动连线到自己的控制器即可
如果需要把这个导航控制器作为
window
的跟视图控制器的话,如果已有上面说的那个代表跟视图指向的箭头,直接将箭头移动到这个导航的左侧即可;如果没有这个箭头,就选择这个导航控制器,在右侧勾选Is Initial View Controller
复选框。
3.2. 方法二:自动添加
选中需要添加导航的控制器,然后以此选择菜单:Editor -> Embed In -> Navigation Controller
:
4. 添加 TabbarController
4.1. 添加 Tab Bar Controller
同添加导航一样,添加 TabbarController
也分手动和自动两种,自动添加的步骤和添加导航一样,只不过最后选择的是 Tab Bar Controller
(见上图);
这里只说手动添加:
首先,在控件库中搜索 UITabBarController
;
然后,拖到 Storyboard
中;
默认他会携带两个控制器,如果不需要可以删了,或者直接使用;这里为了演示如何连线,先将他们的连线删了;
选中 TabbarController
,右键选择Triggered Segues
下的 view Controllers
,然后将线拖到需要添加的控制器上即可,添加的时候会自动生成TabBarItem
:
一般会添加至少两个控制器,按上面的方法依次添加即可!
如果想把TabbarController
作为window
的跟视图,只需要将上面讲的代表跟视图的箭头指向该TabbarController
即可!
4.2. 设置 Tab Bar
选中整个Tab Bar
,在右侧的属性栏可以设置Tab bar
的一些属性:
4.3. 设置 TabBarItem
选中某个 �TabBarItem
,在其右侧属性栏可以设置图标/title等属性:
5. Storyboard 文件绑定.h/.m文件
Storyboard
文件只是提供一个画UI
的方便,但是逻辑处理还是需要创建相应的控制器.h/.m
文件来进行的,例如在 Storyboard
中添加登录控制器后(示例中使用的是TableViewController
),新建 LQLoginTableViewController.h/LQLoginTableViewController.m
文件;
然后来到 Storyboard
中,选中登录控制器,在其右侧倒数第四个选项(Show the Identity Inspector
)中Custom Class
选项栏下的 Class
,直接填入.h/.m
文件名称,或者在下拉列表中选择要关联的文件即可;
点击右侧的灰色按钮,如果能正常跳转到 对应的.h文件,即关联成功!
如果不能跳转对应的文件,名称无误的情况下,可先编译一下,然后进行操作。
6. 一些基本操作
6.1. 同一个 Storyboard 中控制器间跳转
在 Storyboard
中,控制器直接的跳转,可以直接使用连线的方式进行;也可以使用代码,上面的示例中可以看到连线之后即可进行跳转,下面介绍如何使用代码来控制跳转:
方式一:使用 Segue 来跳转
使用 Segue
进行跳转的前提是该 Segue
必须存在,也就是连线必须存在;
但是,你可能会疑问,连线存在的话,不就可以直接跳转了么?
是的,如果只是按钮的点击, 单个控件可以直接连线跳转; 如果是表视图, 会怎样? 就需要通过 Segue
来跳转了:
首先, 连线通过控制器来连接:
然后, 设置 Segue
的 Identifier
,选中要操作的 Segue
, 在左侧的属性栏下设置 Identifier
:
接着, 在相应的点击方法中添加如下的代码:
[self performSegueWithIdentifier:@"LoginToRegisterID" sender:nil];
即可跳转到下一个界面;
传递参数
使用连线的方式进行跳转的控制器,也是使用这个方式进行参数传递
在这种跳转方式中,如果想要传递参数给下一个控制器,需要重写方法:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(nullable id)sender
在这里获取到目标控制器,然后进行参数传递:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
LQRegistTableViewController *r = segue.destinationViewController;
r.user = @"user";
}
如果,当前控制器需要在不同的情况下跳转到不同的控制器,在这里可使用 segue.identifier
进行区分:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// 如果有多个跳转操作,可使用 identifier 进行区分目标控制器
if ([segue.identifier isEqualToString:@"LQRegistTableViewControllerID"]) {
LQRegistTableViewController *r = segue.destinationViewController;
r.user = @"user";
}
}
方式二:获取到控制器,再跳转
这种方法主要是获取到要跳转的目标控制器,然后再使用push/present
方法进行跳转;同样,需要先给每个控制器设置 Storyboard ID
;
选中控制器,然后在右侧的属性栏 Show the Identity Inspector
中的Identity
栏目下的 Storyboard ID
,添加一个唯一识别符:
然后,在相应的点击方法中使用添加如下的代码:
LQRegistTableViewController *r = [self.storyboard instantiateViewControllerWithIdentifier:@"LQRegistTableViewControllerID"];
[self.navigationController pushViewController:r animated:YES];
这里和我们平常使用纯代码唯一的区别就是获取控制器实例对象的方式;
6.2. 不同 Storyboard 中控制器间跳转
不同 Storyboard
中的控制器跳转,与同一个 Storyboard
中的控制器跳转的区别就是,需要先获取 Storyboard
实例对象,然后调用一样的方法获取控制器,再使用 push/present
进行跳转;
当然,不同控制器间是不能使用
Segue
进行跳转的,因为不能连线!!!
同样,需要先设置 Storyboard ID ,方法同上面;
切换 Window 跟视图
如果需要切换不同的 .storyboard
文件中的视图控制器作为 window
的跟视图,只需要按如下方式进行:
// 获取到 storyboard 实例对象
UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
// 获取要作为 window 跟视图的控制器
UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
[UIApplication sharedApplication].keyWindow.rootViewController = login;
一般的视图跳转
如果只是一般的视图跳转,只是多了一个获取 Storyboard
实例的过程:
// 获取到 storyboard 实例对象
UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
// 获取视图控制器
UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
[self presentViewController:login animated:YES completion:nil];
7. 结合 nib/xib 文件使用
nib/xib 的创建/关联 UIViewController
如果是新建的类,在设置类名页面可以勾选 Also create XIB file
复选框,同时创建相应的 nib/xib
文件:
这种方式创建的 nib/xib
文件和相应的类是关联好的,不需要我们进行特殊设置,即可直接使用;
关联已有的文件
如果是想要将已有的类关联到 nib/xib
文件,只需要新建相应的 nib/xib
文件: New Files...
- 选择 User Interface
下的 View
:
在下一步的命名中,最好是和文件名称一致;
完成后关联控制器:选中 xib
文件,在左侧文件列表选中 File's Owner
,右侧属性栏下的 Class
选择需要关联的类名:
最后设置控制器的 View
,选中 File's Owner
,右键,将 View
的连线连接当前控制器的 View
:
或者:
完成!
nib/xib 的创建/关联 UITableViewController
同UIViewController
一样,如果是新建的类,在设置类名页面可以勾选 Also create XIB file
复选框,即可同时创建相应的 nib/xib
文件;
关联已有的文件
创建 xib
的步骤和 UIViewController
一样,命名规则也一样,完成后关联控制器也是一样的操作,不同之处是接下来的 设置 控制器的View
;
因为新建的 xib
中默认的 view
是 UIView
,但是我们的UITableViewController
需要的是 UITableView
,因此,我们需要将默认的 View
删除,然后拖一个 UITableView
进来: 选中默认的View
,delete
删除,然后从控件库拖一个 UITableView
接着将 UITableView
设置为控制器的 View
,步骤同 UIViewController
;
最后,设置 UITableView
的代理和数据源连线:
完成!
nib/xib 的创建/关联 UITableViewCell
同UIViewController
一样,如果是新建的类,在设置类名页面可以勾选 Also create XIB file
复选框,即可同时创建相应的 nib/xib
文件;
关联已有的文件
创建 xib
的步骤和 UIViewController
一样,命名规则也一样,因为 UITableViewCell
是一个 view
,所以不需要关联 控制器,也就是上面的 File's Owner
我们就用不到了;
同理,因为新建的 xib
中默认的 view
是 UIView
,但这里是UITableViewCell
,因此,我们需要将默认的 View
删除,然后拖一个 UITableViewCell
进来:
选中默认的View
,delete
删除,然后从控件库拖一个 UITableViewCell
;
接下来,我们只需要将该 cell
关联到对应的类即可,选中该cell
,在右侧 Show the Identify inspector
下的 Class
选择相应的类:
完成!
Storyboard -> nib/xib
Storyboard
跳转到 nib/xib
,正常的使用代码创建即可:
LQOtherViewController *other = [[LQOtherViewController alloc]initWithNibName:@"LQOtherViewController" bundle:nil] ;
[self presentViewController:other animated:YES completion:nil];
这里也可以使用原来的初始化方法;
nib/xib -> Storyboard
从 nib/xib
跳转到 Storyboard
,只需要先获取到要跳转的 Storyboard
实例,然后进行跳转即可:
// 获取到 storyboard 实例对象
UIStoryboard *loginSB = [UIStoryboard storyboardWithName:@"LQLogin" bundle:nil];
// 获取视图控制器
UIViewController *login = [loginSB instantiateViewControllerWithIdentifier:@"LQLoginNavigation"];
[self presentViewController:login animated:YES completion:nil];
同理,以上跳转方式也适合跨页面跳转
8. UITableView 静态表
在一些内容固定的列表页,例如个人中心列表、设置列表等;在 Storyboard
中使用静态表是再好不过的选择了;
我们在布局静态表的时候只能使用 UITableViewController
;
选中 TableView
视图,在右侧属性栏 - Table View
栏目下修改 Content
的类型为 Static Cells
:
在此,也可以看到很多和表相关的属性,都可以根据自己的需求进行设置,例如:分区数、表类型等;
选中标尺图标(Show the Size inspector
),可以设置行高、区头/区尾高度等: