iOS Storyboard 学习之 新建Navigation的UITableView demo

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

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”

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

实例二：

如果要表格中增加数据的话，需要增加UITableViewDataSource协议。

如果需要响应用户单击的话，需要增加UITableViewDelegate协议。

1、创建项目：使用模板Single View Application新建一个项目，仅支持iPhone。

2、在ViewController.h中增加UITableViewDataSource和UITableViewDelegate协议，如下：

[cpp]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. @interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate> {  
4.   
5.     NSArray * listData;  
6. }  
7.   
8. @property ( nonatomic, retain) NSArray *listData;  
9.   
10. @end  

3、往列表中增加数据，实现UITableViewDataSource协议，如下：

[cpp]  view plain copy

1. //返回总行数  
2. -(NSInteger ) tableView:(UITableView *)tableView  
3.   
4.   numberOfRowsInSection:(NSInteger )section  
5.   
6. {      
7.     return [ self.listData count ];  
8.       
9. }  
10.   
11. // 添加每一行的信息  
12. - (UITableViewCell *) tableView:(UITableView *)tableView  
13.           cellForRowAtIndexPath:(NSIndexPath *)indexPath  
14.   
15. {     
16.       
17.     NSString *tag=@"tag";  
18.       
19.     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:tag];  
20.       
21.     if (cell==nil ) {  
22.         cell=[[[ UITableViewCell alloc ] initWithFrame : CGRectZero  
23.                                         reuseIdentifier:tag] autorelease];  
24.     }      
25.       
26.     NSUInteger row=[indexPath row];  
27.       
28.     //设置文本  
29.     cell.text =[listData objectAtIndex :row];  
30.       
31.     //选中后的颜色又不发生改变，进行下面的设置  
32.     //cell.selectionStyle = UITableViewCellSelectionStyleNone;   
33.       
34.     //不需要分割线  
35.     //tableView.separatorStyle=UITableViewCellSeparatorStyleNone;    
36.       
37.     return cell;  
38.       
39. }  

4、响应用户单击事件，实现UITableViewDelegate协议，如下：

[cpp]  view plain copy

1. //响应用户单击事件  
2. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{   
3.       
4.     UIAlertView* showSelection;  
5.     NSString* message;  
6.       
7.     message = [[NSString alloc]initWithFormat:@"You chose the : %@",  
8.                      [self.listData objectAtIndex:indexPath.row]];  
9.       
10.     showSelection = [[UIAlertView alloc]  
11.                      initWithTitle:@"Selected"  
12.                      message:message  
13.                      delegate:nil  
14.                      cancelButtonTitle:@"OK"  
15.                      otherButtonTitles:nil];     
16.       
17.     [showSelection autorelease];  
18.     [showSelection show];  
19. }  

5、往ViewController中增加UITableView，并将UITableView的delegate和dataSource连接到ViewController。如下图所示：

6、完整的代码如下：

[cpp]  view plain copy

1. #import "ViewController.h"  
2.   
3. @interface ViewController ()  
4.   
5. @end  
6.   
7. @implementation ViewController  
8.   
9. @synthesize listData;  
10.   
11. - (void)viewDidLoad  
12. {  
13.       
14.     self.listData =[[NSArray alloc] initWithObjects:@"Item1",@"Item2",@"Item3", @"Item4", @"Item5", @"Item6", @"Item7",nil];;  
15.   
16.     [super viewDidLoad];  
17.     // Do any additional setup after loading the view, typically from a nib.  
18. }  
19.   
20. - (void)viewDidUnload  
21. {  
22.     self.listData = nil;  
23.       
24.     [super viewDidUnload];  
25.     // Release any retained subviews of the main view.  
26. }  
27.   
28. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  
29. {  
30.     return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);  
31. }  
32.   
33.   
34. #pragma mark - Table view data source delegate  
35.   
36. //返回总行数  
37. -(NSInteger ) tableView:(UITableView *)tableView  
38.   numberOfRowsInSection:(NSInteger )section  
39. {      
40.     return [ self.listData count ];  
41. }  
42.   
43. // 添加每一行的信息  
44. - (UITableViewCell *) tableView:(UITableView *)tableView  
45.           cellForRowAtIndexPath:(NSIndexPath *)indexPath  
46.   
47. {     
48.       
49.     NSString *tag=@"tag";  
50.       
51.     UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:tag];  
52.       
53.     if (cell==nil ) {  
54.         cell=[[[ UITableViewCell alloc ] initWithFrame : CGRectZero  
55.                                         reuseIdentifier:tag] autorelease];  
56.     }      
57.       
58.     NSUInteger row=[indexPath row];  
59.       
60.     //设置文本  
61.     cell.text =[listData objectAtIndex :row];  
62.       
63.     //选中后的颜色又不发生改变，进行下面的设置  
64.     //cell.selectionStyle = UITableViewCellSelectionStyleNone;   
65.       
66.     //不需要分割线  
67.     //tableView.separatorStyle=UITableViewCellSeparatorStyleNone;    
68.       
69.     return cell;  
70.       
71. }  
72.   
73. #pragma mark - Table view data delegate  
74.   
75. //响应用户单击事件  
76. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{   
77.       
78.     UIAlertView* showSelection;  
79.     NSString* message;  
80.       
81.     message = [[NSString alloc]initWithFormat:@"You chose the : %@",  
82.                      [self.listData objectAtIndex:indexPath.row]];  
83.       
84.     showSelection = [[UIAlertView alloc]  
85.                      initWithTitle:@"Selected"  
86.                      message:message  
87.                      delegate:nil  
88.                      cancelButtonTitle:@"OK"  
89.                      otherButtonTitles:nil];     
90.       
91.     [showSelection autorelease];  
92.     [showSelection show];  
93. }  
94.   
95. @end  

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

http://www.cnblogs.com/buro79xxd/archive/2012/03/06/2381548.html