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