iOS 5 Storyboard 学习之 UITableViews
用到的技术：UITableView，Navigation Controllers，Storyboard Push
文章内容只是把关键的地方在文中讲解了一下，完整的代码在文章最后，请下载对比自己的代码。
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>
@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>{
}
@property(nonatomic, retain)NSMutableDictionary *states;
@property(nonatomic, retain)NSArray *datasource;
-(void)setupArray;
@end
9 增加显示详情的文件
建立文件File > New File > UIViewController Subclass 名为 “DetailViewController”
然后增加一个“View Controller”，配置Identifier为“detail”
选择Class为”DetailViewController“
然后编辑"DetailViewController.h"
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController{
NSString *state;
NSString *capital;
IBOutlet UILabel *stateLabel;
IBOutlet UILabel *capitalLabel;
}
@property (nonatomic, retain)NSString *state, *capital;
@property (nonatomic, retain)IBOutlet UILabel *stateLabel, *capitalLabel;
@end
"DetailViewController.m"
@synthesize state,capital,stateLabel, capitalLabel;
- (void)viewDidLoad
{
[super viewDidLoad];
stateLabel.text = state;
capitalLabel.text = capital;
}
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];
}
然后加入三个基本的方法
9.1 会有多少列
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 5;
}
9.2 如何显示列名
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = (UITableViewCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
UIImageView *imageView = [[UIImageView alloc] initWithFrame:cell.frame];
UIImage *image = [UIImage imageNamed:@"LightGrey.png"];
imageView.image = image;
cell.backgroundView = imageView;
[[cell textLabel] setBackgroundColor:[UIColor clearColor]];
[[cell detailTextLabel] setBackgroundColor:[UIColor clearColor]];
cell.textLabel.text = [datasource objectAtIndex:indexPath.row];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
return cell;
}
9.3 点击列名后的动作“ 这一步可以看出StoryBoard真的是给我们简化了很多工作 ”
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
DetailViewController *detail = [self.storyboard instantiateViewControllerWithIdentifier:@"detail"];
detail.state = [datasource objectAtIndex:indexPath.row];
detail.capital = [states objectForKey:detail.state];
[self.navigationController pushViewController:detail animated:YES];
}
10 点击“MainStoryboard.storyboard”，在“View Controller”上加入两个Label “State”和“Capital”
然后分别链接“State”和“Capital”到“stateLabel”和“capitalLabel”
以上完成了就大功告成了。应该可以看到
完整的代码请到github下载：https://github.com/xxd/StoryboardTutorial-UITableViews1
--EOF--
