ios开发

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

2019-05-29  本文已影响0人  流火绯瞳

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),可以设置行高、区头/区尾高度等:

(未完,待续...)

上一篇 下一篇

猜你喜欢

热点阅读