iOS开发19：Storyboard的简单使用

时间 2019-11-09

原文原文链接

以前作的例子，咱们常常会用到.xib文件，在其中咱们能够进行界面的设计。不过若是想切换视图，咱们就得本身写不少代码。自从苹果推出了Storyboard，咱们能够在一个编辑区域设计多个视图，并经过可视化的方法进行各个视图之间的切换。以下图：app

上图中有两种箭头：左边的箭头表示程序刚开始运行时加载的控制器；右边的称为Segue，这个表示视图之间的切换，或者表示链接Navigation Controller的Root View Controller。ide

Storyboard功能强大，经过它不只能够单独设计每个视图，还能很简单地实现各个视图之间的切换。字体

接下来的例子主要显示Storyboard的功能，顺便用Storyboard实现了静态表格等功能。为了显示Storyboard的功能，咱们从Empty Application开始咱们的例子。atom

一、运行Xcode 4.2，新建一个Empty Application，名称为Storyboard Test：.net

二、打开AppDelegate.m，找到didFinishLaunchingWithOptions方法，删除其中代码，使得只有return YES;语句。设计

三、建立一个Storyboard：code

在菜单栏依次选择File — New — New File，在弹出的窗口，左边选择iOS组中的User Interface，右边选择Storyboard：orm

以后单击Next，选择Device Family为iPhone，单击Next，输入名称MainStoryboard，并设好Group：继承

单击Create，这样就建立了一个Storyboard。ip

四、配置程序，使得从MainStoryboard启动：

先单击左边带蓝色图标的Storyboard Test，而后选择Summary，接下来在Main Storyboard中选择MainStoryboard：

这样，当运行程序时，就从MainStoryboard加载内容了。

五、单击MainStoryboard.storyboard，会发现编辑区域是空的。拖一个Navigation Controller到编辑区域：

六、选中右边的View Controller，而后按Delete键删除它。以后拖一个Table View Controller到编辑区域：

七、咱们将在这个Table View Controller中建立静态表格，不过先要将其设置为左边Navigation Controller的Root Controller：

选中Navigation Controller，按住Control键，向Table View Controller拉线：

松开鼠标后，在弹出菜单选择Relationship - rootViewController：

以后，两个框之间会出现一个链接线，这个就能够称做是Segue。

八、选中Table View Controller中的Table View，以后打开Attribute Inspector，设置其Content属性为Static Cells：

这样你会发现Table View中出现了三行Cell。在上图你能够设置不少熟悉，好比Style、Section数量等。

九、设置行数：

选中Table View Section，在Attribute Inspector中设置其行数为2：

而后选中每一行，设置其Style为Basic：

设置第一行中Label的值为：Date and Time，第二行中的Label为List；以后选中下方的Navigation Item，在Attribute Inspector设置Title为Root View，Back Button为Root：

十、咱们实现单击表格中的Date and Time这一行实现页面转换，在新页面显示切换时的时间。

在菜单栏依次选择File — New — New File，在弹出的窗口左边选择iOS中的Cocoa Touch，右边选择UIViewController subclass：

单击Next，输入名称DateAndTimeViewController，可是不要选XIB：

以后，选好位置和Group，完成建立。

十一、再次打开MainStoryboard.storyboard，拖一个View Controller到编辑区域，而后选中这个View Controller，打开Identity Inspector，设置class属性为DateAndTimeViewController：

这样，咱们就能够向DateAndTimeViewController建立映射了。

十二、向新拖入的View Controller添加控件，以下图：

而后将显示为Label的两个标签向DateAndTimeViewController.h中建立映射，名称分别是dateLabel、timeLabel：

1三、打开DateAndTimeViewController.m，在ViewDidUnload方法以后添加代码：

//每次切换到这个试图，显示切换时的日期和时间
- (void)viewWillAppear:(BOOL)animated {
    NSDate *now = [NSDate date];
    dateLabel.text = [NSDateFormatter
                      localizedStringFromDate:now
                      dateStyle:NSDateFormatterLongStyle
                      timeStyle:NSDateFormatterNoStyle];
    timeLabel.text = [NSDateFormatter
                      localizedStringFromDate:now
                      dateStyle:NSDateFormatterNoStyle
                      timeStyle:NSDateFormatterLongStyle];
}

1四、打开MainStoryboard.storyboard，选中表格的行Date and Time，按住Contrl，向View Controller拉线：

在弹出的菜单选择Push：

这样，Root View Controller与DateAndTimeViewController之间就出现了箭头，运行时当点击表格中的那一行，视图就会切换到DateAndTimeViewController。

1五、选中DateAndTimeViewController中的Navigation Item，在Attribute Inspector中设置其Title为Date and Time：

1六、运行一下，首先程序将加载静态表格，表格中有两行：Date and Time以及List，单击Date and Time，视图切换到相应视图，单击左上角的Root按钮，视图回到Root View。每次进入Date and Time视图，显示的时间都会不一样：

1七、接下来，咱们将要实现，单击List行，显示一个表格，而且单击表格中的某一行，咱们能够在新弹出的视图中编辑该行内容。首先建立ViewController文件：ListViewController、ListEditViewController，前者继承UITableViewController，后者继承UIViewController，参照第10步。都不要建立XIB文件。

而后打开MainStoryboard.storyboard，拖一个Table View Controller和View Controller到编辑区域，调整全部视图在编辑区域的位置，以下图：

设置新拖入的Table View Controller和View Controller的class属性分别是ListViewController和ListEditViewController，参考第11步。

1八、参照第14步，从Root View Controller中的List那一行向List View Controller拉线，并在弹出菜单也选择Push。而后选中List View Controller的Navigation Item，设置Title及Back Button都为List，能够参照第9步。

1九、向List View Controller中的表格区域拖入一个Table View Cell，这样其中就有两个Cell了。设置第一个Cell的Identifier属性为GreenIdentifier。向第一个Cell中拖入一个Label，设置其字体颜色为绿色。一样对第二个Cell进行设置，Identifier属性为RedIdentifier，往其中拖入Label，设置字体颜色为红色。两个Label的Tag属性都设为1。

20、打开ListViewController.m，向其中添加代码：

20.1 在#import的下一行添加代码：

@interface ListViewController ()
@property (strong, nonatomic) NSMutableArray *listArray;
@property (copy, nonatomic) NSDictionary *editedSelection;
@end

20.2 在@implementation以后添加代码：

@synthesize listArray;
@synthesize editedSelection;

20.3 找到viewDidLoad方法，向其中添加代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    NSMutableArray *array = [[NSMutableArray alloc] initWithObjects:
                             @"Horse", @"Sheep", @"Pig", @"Dog",
                             @"Cat", @"Chicken", @"Duck", @"Goose",
                             @"Tree", @"Flower", @"Grass", @"Fence",
                             @"House", @"Table", @"Chair", @"Book",
                             @"Swing" ,nil];
    self.listArray = array;
}

20.4 找到numberOfSectionsInTableView方法，使其返回1，并删掉#warning。

20.5 找到numberOfRowsInSection方法，删掉#warning，使其返回[listArray count]：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [listArray count];
}

20.6 找到cellForRowAtIndexPath方法，修改其中代码：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSUInteger row = [indexPath row];
    NSString *identifier = nil;
    if (row%2 == 0) {
        identifier = @"GreenIdentifier";
    }else 
        identifier = @"RedIdentifier";
  
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    
    UILabel *cellLabel = (UILabel *)[cell viewWithTag:1];
    cellLabel.text = [listArray objectAtIndex:row];
    
    return cell;
}

2一、运行一下，当单击List行时，页面切换到咱们List视图：

2二、下面实现单击List表格中的某一行，视图切换，而且视图中的内容与以前选中的行相关，而后能够对其进行编辑，返回后，原来的数据也会发生改变。

打开MainStoryboard.storyboard，仿照第14步，从List View Controller中的两行向List Edit View Controller拉线，在弹出菜单选择Push。这样List Edit View Controller视图中就出现了Navigation Item，选中它，设置Title为Edit。这样，单击List表格中的某一行，视图都会切换到List Edit View Controller。

2三、打开ListViewController.m，在@end以前添加代码：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    //获取目的ViewController
    UIViewController *destination = [segue destinationViewController];
    if ([destination respondsToSelector:@selector(setPreViewController:)]) {
        //将自身传递给目的ViewController
        [destination setValue:self forKey:@"preViewController"];
    }
    if ([destination respondsToSelector:@selector(setSelection:)]) {
        //目的ViewController中的selection属性存储的就是须要编辑的内容及其在表格中的位置
        NSIndexPath *indexPath = [self.tableView indexPathForCell:sender];
        id object = [self.listArray objectAtIndex:indexPath.row];
        NSDictionary *selection = [NSDictionary dictionaryWithObjectsAndKeys:
                                   indexPath, @"indexPath",
                                   object, @"object",
                                   nil];
        [destination setValue:selection forKey:@"selection"];
    }
}

在ViewDidUnload方法以后添加代码：

- (void)setEditedSelection:(NSDictionary *)dict {
    if (![dict isEqual:editedSelection]) {
        editedSelection = dict;
        NSIndexPath *indexPath = [dict objectForKey:@"indexPath"];
        id newValue = [dict objectForKey:@"object"];
        [listArray replaceObjectAtIndex:indexPath.row withObject:newValue];
        [self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]
                              withRowAnimation:UITableViewRowAnimationAutomatic];
    }
}

2四、打开MainStoryboard.storyboard，找到Edit视图，向其中拖一个Text Field：

而后为这个Text Field向ListEditViewController.h中建立Outlet映射，名称为editText。

2五、打开ListEditViewController.h，向其中添加属性：

@property (copy, nonatomic) NSDictionary *selection; 
@property (weak, nonatomic) id preViewController;

2六、打开ListEditViewController.m，添加代码：

26.1 在@implementation的下一行添加代码：

@synthesize preViewController;
@synthesize selection;

26.2 找到ViewDidLoad方法，它默认是被注释掉的，去掉其周围注释符，添加代码以下：

- (void)viewDidLoad
{
    [super viewDidLoad];
    editText.text = [selection objectForKey:@"object"]; 
    [editText becomeFirstResponder]; 
}

26.3 在ViewDidUnload方法以后添加代码：

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated]; 
    
    if ([preViewController respondsToSelector:@selector(setEditedSelection:)]) {
        //结束编辑
        [editText endEditing:YES];
        NSIndexPath *indexPath = [selection objectForKey:@"indexPath"];
        id object = editText.text;
        NSDictionary *editedSelection = [NSDictionary dictionaryWithObjectsAndKeys:
                                         indexPath, @"indexPath",
                                         object, @"object",
                                         nil];
        //设置上一个ViewController中的editedSelection，因为设置editedSelection方法
        //已经重写，从而对应在表格中的数据会发生变化
        [preViewController setValue:editedSelection forKey:@"editedSelection"];
    }
}

2七、运行：

单击List行时，视图切换到上面右图所示。而后单击Pig那一行，视图切换到Edit视图，而后编辑内容，以后返回，这样，原来表格中的内容就会发生改变：

最终代码：http://www.oschina.net/code/snippet_164134_10535