Storyboard的基础知识－界面管理、多View切换、View间数据传递

最新推荐文章于 2020-05-03 20:03:30 发布

guofatfat

最新推荐文章于 2020-05-03 20:03:30 发布

阅读量2.5k

点赞数

分类专栏： ios 文章标签： iphone 界面 xcode

ios 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章转载自http://www.xcoder.cn/index.php/archives/479

Storyboard是现在Apple推荐的界面管理方式，我初学，使用的Xcode 5，默认已经不再使用XIB管理界面了，不过Storyboard跟XIB其实也是一样的，都是一个XML文件，只不过Storyboard的XML结构更加复杂。

此项目的Storyboard中View的概览

一、Storyboard与XIB的区别

在之前使用XIB进行iOS应用的界面管理时，使用IB只能对一个界面一个界面进行单独管理，界面之前的逻辑关系需要开发程序员来牢记，如果界面过多，那会是一个非常复杂的关系。

引入Storyboard后，我们可以看到上面的图可以看出，我们可以在一个窗口中管理多个View，多个View之间的关系非常清晰，所以这极大方便了开发者理清各个View之间的逻辑关系。

二、认识Storyboard中的元素

在Storyboard中有三种元素——起始标签、各个界面的View和联系各个View关系的Segue。

1、起始标签

Storyboard起始标签

一个Storyboard有且只有一个起始标签，起始标签指向的是这个Storyboard被启动时首先显示的界面，也就是程序的UI入口。

2、View

Storyboard中的View

一个View对应一个界面，类似于一个XIB。

3、Segue

Segue表示了View之间的关系

Storyboard中Modal方式的Segue

Storyboard中Navigation方式的Segue

Storyboard中Push方式的Segue

三、创建并运行一个Storyboard

创建好一个iOS项目后，如果是Xcode 5，新建一个非Empty项目，都将会自动创建一个Main.storyboard，并将这个Storyboard设置为默认的UI界面。

手动创建一个Storyboard的方法是选择新建一个文件（Command+N），然后在左边选择User Interface，再在右边的模版中选择Storyboard。

新建一个Storyboard

然后选择设备类型（Device Family），可以选择iPhone、iPad。iPhone表示这个界面是为iPhone设备设计的，iPad表示这个界面是为iPad设备设计的。

然后输入文件名并保存，我这里保存为User。

接下来就要将这个Storyboard设置为默认的UI管理器。有两种方法，一种是在项目文件管理器中选择项目名称，然后选择General，然后设置Main Interface。

设置iOS应用主界面

这里选择刚才创建的User.storyboard。

另一种方法是在代码中来完成的，打开项目的AppDelegate.m文件，修改- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法如下：

 
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 
    {
 
        // Override point for customization after application launch.
 
        // 创建一个UIStoryboard对象
 
        UIStoryboard * storyboard = [UIStoryboard storyboardWithName:@"User" bundle:nil];
 
        // 将storyboard设置为要显示的UI
 
        self.window.rootViewController = [storyboard instantiateInitialViewController];
 
        return YES;
 
    }

为了能更好的显示，我项目中设置的Main Interface为Main.storyboard，然后设置如上代码，可以看到哪个最后执行，或者说哪个优先级更高。我还为这个User.storyboard添加了一个UIViewController，并在上面添加了一个UILabel。程序运行结果如下：

Storyboard启动

四、Storyboard中各个界面间的切换Segue

这里我用到了我之前做的Main.storyboard了，所以参看第一关系张图

1、类似于XIB的界面间切换

就是给定一个按钮，然后为这个按钮添加了一个Touchup in side事件，当用户按下按钮时触发事件。新建一个ViewAController，并添加一个按钮，命名为Jump ViewC，新建一个ViewCController，并在ViewCController中添加一个Label，更新文字为View C。界面如下：

Storyboard中modal方式传递的Segue

注意了，这里没有用到Segue，只是为Jump ViewC按钮添加一个onClick的事件处理方法如下：

 
    - (IBAction)onClick:(id)sender {
 
        // 通过Storyboard中的View的Identifier标签来创建对应的ViewController
 
        XCViewCController * controller = [self.storyboard instantiateViewControllerWithIdentifier:@"viewC"];
 
        // 将这个ViewController设置为当前的ViewController
 
        [self presentViewController:controller animated:YES completion:nil];
 
    }

这里的Identifier在Identify Inspector中设置。

为Storyboard中的View设置Identifier

这种方法当然跟使用XIB方式没有多大的区别，所以不推荐在Storyboard中使用。

2、使用modal方式的segue来控制界面中的逻辑关系。

对于通常的View之间的UI界面切换，都可以使用modal方式。这里还新建一个ViewBController，并在其中添加一个名为Show A的button。再在ViewAController中添加一个Show B的button，界面已经在上面给出了。

将ViewAController中的Show B按钮选中，然后按住键盘上的control按钮，并用鼠标拖出一条蓝线，将蓝线指到ViewBController中，松开鼠标，弹出一个对话框如下：

Storyboard中选择Segue的方式

这里选择modal方式，这里也可以看出，Segue的方式有push、modal和custom三种方式。

同样的，在ViewBController中将Show A按钮通过modal方式连接到ViewAController中，这样我们就可以运行程序后用户点Show B按钮，UI界面跳转到ViewBController中，再点Show A按钮又跳转回ViewAController中。

3、使用push方式的segue来控制界面之间的逻辑关系

push方式就是上面所见到的Action Segue中的push方式。

push方式与modal方式不同的是，push方式只能使用在通过Navigation Controller派生出来的View中。

所以这里在Storyboard中添加一个Navigation Controller，并再新建一个ViewController并分别为其创建对应的View Controller类，界面如下：

Navigation Controller

添加一个按钮，然后按照上面的方法将按钮通过push方式连接到另外一个View中。

至于custom方法就是自定义传递方式了，这个segue需要自定义。

五、Storyboard中View间的数据传递

Storyboard中View之间的数据传递是通过Segue来传递的，当为一个按钮添加一个push或modal方法后，用户点击按钮时，在界面跳转的同时，还会触发方法- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

我们可以通过segue来传递数据到另外一个UIView中。如上图，当用户点击button后，跳转到另外一个View中，并传递另外一个View中Label所要显示的类容。

但一个View中可能有多个Segue，那来怎么判断呢？点击Segue，为每个Segue设定一个Identifier，这个跟设置View的Identifier一样的。然后重写上面这个方法。这里代码如下：

 
    - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
 
        // 在控制台打印Segue的信息
 
        NSLog(@"Source Controller = %@", [segue sourceViewController]);
 
        NSLog(@"Destination Controller = %@", [segue destinationViewController]);
 
        NSLog(@"Segue Identifier = %@", [segue identifier]);
 
        // 判断是哪个segue被执行了，并执行相应的操作
 
        if ([[segue identifier] isEqualToString:@"buttonPush"]) {
 
            // 获取目标View的Controller对象
 
            XCButtonPushViewController * pushController = [segue destinationViewController];
 
            // 设置目标Controller对象的数据模型
 
            pushController.textFieldString = [segue identifier];
 
        }
 
    }

然后目标View的Controller类如下：

XCButtonPushViewController.h

 
    #import <UIKit/UIKit.h>
 
    @interface XCButtonPushViewController : UIViewController
 
    @property (retain, nonatomic) NSString * textFieldString;
 
    @end

XCButtonPushViewController.m

 
    #import "XCButtonPushViewController.h"
 
    @interface XCButtonPushViewController ()
 
    @property (weak, nonatomic) IBOutlet UILabel *textField;
 
    @end
 
    @implementation XCButtonPushViewController
 
    - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
 
    {
 
        self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
 
        if (self) {
 
            // Custom initialization
 
        }
 
        return self;
 
    }
 
    - (void)viewDidLoad
 
    {
 
        [super viewDidLoad];
 
        // Do any additional setup after loading the view.
 
        _textField.text = _textFieldString;
 
    }
 
    - (void)didReceiveMemoryWarning
 
    {
 
        [super didReceiveMemoryWarning];
 
        // Dispose of any resources that can be recreated.
 
    }
 
    @end