故事板(Storyboard)

时间：2015-12-15 21:00:48 阅读：312 评论：0 收藏：0 [点我收藏+]

1 使用Storyboard完成各项常见功能

1.1 问题

故事板Storyboard是IOS5开始引入的一个新的系统，将多个视图文件（类似xib文件）集中到一个单独的可视化工作区间，负责创建和管理所有的界面及界面间的跳转，每一个Storyboard中的单个视图文件称之为场景Scene，可以使用Xcode的Interface Builder来进行编辑。

本案例将学习如何使用Storyboard完成场景的创建，并且使用两种不同的方式实现Modal模式的跳转，如图-1所示：

图-1

1.2 方案

首先创建一个SingleViewApplication项目，会自动帮我们创建好一个TRViewController类，并且自动带有Storyboard文件，默认情况下Storyboard里面有一个已经创建好的场景，已和TRViewController类绑定。

另外不用在程序的入口方法中创建Window对象和根视图控制器，StoryBoard会自动帮我们创建。

其次再新创建一个场景，从对象库中拖放一个视图控制器对象到StoryBoard中即可，并创建一个视图控制器类TRViewController2，继承至UIViewController。

在Storyboard中选中第二个场景，在右边栏的第三个检查器中修改类名，将TRViewController2和第二个场景绑定。

然后分别在第一个场景和第二个场景中拖放一个Button控件，在右边栏的第四个检查器中设置好相关属性。

选中第一个场景中的Button控件，按住Control键往第二个场景拉线，实现Modal方式的页面跳转。给场景二中的Button添加事件方法，通过代码的方式实现界面的回跳。

最后通过Segue加代码的方式实现界面跳转，在场景一中再拖放一个Button控件并关联成方法。选中场景一上面的黄色圆球按钮，按住Control键往第二个场景上拖拽，释放鼠标选择Modal模式跳转。

选中Segue对象，在右边栏的检查器四中给Identifier进行赋值，给Segue对象取一个标识“Segue”，identifier是一个NSString类型的属性。

在TRViewController.m文件中实现Button的事件方法，使用performSegueWithIdentifier:sender:方法实现页面跳转。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建一个带有Storyboard的项目

首先创建一个SingleViewApplication项目，Xcode会自动帮我们创建好一个TRViewController类，并且自动带有Storyboard文件。

默认情况下Storyboard里面有一个已经创建好的场景，并且已经和TRViewController类绑定。另外不需要再到程序的入口方法中创建Window对象和根视图控制器对象，StoryBoard会自动帮我们创建，在StoryBoard文件中有一个箭头指向的场景就是程序的根视图控制器，如图-2所示：

图-2

步骤二：创建第二个场景并和代码绑定

在Storyboard中创建一个新场景，从对象库中拖放一个视图控制器对象到StoryBoard中，如图-3所示：

图-3

然后创建一个视图控制器类TRViewController2，继承至UIViewController。在Storyboard中选中第二个场景，在右边栏的第三个检查器中修改类名，将TRViewController2和第二个场景绑定在一起，如图-4所示：

图-4

步骤三：通过Segue实现界面跳转

StoryBoard中每个视图上的控件，都和xib文件的操作方式一样，可以直接拖拽摆放在视图上，也同样可以通过拉线的方式关联成IBOutlet，IBCollectionOutlet以及IBAction等属性。

首先分别在第一个场景和第二个场景中拖放一个Button控件，在右边栏的第四个检查器中设置好相关属性。

然后选中第一个场景中的Button控件，按住Control键往第二个场景拉线，释放鼠标，在弹出的窗口中选择Modal方式，如图-5所示：

图-5

最后给场景二中的Button添加事件方法back：，在该方法中通过代码的方式实现界面的回跳，代码如下所示：

- (IBAction)back:(UIButton *)sender {
[selfdismissViewControllerAnimated:YEScompletion:nil];
}

这里需要注意返回到第一个界面时，不能再继续使用连线的方式，否则会创建新的视图控制器对象，而不是返回以前的视图控制器。

步骤四：通过Segue加代码的方式实现界面跳转

首先在场景一中再拖放一个Button控件并关联成方法goToSecond:。选中场景一上面的黄色圆球按钮，按住Control键往第二个场景上拖拽，释放鼠标选择Modal模式跳转，如图-6所示：

图-6

注意此时应该选中的是场景本身，而不再是按钮。然后选中Segue对象，在右边栏的检查器四中给Identifier进行赋值，identifier是Segue对象一个NSString类型的属性，表示Segue的标识，用于区分不同的Segue对象，本案例给Segue对象取一个标识“Segue”，如图-7所示：

图-7

在TRViewController.m文件中实现Button的事件方法goToSecond:，在该方法中使用performSegueWithIdentifier:sender:方法实现页面跳转，identifier参数就是刚才设置的Segue的标识，代码如下所示：

- (IBAction)goToSecond:(UIButton *)sender {
[selfperformSegueWithIdentifier:@"Segue" sender:nil];
}

1.4 完整代码

本案例中，TRViewController.m文件中的完整代码如下所示：

#import "TRViewController.h"
@interfaceTRViewController ()
@end
@implementationTRViewController
- (IBAction)goToSecond:(UIButton *)sender {
[selfperformSegueWithIdentifier:@"Segue" sender:nil];
}
@end

本案例中，TRViewController2.m文件中的完整代码如下所示：

#import "TRViewController2.h"
@interface TRViewController2 ()
@end
@implementation TRViewController2
- (IBAction)back:(UIButton *)sender {
[selfdismissViewControllerAnimated:YEScompletion:nil];
}
@end

2 将场景嵌入到导航中并进行Push跳转

2.1 问题

本案例在StoryBoard中分别使用手动和自动的方式创建带有导航控制器的场景，并实现Push模式的界面跳转，如图-8所示：

图-8

2.2 方案

首先创建一个带有Storyboard的SingleViewApplication项目。先使用手动的方式给场景添加导航控制器：

1）从对象库拖拽一个NavigationController对象到storyboard中，删除NavigationController自带的视图控制器（默认是一个表视图控制器）；

2）选中NavigationController对象，往自己的视图控制器上拉线，释放鼠标，在弹出的对话框中在选择root view Controller，就完成了添加导航控制器。

然后将上一步拖拽的NavigationController对象删除，再使用自动嵌入NavigationController的方式给视图控制器添加导航控制器。

选中需要被导航控制器包含的场景，在Xcode菜单栏中选中Editor选项，然后选中Embed In，最后在弹出的窗口中选中NavigationController即可。

最后再创建一个新的场景，从对象库拖拽一个视图控制器对象到storyboard中，在上一个场景中拖拽一个跳转按钮，然后选中按钮按住Control键连线到新创建的场景上，在弹出的菜单中选择Push即可实现界面的跳转。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用手动的方式给场景添加导航控制器

首先创建一个带有Storyboard的SingleViewApplication项目。从对象库拖拽一个NavigationController对象到storyboard中，删除NavigationController自带的视图控制器（默认是一个表视图控制器），如图-9所示：

图-9

然后选中storyboard中的NavigationController对象，往自己的视图控制器上拉线，释放鼠标，在弹出的对话框中选择root view Controller，如图-10所示：

图-10

最后不要忘了将程序入口的箭头移动到NavigaitonController的前面，表示程序从此处入口，如图-11所示：

图-11

步骤二：使用自动的方式给场景添加导航控制器

先将上一步拖拽的NavigationController对象删除，然后选中需要被导航控制器包含的场景，在Xcode菜单栏中选中Editor选项，然后选中Embed In，最后在弹出的窗口中选中NavigationController即可，如图-12所示：

图-12

步骤三：实现Push模式跳转

首先创建一个新的场景，从对象库拖拽一个视图控制器对象到storyboard中。然后在上一个场景中拖拽一个跳转按钮，在右边栏检查器四设置按钮的相关属性。

最后选中按钮，按住Control键往新创建的场景上拉线，在弹出的菜单中选择Push即可实现界面的跳转，如图-13所示：

图-13

如果此时入口箭头消失了，可以在storyboard中选中NavigationController，然后在右边栏检查器四中的Is Initial View Controller选择框上打钩，如图-14所示：

图-14

如果不需要另外写代码，可以不用创建视图控制器类。最后在StoryBoard中完成的界面如图-15所示：

图-15

3 给场景添加Title、按钮、ToolBar等

3.1 问题

本案例直接在上一个案例的基础上实现，学习如何在Storyboard中给导航栏添加标题和按钮，并设置ToolBar工具条，如图-16所示：

图-16

3.2 方案

首先给导航栏添加标题，选中场景一，双击导航栏的中间区域，即可编辑场景一的导航栏所显示的标题，相当于使用代码给self.title属性赋值，也可以在右边栏的检查器四中编辑标题。场景二也可以通过同样的方式编辑标题。

然后给导航栏添加左右按钮，选中场景一，直接从对象库中拖拽一个BarButtonItem控件到场景一的NavigationBar的左区域或右区域即可，可以在检查器四中设置BarButtonItem控件的的相关属性。

最后设置ToolBar工具条，在StoryBoard中可以直接设置显ToolBar，选中NavigationController，在右边栏的检查器四中的shows ToolBar选择框上打勾，然后在具体的界面场景中向ToolBar拖放BarButtonItem。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：给导航栏添加标题

首先给导航栏添加标题，选中场景一，双击导航栏的中间区域，即可编辑场景一的导航栏所显示的标题，相当于使用代码给self.title属性赋值，如图-17所示：

图-17

或者在右边栏的检查器四中编辑导航栏的标题，如图-18所示：

图-18

用同样的方式给场景二的导航栏添加标题。

步骤二：给导航栏添加左右按钮

在Storyboard中选中场景一，从对象库中拖拽一个BarButtonItem控件到导航栏的左区域上，如图-19所示：

图-19

然后在右边栏的检查器四中设置BarButtonItem的相关属性，BarButtonItem的样式、标题、图片等都可以直接进行设置，如图-20，图-21所示：

图-20

图-21

最后按同样的方式再拖拽一个BarButtonItem控件到导航栏的右区域上，如图-21所示：

图-21

在Storyboard中是不能往导航栏拖拽多个左按钮或右按钮的，如果需要放置多个按钮，就只能通过代码的方式。

步骤三：设置ToolBar工具条

首先让ToolBar工具条显示出来，在StoryBoard中可以直接设置显示ToolBar，选中NavigationController，在右边栏的检查器四中的shows ToolBar选择框上打勾，如图-22所示：

图-22

然后选中场景一，向ToolBar依次拖放BarButtonItem，在右边栏的检查器四中可以设置BarButtonItem的样式，完成效果如图-23所示：

图-23

4 将场景嵌入到TabBar

4.1 问题

本案例直接在上一个案例的基础上完成，在StoryBoard中分别使用手动和自动的方式创建带有标签控制器的场景，如图-24所示：

图-24

4.2 方案

和操作导航控制器类似，首先从对象库中拖拽一个TabBarController对象到Storyboard中，删除TabBarController自带的视图控制器。

然后选中TabBarController，按住Control键连线到场景一的NavigaitionController（ToolBar需要隐藏），释放鼠标在弹出的窗口中选择view controllers。

在场景一的NavigationController上选中TabBar的Item，在右边栏的检查器四中设置相关属性，例如按钮样式、标题，显示图片等。以同样的方式给TabBarController再添加两个子视图控制器。

最后将上一步拖拽的TabBarController对象删除，再使用自动嵌入TabBarController的方式给视图控制器添加导航控制器。

选中场景一的导航控制器，在Xcode菜单栏中选中Editor选项，然后选中Embed In，最后在弹出的窗口中选中TabBarController即可。然后以拉线的方式关联其他子视图控制器。

4.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用手动的方式给场景添加标签控制器

从对象库拖拽一个TabBarController对象到storyboard中，删除TabBarController自带的视图控制器，如图-25所示：

图-25

然后选中storyboard中的TabBarController对象，往场景一的NavigationController上拉线，释放鼠标，在弹出的对话框中在选择root view Controller，如图-26所示：

图-26

在场景一的NavigationController上选中TabBar的Item，在右边栏的检查器四中设置相关属性，例如按钮样式、标题，显示图片等，如图-27所示：

图-27

最后以同样的方式给TabBarController添加两个子视图控制器，并将程序入口的箭头放置到TabBarController的前面，表示程序从此处入口，如图-28所示：

图-28

步骤二：使用自动的方式给场景添加标签控制器

先将上一步拖拽的TabBarController对象删除，然后选中需要被导航控制器包含的场景，在Xcode菜单栏中选中Editor选项，然后选中Embed In，最后在弹出的窗口中选中TabBarController即可，如图-29所示：

图-29

然后以拉线的方式关联其他子视图控制器，使用同步骤二相同的方法设置TabBar上Item的属性。

5 使用segue方式跳转时的传值

5.1 问题

Storyboard让界面跳转变得更加的简单，那么同样也会存在界面之间的正向传值和反向传值，本案例使用Segue实现页面之间的跳转和正向传值（反向传值和之前的方法相同），将第一个界面TextField里面的输入内容传递给第二个界面，如图-30所示：

图-30

5.2 方案

首先同样创建好一个SingleViewApplication项目，在Storyboard里面拖放两个视图控制器的场景，分别和两个视图控制器类TRFirstViewController和TRSecondViewController绑定。

其次在第一个场景中拖放一个TextField控件和一个Button控件，并将TextField关联成私有属性textField。

在第二个场景中拖放一个Label控件和一个Button控件，并将Label关联成私有属性label，将Button关联成方法back：，该方法用于回跳到第一个界面。

然后选中场景一中的Button，按住Control键往第二个场景拉线，实现Modal模式的跳转。

在TRSecondViewController类中定义一个NSString类型的公开属性massage，用于接收传递过来的数据。

最后在TRFirstViewController.m文件中重写方法prepareForSegue:sender:，该方法会在界面跳转之前被自动调用，Segue参数就是连接两个场景的Segue对象。在该方法内部将textField输入框中的内容赋值给TRSecondViewController的message属性，从而进行传值。

在TRSecondViewController.m文件中重写方法viewWillAppear：，在此方法中将接收到数据显示到label上；

5.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建项目，搭建场景

在创建好的Xcode项目中创建两个视图控制器类TRFirstViewController和TRSecondViewControlle，全都继承至UIViewController。

在Storyboard里面拖放两个视图控制器的场景，分别和两个视图控制器类TRFirstViewController和TRSecondViewController进行绑定。

其次在第一个场景中拖放一个TextField控件和一个Button控件，并将TextField关联成TRFirstViewController的私有属性textField，代码如下所示：

@interfaceTRFirstViewController ()
@property (weak, nonatomic) IBOutletUITextField *textField;
@end

在第二个场景中拖放一个Label控件和一个Button控件，并将Label关联成TRSecondViewController的私有属性label，将Button关联成方法back：，该方法用于回跳到第一个界面，代码如下所示：

//Label的输出口属性
-@interfaceTRSecondViewController ()
@property (weak, nonatomic) IBOutletUILabel *label;
@end
//Button的back：方法
- (IBAction)back:(UIButton *)sender {
[selfdismissViewControllerAnimated:YEScompletion:nil];
}

步骤二：创建Segue对象，实现界面跳转

选中场景一中的Button，按住Control键往第二个场景拉线，释放鼠标在弹出的窗口中选择Modal模式，实现界面跳转，如图-31所示：

图-31

在TRSecondViewController类中定义一个NSString类型的公开属性massage，用于接收传递过来的数据，代码如下所示：

@interfaceTRSecondViewController : UIViewController
@property (nonatomic,strong) NSString *message;
@end

步骤三：关联代码，实现方法

首先在TRFirstViewController.m文件中重写方法prepareForSegue:sender:，该方法会在界面跳转之前被自动调用，Segue参数就是连接两个场景的Segue对象，可以通过segue.destinationViewControllerSegue属性获取到TRSecondViewController对象，并将textField输入框中的内容赋值给TRSecondViewController的message属性，从而进行传值，代码如下所示：

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
//拿到目标VC对象
TRSecondViewController *destination = segue.destinationViewController;
//给destination的公开属性赋值
destination.message = self.textField.text;
}

最后在TRSecondViewController.m文件中重写方法viewWillAppear：，在此方法中将接收到数据显示到label上，代码如下所示：

-(void)viewWillAppear:(BOOL)animated {
[superviewWillAppear:animated];
self.label.text = self.message;
}

5.4 完整代码

本案例中，TRFirstViewController.m文件中的完整代码如下所示：

#import "TRFirstViewController.h"
#import "TRSecondViewController.h"
@interfaceTRFirstViewController ()
@property (weak, nonatomic) IBOutletUITextField *textField;
@end
@implementationTRFirstViewController
//父类中的方法，此方法会在Segue跳转之前自动调用
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
//拿到目标VC对象
TRSecondViewController *destination = segue.destinationViewController;
//给destination的公开属性赋值
destination.message = self.textField.text;
}
@end

隐藏

本案例中，TRSecondViewController.h文件中的完整代码如下所示：

#import<UIKit/UIKit.h>
@interfaceTRSecondViewController : UIViewController
@property (nonatomic,strong) NSString *message;
@end

本案例中，TRSecondViewController.m文件中的完整代码如下所示：

#import "TRSecondViewController.h"
@interfaceTRSecondViewController ()
@property (weak, nonatomic) IBOutletUILabel *label;
@end
@implementationTRSecondViewController
-(void)viewWillAppear:(BOOL)animated {
[superviewWillAppear:animated];
self.label.text = self.message;
}
- (IBAction)back:(UIButton *)sender {
[selfdismissViewControllerAnimated:YEScompletion:nil];
}
@end

6 使用代码的方式实现界面跳转

6.1 问题

使用Segue实现界面跳转的好处就是方便、灵活。但是程序中经常也会用到手动方式跳转界面。本案例直接在上一个案例的基础上实现，使用代码的方式实现storyboard场景之间的跳转，以及storyboard和xib之间的跳转，如图-32所示：

图-32

6.2 方案

首先让场景一嵌入NavigationController，然后在场景一上面拖拽一个Button控件，并将标题命名为“goToSecondVCByCode”，将按钮关联成TRFirstViewController的方法goToSecondVC：。

其次选中场景二，在右边栏的检查器三中的设置Storyboard ID值，给场景二命名一个标识为“SecondVC”。

然后在TRFirstViewController.m文件中实现goToSecondVC：方法，该方法内部通过Storyboard的instantiateViewControllerWithIdentifier:方法获取到TRSecondViewController对象，并通过push方法实现跳转。

最后实现Stroyboard跳转到xib，创建一个带有xib的视图控制器类TRThirdViewController，在xib中拖放一个回跳按钮，关联成TRThirdViewController的方法backToFirst:，实现该方法通过dismiss方法回跳到第一个界面。

在场景一上面拖拽一个Button控件，并将标题命名为“goToThirdXibByCode”，将按钮关联成TRFirstViewController的方法goToThirdVC：，在该方法内通过initWithNIbName获取到TRThirdViewController对象，并通过push方法实现界面跳转。

6.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用代码实现场景一和场景二之间的跳转

首先让场景一嵌入NavigationController，然后在场景一上面拖拽一个Button控件，并将标题命名为“goToSecondVCByCode”，并将按钮关联成TRFirstViewController的方法goToSecondVC：。

然后选中场景二，在右边栏的检查器三中的设置Storyboard ID值，给场景二命名一个标识为“SecondVC”，如图-33所示：

图-33

最后在TRFirstViewController.m文件中实现goToSecondVC：方法，该方法内部通过Storyboard的instantiateViewControllerWithIdentifier:方法获取到TRSecondViewController对象，并通过push方法实现跳转，代码如下所示：

- (IBAction)goToSecondVCByCode:(UIButton *)sender {
TRSecondViewController *secondVC = [self.storyboardinstantiateViewControllerWithIdentifier:@"SecondVC"];
secondVC.message = self.textField.text;
[self.navigationControllerpushViewController:secondVCanimated:YES];
}

步骤二：实现从Storyboard文件和Xib文件之间的跳转

storyboard和xib是可以一起工作，从storyboard可以直接跳转到xib文件（仅限push跳转方式），操作方式和以前完全相同。

首先创建一个带有xib的视图控制器类TRThirdViewController，继承至UIViewController。

然后在xib文件中拖放一个回跳按钮，并将按钮关联成TRThirdViewController的方法backToFirst:，实现该方法，代码如下所示：

- (IBAction)backToFirst:(UIButton *)sender {
[selfdismissViewControllerAnimated:YEScompletion:nil];
}

最后在场景一上面拖拽一个Button控件，并将标题命名为“goToThirdXibByCode”，将按钮关联成TRFirstViewController的方法goToThirdVC：，在该方法内通过initWithNIbName获取到TRThirdViewController对象，并通过push方法实现界面跳转，代码如下所示：

- (IBAction)goToThirdXibByCode:(UIButton *)sender {
TRThirdViewController *thirdVC = [[TRThirdViewControlleralloc]initWithNibName:@"TRThirdViewController" bundle:nil];
[self.navigationControllerpushViewController:thirdVCanimated:YES];
}

6.4 完整代码

本案例中，TRFirstViewController.m文件中的完整代码如下所示：

#import "TRFirstViewController.h"
#import "TRSecondViewController.h"
#import "TRThirdViewController.h"
@interfaceTRFirstViewController ()
@property (weak, nonatomic) IBOutletUITextField *textField;
@end
@implementationTRFirstViewController
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
TRSecondViewController *destination = segue.destinationViewController;
destination.message = self.textField.text;
}
- (IBAction)goToSecondVCByCode:(UIButton *)sender {
TRSecondViewController *secondVC = [self.storyboardinstantiateViewControllerWithIdentifier:@"SecondVC"];
secondVC.message = self.textField.text;
[self.navigationControllerpushViewController:secondVCanimated:YES];
}
- (IBAction)goToThirdXibByCode:(UIButton *)sender {
TRThirdViewController *thirdVC = [[TRThirdViewControlleralloc]initWithNibName:@"TRThirdViewController" bundle:nil];
[self.navigationControllerpushViewController:thirdVCanimated:YES];
}
@end

7 完成乐库项目中的静态表

7.1 问题

使用storyboard实现静态表视图比xib方式更简单、更方便，更灵活。本案例使用Storyboard重新完成乐库项目中的“更多”界面，如图-34所示：

图-34

7.2 方案

首先同样创建一个SingleViewApplication项目，将Storyboard中原有的场景删除，然后从对象库中拖拽一个TableViewController的对象到Storyboard中，该表视图控制器就是该程序的根视图控制器。

其次让TableViewController嵌入NavigationController，在Storyboard中选中TableView，然后在右边栏的第四个检查器中，将content属性设置为Static Cells即将表视图设置为静态，可以直接在storyboard的场景中操作表视图的表头视图、分区和单元格。

然后根据界面需要直接在表视图的表头视图、分区和单元格上拖拽所需要的视图和控件。

再创建一个表视图控制器类TRMusicTableViewController，和Storyboard中的场景进行绑定，将TableView的三问方法删除，不再需要手动实现。

最后在Storyboard中通过Segue实现点击单元格跳转和点击辅助视图跳转。

7.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：创建静态表视图场景

首先在创建好的Xcode项目中，将Storyboard中原有的场景删除，然后从对象库中拖拽一个TableViewController的对象到Storyboard中，该表视图控制器就是该程序的根视图控制器，如图-35所示：

图-35

然后让TableViewController嵌入NavigationController，在Storyboard中选中TableView，然后在右边栏的第四个检查器中，将content属性设置为Static Cells即将表视图设置为静态，将Sections设置为3，表示有三个分区，如图-36所示：

图-36

步骤二：表头视图、分区和单元格

在storyboard中可以直接操作静态表视图的表头视图、分区和单元格，包括拖放视图和控件，设置坐标和宽高，还可以直接复制粘贴。

首先设置表头视图，直接拖放一个View控件到TableView中，注意要摆放到表头视图所在的位置（在单元格的前面），如图-37所示：

图-37

在View视图界面上直接拖放所需要的控件，并在右边栏的检查器中设置各个控件的相关属性，如图-38所示：

图-38

其次设置每个TableViewCell，本案例中有三个分区，第一个分区何第二个分区都有三个单元格，第三个分区有一个单元格。每个分区的单元格都是拖放的一个TableViewCell对象，先设置前两个分区的单元格。

选中需要编辑的单元格，在右边栏的第四个检查器中可以设置单元格的各种属性，包括单元格的样式，辅助视图的样式，分隔线的样式，图片等，如图-39所示：

图-39

然后根据界面需求直接将对象库中的控件拖放到TableViewCell的ContentView中，其中第二个分区的第二个单元格还需要自定义辅助视图，在Storyboard中自定义辅助视图也很简单，将一个Switch控件拖放到场景中，但不要放进视图控制器中，如图-40所示：

图-40

选中场景中TableViewCell，在右边栏的检查器六中(或选中TableViewCell点右键)，连接accessoryView到该控件，如图-41所示：

图-41

第一分区和第二分区的tableViewCell设置完成后，Storybaord中的界面如图-42所示：

图-42

接下来设置第三个分区的单元格，第三个分区的单元格只有一个，但是单元格的高度是自定义的，首先选中单元格，在右边栏的检查器四中将style设置为Custom，在检查器五中设置单元格的高度，如图-43所示：

图-43

然后调整整个TableView的高度，选中场景在右边栏的检查器四中将Size 设置为Freeform，如图-44所示：

图-44

再选中tableView，在检查器五中设置TableView的高度，如图-45所示：

图-45

最后在tableViewCell的ContentView上拖放界面所需要的控件，并设置相关属性，最后完成的效果如图-46所示：

图-46

步骤三：删除三问方法

创建一个表视图控制器类TRMusicTableViewController，继承至UITableViewController，注意不要再带有xib文件，将TRMusicTableViewController和Storyboard中的场景进行绑定，如图-47所示：

图-47

然后在TRMusicTableViewController.m文件中删除自动生成的三问协议U方法，通过Storyboard搭建的静态表视图不在需要通过代码加载数据，Storyboard会自动帮我们完成创建，可以根据程序需要实现表视图其他的委托事件的响应方法，例如didSelectRowAtIndexPath:方法。

步骤四：通过Segue实现跳转

在Storyboard中点击单元格Cell跳转和点击辅助视图AccessoryView跳转都可以通过Segue来实现，不需要额外写代码。

首先在storyboard中另外拖放两个场景，然后选中第一个分区的第一个单元格，按住Control键往第二个场景上拖拽，释放鼠标选Selection Segue选项下的Push模式即完成通过点击单元格跳转，如图-48所示：

图-48

再次选中第一个分区的第一个单元格，按住Control键往第三个场景上拖拽，释放鼠标，这次选择Accessory Action选项下的Push模式即完成通过点击单元格的辅助视图完成跳转，如图-49所示：

故事板(Storyboard)

原文：http://www.cnblogs.com/52190112cn/p/5049388.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)