故事板(Storyboard)

2023-10-31

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:,在该方法中通过代码的方式实现界面的回跳,代码如下所示:

  1. (IBAction)back:(UIButton *)sender {
  2. [selfdismissViewControllerAnimated:YEScompletion:nil];
  3. }

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

步骤四:通过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的标识,代码如下所示:

 
  1. (IBAction)goToSecond:(UIButton *)sender {
  2. [selfperformSegueWithIdentifier:@"Segue" sender:nil];
  3. }

1.4 完整代码

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

 
  1. #import "TRViewController.h"
  2. @interfaceTRViewController ()
  3. @end
  4. @implementationTRViewController
  5. (IBAction)goToSecond:(UIButton *)sender {
  6. [selfperformSegueWithIdentifier:@"Segue" sender:nil];
  7. }
  8. @end
 

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

 
  1. #import "TRViewController2.h"
  2. @interface TRViewController2 ()
  3. @end
  4. @implementation TRViewController2
  5. (IBAction)back:(UIButton *)sender {
  6. [selfdismissViewControllerAnimated:YEScompletion:nil];
  7. }
  8. @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,代码如下所示:

 
  1. @interfaceTRFirstViewController ()
  2. @property (weak, nonatomicIBOutletUITextField *textField;
  3. @end

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

 
  1. //Label的输出口属性
  2. -@interfaceTRSecondViewController ()
  3. @property (weak, nonatomicIBOutletUILabel *label;
  4. @end
  5. //Button的back:方法
  6. (IBAction)back:(UIButton *)sender {
  7. [selfdismissViewControllerAnimated:YEScompletion:nil];
  8. }

步骤二:创建Segue对象,实现界面跳转

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

图-31

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

 
  1. @interfaceTRSecondViewController : UIViewController
  2. @property (nonatomic,strongNSString *message;
  3. @end

步骤三:关联代码,实现方法

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

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

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

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

5.4 完整代码

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

 
  1. #import "TRFirstViewController.h"
  2. #import "TRSecondViewController.h"
  3. @interfaceTRFirstViewController ()
  4. @property (weak, nonatomicIBOutletUITextField *textField;
  5. @end
  6. @implementationTRFirstViewController
  7. //父类中的方法,此方法会在Segue跳转之前自动调用
  8. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
  9. //拿到目标VC对象
  10. TRSecondViewController *destination = segue.destinationViewController;
  11. //给destination的公开属性赋值
  12. destination.message = self.textField.text;
  13. }
  14. @end

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

 
  1. #import<UIKit/UIKit.h>
  2. @interfaceTRSecondViewController : UIViewController
  3. @property (nonatomic,strongNSString *message;
  4. @end
 

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

 
  1. #import "TRSecondViewController.h"
  2. @interfaceTRSecondViewController ()
  3. @property (weak, nonatomicIBOutletUILabel *label;
  4. @end
  5. @implementationTRSecondViewController
  6. -(void)viewWillAppear:(BOOL)animated {
  7. [superviewWillAppear:animated];
  8. self.label.text = self.message;
  9. }
  10. (IBAction)back:(UIButton *)sender {
  11. [selfdismissViewControllerAnimated:YEScompletion:nil];
  12. }
  13. @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方法实现跳转,代码如下所示:

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

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

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

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

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

 
  1. (IBAction)backToFirst:(UIButton *)sender {
  2. [selfdismissViewControllerAnimated:YEScompletion:nil];
  3. }

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

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

6.4 完整代码

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

 
  1. #import "TRFirstViewController.h"
  2. #import "TRSecondViewController.h"
  3. #import "TRThirdViewController.h"
  4. @interfaceTRFirstViewController ()
  5. @property (weak, nonatomicIBOutletUITextField *textField;
  6. @end
  7. @implementationTRFirstViewController
  8. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
  9. TRSecondViewController *destination = segue.destinationViewController;
  10. destination.message = self.textField.text;
  11. }
  12. (IBAction)goToSecondVCByCode:(UIButton *)sender {
  13. TRSecondViewController *secondVC [self.storyboardinstantiateViewControllerWithIdentifier:@"SecondVC"];
  14. secondVC.message = self.textField.text;
  15. [self.navigationControllerpushViewController:secondVCanimated:YES];
  16. }
  17. (IBAction)goToThirdXibByCode:(UIButton *)sender {
  18. TRThirdViewController *thirdVC [[TRThirdViewControlleralloc]initWithNibName:@"TRThirdViewController" bundle:nil];
  19. [self.navigationControllerpushViewController:thirdVCanimated:YES];
  20. }
  21. @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所示:



from: http://www.cnblogs.com/52190112cn/p/5049388.html


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

故事板(Storyboard) 的相关文章

随机推荐

  • 上拉电阻和下拉电阻的作用详解

    一 定义 1 上拉就是将不确定的信号通过一个电阻嵌位在高电平 电阻同时起限流作用 下拉同理 2 上拉是对器件注入电流 下拉是输出电流 3 弱强只是上拉电阻的阻值不同 没有什么严格区分 4 对于非集电极 或漏极 开路输出型电路 如普通门电路
  • HTTP服务器实现(一)

    实现一个HTTP服务器就是实现一个程序可以接受客户端发送给服务器进程的请求消息 通过解析这些请求消息 做出相应的响应 下面我们先来梳理一下整体的思路 进行服务器的初始化 int init server char ip int port in
  • FPGA时序约束系列文章汇总

    时序约束在FPGA开发中起着非常关键的作用 与时序约束相关的方面包括时钟分析 路径分析 布线和布局优化等 时序约束的正确性和准确性对于设计的成功是至关重要的 因为它们对电路的时序性能 功耗和资源利用率有着重要影响 有效的时序约束可以帮助设计
  • UE4开发学习笔记(双人游戏共享视角,共享相机)

    先创建一个共享相机的actor类share camera 里面只要spring arm和camera就行 在关卡蓝图里设置摄像机位置 setviewtargetwithblend是将character本身的摄像机过渡到公共摄像机 这里的bl
  • 前端小白练习题查缺补漏2

    1 声明不是 HTML 标签 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 声明没有结束标签 声明对大小写不敏感 2 end Math pow 2 50 111111 假设的值 var start end 100
  • duilib-自定义圆形按钮-环形进度条控件

    duilib 自定义圆形按钮 环形进度条控件 如何自定义一个圆形按钮控件内嵌到环形进度条底部 点击按钮刷新进度条值 类似下图 1 在UIDefine h中增加宏定义 define DUI CTR BTN PROGRESS T btnProg
  • sqli-labs(27)

    0X01 先查询闭合 id 1 报错 id 1 正确 知道是 的闭合语句 0X02那么开始我们的注入之旅 空格过滤了 尝试一下 0a绕过 也被过滤了 那么用and 1 1构造闭合 id 1 1 1 显示正确 我们来爆一下数据名称 哦豁 un
  • 产品经理工作积累(1)

    相比较做技术工作的人来说 做产品工作的更倾向于软能力 而这种软能力体现在个人的产品思想上 更或者说做产品的思维或理念 做产品除了本身的产品设计能力外 还有一点就是产品的思想 同一种产品不太的产品做出来后产品形态都会不同 特别是对于一些有独特
  • 在 Shell 脚本中调用另一个 Shell 脚本的三种方式

    先来说一下主要以下有几种方式 fork 如果脚本有执行权限的话 path to foo sh 如果没有 sh path to foo sh exec exec path to foo sh source source path to foo
  • android 反编译方法、工具介绍

    网上有很多的反编译文章 个人认为写的比较好的文章有 APK反编译得工具总结 转载 hayhx 博客园 我也是参考其文章来的 本人写此文章目的 以及反编译运用场景 主要有以下几方面 记录反编译的方法 方便自己用的时候比较方便 起到记录的作用
  • python词频统计_Python中文词频统计

    1 下载一长篇中文小说 2 从文件读取待分析文本 3 安装并使用jieba进行中文分词 pip install jieba import jieba ljieba lcut text import jieba txt open r piao
  • async 和 await

    async async是一个加在函数前面的修饰符 被async修饰的函数会默认返回一个promise对象 可以使用then方法添加回调函数 返回的promise对象的结果是由async函数执行的返回值的结果来决定的 1 当async函数内部
  • 一步步教你用 WebVR 实现虚拟现实游戏

    翻译 疯狂的技术宅 www smashingmagazine com 2018 11 vir 在本教程中 我们将创建三维对象并为它们添加简单的交互 此外 你还可以学到如何在客户端和服务器之间建立简单的消息传递系统 虚拟现实 VR 是一种依赖
  • 说说HashMap的扩容机制

    HashMap的扩容机制 HashMap的数据结构 HashMap几个重要的元素 HashMap的扩容过程 1 为什么扩容 2 什么时候进行扩容 3 怎么扩容 HashMap的数据结构 JDK1 8为例 如图 先知道三个概念 table 存
  • Vmware安装Ubuntu出现 unable to find a medium containing a live file system

    一 前言 由于未知的原因 使用Vmware安装Ubuntu的时候 总是遇到奇怪的问题 忘记截图了 大致是 unable to find a medium containing a live file system 找了几个帖子 参考1 参考
  • ajax 调用node,Node.js 远程调用 方法大全

    关于Node js 远程调用 远程调用 简称 RPC 主要是指服务器或集群之间对处理过程的调用 通过远程调用可以打通不同系统之间的数据与功能 或是抽离与建立公共的逻辑统一提供服务 远程调用的两端也称为远程调用的客户端与服务端 一般是多对多的
  • 借助模糊逻辑将文化算法与和谐搜索相结合进行学习——文化和谐学习算法(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 Matlab代码实现 4 参考文献 1 概述 文化和谐学习算法 创建于 18 Jan 2
  • 剑指 Offer 24. 反转链表

    定义一个函数 输入一个链表的头节点 反转该链表并输出反转后链表的头节点 示例 输入 1 gt 2 gt 3 gt 4 gt 5 gt NULL 输出 5 gt 4 gt 3 gt 2 gt 1 gt NULL 代码 Definition f
  • exchange 系统管理器 服务器,在“exchange系统管理器”安全里有个receive as是什么权限?谢谢...

    您好 用Visual Basic访问Microsoft Exchange和Outlook的数据 想通过Access中的Visual Basic for Applications VBA 和数据访问对象 DAO 的方法和对象来连接和导入来自E
  • 故事板(Storyboard)

    1 使用Storyboard完成各项常见功能 1 1 问题 故事板Storyboard是IOS5开始引入的一个新的系统 将多个视图文件 类似xib文件 集中到一个单独的可视化工作区间 负责创建和管理所有的界面及界面间的跳转 每一个Story