用到的技術：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--