[iOS] Storyboard (3) -- 使用:常用Tips

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,默认是没有跟视图的,在控件库拖一个UIViewControllerStoryboard 中,然后选中该控制器,在其右侧的菜单倒数第三个(Show the Attributes inspector)-View Controller 栏目下有个:Is Initial View Controller 复选框,勾选就是作为跟视图,不勾选即是取消;

如果设置了跟视图,那我们使用 StoryboardinstantiateInitialViewController 方法能够获取到该跟视图控制器,如果没有设置,则获取不到;这个不是必须要设置的,如果不是整个app 启动加载的 Storyboard ,可以不设置;而如果是整个app启动加载的 Storyboard 则必须要设置,因为该跟视图也会被作为当前 Window的跟视图进行加载;

2. 设置 app 启动 Storyboard

应用创建后默认的 StoryboardMain.storyboard ,当然我们也可以使用我们自己创建的 Storyboard 来作为启动的 Storyboard 进行加载:

设置 app 启动 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

Tab bar 连线

一般会添加至少两个控制器,按上面的方法依次添加即可!
如果想把 TabbarController 作为 window 的跟视图,只需要将上面讲的代表跟视图的箭头指向该 TabbarController 即可!

4.2. 设置 Tab Bar

选中整个Tab Bar,在右侧的属性栏可以设置Tab bar的一些属性:

Tab Bar
4.3. 设置 TabBarItem

选中某个 �TabBarItem,在其右侧属性栏可以设置图标/title等属性:

tabBarItem

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 来跳转了:

首先, 连线通过控制器来连接:


然后, 设置 SegueIdentifier,选中要操作的 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 中默认的 viewUIView,但是我们的UITableViewController 需要的是 UITableView,因此,我们需要将默认的 View 删除,然后拖一个 UITableView 进来: 选中默认的Viewdelete删除,然后从控件库拖一个 UITableView

接着将 UITableView 设置为控制器的 View,步骤同 UIViewController

最后,设置 UITableView 的代理和数据源连线:

完成!

nib/xib 的创建/关联 UITableViewCell

UIViewController 一样,如果是新建的类,在设置类名页面可以勾选 Also create XIB file 复选框,即可同时创建相应的 nib/xib 文件;

关联已有的文件

创建 xib 的步骤和 UIViewController 一样,命名规则也一样,因为 UITableViewCell 是一个 view,所以不需要关联 控制器,也就是上面的 File's Owner 我们就用不到了;

同理,因为新建的 xib 中默认的 viewUIView,但这里是UITableViewCell ,因此,我们需要将默认的 View 删除,然后拖一个 UITableViewCell 进来:
选中默认的Viewdelete删除,然后从控件库拖一个 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),可以设置行高、区头/区尾高度等:

(未完,待续...)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266