iOS 5 Storyboard 学习之 UITableViews

用到的技术:UITableView,Navigation Controllers,Storyboard Push

文章内容只是把关键的地方在文中讲解了一下,完整的代码在文章最后,请下载对比自己的代码。

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

屏幕快照 2012-03-05 下午10.31.25.png

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


屏幕快照 2012-03-05 下午10.34.37.png

会出现一个Navigation Controllers

屏幕快照 2012-03-05 下午10.35.00.png

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

屏幕快照 2012-03-06 上午9.26.06.png

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

 

@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource> {

}

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

屏幕快照 2012-03-06 上午10.05.49.png

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

屏幕快照 2012-03-06 上午10.09.47.png

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

屏幕快照 2012-03-06 上午10.22.39.png

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

屏幕快照 2012-03-06 上午10.21.09.png


屏幕快照 2012-03-06 上午10.21.38.png

选择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”

屏幕快照 2012-03-06 上午10.38.10.png

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


屏幕快照 2012-03-06 上午10.38.23.png

以上完成了就大功告成了。应该可以看到


屏幕快照 2012-03-06 上午11.11.38.png


屏幕快照 2012-03-06 上午11.11.51.png


完整的代码请到github下载:https://github.com/xxd/StoryboardTutorial-UITableViews1

--EOF--

 

 

 
posted @ 2012-03-06 11:19  xxd  阅读(...)  评论(...编辑  收藏