StoryBoard学习（二）

1 建立一个项目 “StoryboardUITableViews”，选择Single View Application

2 点击“MainStoryboard.storyboard” 选择“Editor > Embed In > Navigation Controller”

会出现一个Navigation Controllers

3 在右边的View Controller上放置一个Table View

4 编辑ViewController.h文件，加入如下

 

@interface ViewController :UIViewController<UITableViewDelegate,UITableViewDataSource>

　　

 

5 点击“MainStoryboard.storyboard”，找到“View Controller”，点击“Table View” 按住 “Control”键拖动到“View Controller”上，然后选择"data source"，重复之前的拖动，选择"delegate".

6 找到“View Controller”，点击"Table View Cell"，选择“Attribute Inspector”，在“Identifier”中填写“Cell”，然后回车，随后"Table View Cell"变为"Table View Cell - Cell"，保存。

7 编辑“ViewController.h”

 

 #import <UIKit/UIKit.h>

@class DetailViewController;

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSMutableDictionary *states;
@property (nonatomic, strong) NSArray *datasource;

- (void)setupArray;
@end

　　

 

9 增加显示详情的文件

建立文件File > New File > UIViewController Subclass 名为 “DetailViewController”

然后增加一个“View Controller”，配置Identifier为“detail”

 

 

 

 

选择Class为”DetailViewController“

在View Controller中选择table view cell，右键，拖到detail view controller中，在弹出的segue框中选择push，便将两者联系起来了。

然后编辑"DetailViewController.h"

 

#import <UIKit/UIKit.h>

@class DetailViewController;

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) IBOutlet UITableView *tableView;
@property (nonatomic, strong) NSMutableDictionary *states;
@property (nonatomic, strong) NSArray *datasource;

- (void)setupArray;
@end

//DetailViewController.m

#import "DetailViewController.h"

@implementation DetailViewController

@synthesize state, capital;
@synthesize stateLabel, capitalLabel;

#pragma mark - View lifecycle
- (void)viewDidLoad
{
　　[super viewDidLoad];
　　stateLabel.text = state;
　　capitalLabel.text = capital;
}

- (void)viewDidUnload
{
　　[super viewDidUnload];
　　stateLabel = nil;
　　capitalLabel = nil;
}
@end

9 编辑“ViewController.m”，实第四步加入的<UITableViewDelegate,UITableViewDataSource> 的protocol

头部加入#import "DetailViewController.h"

 

首先声明个数据源

 

-(void)setupArray

{

  　　states = [[NSMutableDictionary alloc]init];

 　　 [states setObject:@"Lansing" forKey:@"Michigan"];

  　　[states setObject:@"Sacremento" forKey:@"California"];

  　　[states setObject:@"Albany" forKey:@"New York"];

  　　[states setObject:@"Phoenix" forKey:@"Arizona"];

 　　 [states setObject:@"Tulsa" forKey:@"Oklahoma"];

  　　datasource = [states allKeys];

}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
　　[super viewDidLoad];

　　[self setupArray];
}

　　

 

然后加入三个基本的方法

9.1 会有多少列

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
　　return 5;
}

　　

 

9.2 如何显示列名

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
　　static NSString *cellIdentifier = @"Cell";
　　UITableViewCell *cell = [tv dequeueReusableCellWithIdentifier:cellIdentifier];

　　if (cell == nil) {
　　　　cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
　　　　　　　　　　　　　　　　　　　reuseIdentifier:cellIdentifier];
　　}

　　cell.textLabel.text = [datasource objectAtIndex:indexPath.row];

　　return cell;
}

　　

9.3 点击列名后触发segue“ 这一步可以看出StoryBoard真的是给我们简化了很多工作 ”

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
　　if ([sender isKindOfClass:[UITableViewCell class]]) {
　　　　if ([segue.destinationViewController isKindOfClass:[DetailViewController class]]) {
　　　　　　NSIndexPath *indexPath = [self.tableView indexPathForCell:sender];
　　　　　　DetailViewController *dvc = segue.destinationViewController;
　　　　　　dvc.state = [datasource objectAtIndex:indexPath.row];
　　　　　　dvc.capital = [states objectForKey:dvc.state];

　　　　}
　　}
}

　　

10 点击“MainStoryboard.storyboard”，在“View Controller”上加入四个个Label “State”和“Capital”

 

然后分别链接“State”和“Capital”到“stateLabel”和“capitalLabel”

以上完成了就大功告成了。

 

 

 

源码下载：StoryBoardDemo.rar