iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器（对应一个设计文件），其实在IOS中也可以通过设计工具设计界面不用编写代码，这个工具就是Interface Builder。用Interface Builder编辑的文件在iOS5之前是一个“.xib”文件，从IOS5开始进行了改进，使用“.storyboard”文件进行设计。其实在上面我们已经看到这个文件，这里重点说明一下Storyboard文件的使用。

小编有个自己学习交流群681503716（验证编号：大鲨）在iOS学习道路上的小伙伴可以加一下哦~

首先我们打开Main.storyboard，此时可以看到一个Interface Builder界面设计器出现在我们眼前：

在这个界面中整个核心就是右侧视图控制器ViewController，在ViewController中有一个视图UIView，这个视图用来放置其他用户操作控件。视图控制器左侧的箭头表示这个视图控制器是个主视图控制器，程序启动之后默认就会直接显示这个视图控制器的视图。我们可以在项目属性中通过修改“Main Interface”属性来修改主视图控制器。

这里我们不妨从Xcode右侧工具栏Object Library中拖放一些组件在上面简单完成一个登录布局。

要实现这个登录，那么接下来就是事件和属性绑定的问题，大家应该可以猜到登录的逻辑代码肯定在ViewController.m中编写，那么storyboard文件是如何关联到这个类的呢？如果我们在storyboard界面选中ViewController在Xcode右侧切换到Identity Inspector视图就会发现里面当前设置的是ViewController类，通过这个设置Main.storyboard和ViewController关联在一起。

那么如何在代码中读取两个TextField的值并通过点击按钮触发相关事件验证登录合法性呢？要想在代码中使用UITextField，并且添加按钮点击事件，则必须在ViewController.h中定义两个UITextField属性和一个登录方法。

上面代码我们需要解释一下IBOutlet、IBAction，其余代码和我们之前写的ObjC没有任何区别。

• IBOutlet:IBOutlet没有做任何操作，它的唯一作用就是告诉Interface Builder这个属性可以被关联到其中某个控件（在代码中可以看到代码前面多了空心圆点）。
• IBAction:其实就是void，只是当你定义为IBAction在Interface Builder中可以关联到某个控件的事件方法（后面的关联操作将会看到，而且我们在代码中也可以看到代码前面多了空心圆点）；

下面看一下storyboard中的控件和代码中定义的属性和事件如何关联。Xcode为我们提供了几种方式来实现代码和storyboard控件的关联：

1.拖拽控件到代码中（首先点击Xcode右上方“Show the Assistant editor”切换对应视图，然后在代码中打开.h文件，同时打开Interface Builder，按住ctrl键拖拽控件到代码中相应的位置进行关联)，关联后属性或方法前的空心圆变成实心表示已经关联到具体控件(注意：事实上，从控件拖拽到代码时如果代码中没有定义对应的属性和方法Interface Builder会自动生成代码)。

2.从控件场景中拖拽控件到代码，关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。(在Interface Builder中点击左下角“Show Document outline”显示控件结构树，选中相应的控件按住Ctrl键拖拽到代码中的属性或方法上)

3. 在控件上右键找到对应的属性或方法关联到代码中对应的属性或方法即可，关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。

4.与方法3类似，不再截图，只是通过View Control Scene中的控件右键来关联，关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。（在Interface Builder中点击左下角Show Document outline显示控件结构树，选中相应的控件右键拖拽到代码中的属性或方法上）

5.对于前面几种方法其实我们还可以直接从代码拖拽到控件上面，这里简单演示一种,其他情况大家可以自己试验。

如果要删除关联，可以采用第三、第四种方式在控件上右键，在关联菜单中找到对应的关联删除即可。此外需要注意对于一个控件而言可能有多个事件，当我们使用第三种或第四种方式直接选择具体某个事件关联到login:方法自然没有问题，但是第一、第二、第五种方式没有提示我们关联到哪个事件而是使用一个控件的默认事件（对于UIButton就是Touch Up Inside事件）。

既然控件和代码属性或方法已经做了关联，这里我们看一下具体效果，这里简单修改一下ViewController.m

//
//  ViewController.m
//  FirstIOS
//
//  Created by Kenshin Cui on 14-2-23.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
            
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void)login:(UIButton *)btn{
    if ([_phoneNumber.text isEqual:@"123"]&&[_password.text isEqual:@"456"]) {
        NSLog(@"登录成功！");
    }
}

@end

这里实现了login:方法模拟登录的过程，可以发现当在手机号码中输入“123”，在密码中输入“456”点击登录会输出”登录成功！“。