UITableView_UITableViewCel

http://www.apkbus.com/android-140354-1-4.html

本来不打算写UITableView的，因为网上已经有很多这方面的文章，尤其是 趣味苹果开发中的TableViewController系列 已经有很详细的讲解了。但是群里还是有很多童鞋会问这方面的问题，所以在这里以自己的理解方式比划一下。让我们先来看一张从模拟器截下来的图： 

上图是一个UITableView列表，红色的1、2、3、4、5...是一个个的UITableViewCell。从这张截图我们可以看出来 UITableView 是由一系列 UITableViewCell 组成的列表，由此我们可以知道 UITableViewCell 在 UITableVeiw 中的重要性了。在真实地项目中，UITableViewCell 中的各项内容的排列都不同（如上图4中的 2013年、全国等），它自带的那几种样式根本无法满足我们的需求，所以这就需要我们来自定义自己的Cell（下文中的Cell都表示UITableViewCell）了。以上图中的Cell为例，我们来自定义一个UITableViewCell。首先我们来创建一个应用——CustomTableVeiwCellDemo，打开XCode，选择File -> New -> Project...，如下图所示： 然后选择iOS->Application->Single View Application，然后点Next，如下图所示：在Product Name中输入“CustomTableVeiwCellDemo”，其他设置部分参照下图：然后点Next，保存到磁盘适当的位置，至此我们的Xcode应该是下图这个样子：工程创建完成了，然后开始我们的UITableView之旅吧。首先我们需要有一个UITableView，那么我们给上图中的WViewController.xib上拖拽一个UITableVeiw，然后绑定UITableView的dataSource与delegate到WViewController上，如下图：我们给UITableView设置个名称为tableView  并给WViewController.h 设置 dataSource、delegate的代理，代码如下：

1. //
   
2. //  WViewController.h
   
3. //  CustomTableVeiwCellDemo
   
4. //
   
5. //  Created by wzrong on 13-8-15.
   
6. //  Copyright (c) 2013年 wzrong. All rights reserved.
   
7. //
   
8. 
   
9. #import <UIKit/UIKit.h>
   
10. 
    
11. @interface WViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
    
12. 
    
13. @property (strong, nonatomic) IBOutlet UITableView *tableView;
    
14. 
    
15. @end

复制代码

然后在WViewController.m中实现dataSource与delegate的部分方法，如 UITableView的区段数、UITableView的行数、指定行的UITableVeiwCell、单击单元格的处理等

1. #pragma mark - UITableView methods
   
2. /**
   
3. 1、返回 UITableView 的区段数
   
4. */
   
5. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
   
6.     
   
7. }
   
8. 
   
9. /**
   
10. 2、返回 UITableView 的行数
    
11. */
    
12. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
13.     
    
14. }
    
15. 
    
16. /**
    
17. 3、设置行的高度
    
18. */
    
19. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    
20.     
    
21. }
    
22. 
    
23. /**
    
24. 4、返回指定的 row 的 cell
    
25. */
    
26. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
27.     
    
28. }
    
29. 
    
30. /**
    
31. 5、点击单元格时的处理
    
32. */
    
33. -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
34.     
    
35. }

复制代码

接下来我们按照上边注释的步骤来填充方法1、本例中我们只需要一个区段，所以返回1就ok了。

1. /**
   
2. 1、返回 UITableView 的区段数
   
3. */
   
4. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
   
5.     return 1;      
   
6. }

复制代码

2、要知道返回的行数，首先我们需要知道有多少条数据，到目前为止，我们还没有定义要显示的数据，所以先让我们来定义要显示在UITableView上的数据吧。　　2.1 我们需要显示的是年份、省份、标题，所以首先我们定义一个试卷模型WPaperModel，用来存放显示的这些属性。　　右键工程->New Group，创建一个组Model,　　  　　选择Model，在点击下图1的位置，创建一个Model文件夹与之相关联　　 　　在Model里边添加文件WPaperModel，并添加相应的属性，并初始化模型对象，代码如下： 　　WPaperModel.h

1. //
   
2. //  WPaperModel.h
   
3. //  CustomTableVeiwCellDemo
   
4. //
   
5. //  Created by wzrong on 13-8-15.
   
6. //  Copyright (c) 2013年 wzrong. All rights reserved.
   
7. //
   
8. //  试卷模型
   
9. //  
   
10. 
    
11. #import <Foundation/Foundation.h>
    
12. 
    
13. @interface WPaperModel : NSObject
    
14. 
    
15. @property (nonatomic, assign) NSInteger paperID;        // 试卷代号
    
16. @property (nonatomic, strong) NSString *paperYear;      // 试卷所属年份
    
17. @property (nonatomic, strong) NSString *paperProvince;  // 试卷所属省份
    
18. @property (nonatomic, strong) NSString *paperTitle;     // 试卷标题
    
19. 
    
20. /**
    
21. 初始化试卷模型对象
    
22. @param paperId     试卷代号
    
23. @param year        试卷年份
    
24. @param province    试卷省份
    
25. @param title       试卷标题
    
26. */
    
27. - (id)initWithPaperID:(NSInteger)paperId
    
28.               paperYear:(NSString *)year
    
29.           paperProvince:(NSString *)province
    
30.              paperTitle:(NSString *)title;
    
31. 
    
32. @end

复制代码

WPaperModel.m

1. //
   
2. //  WPaperModel.m
   
3. //  CustomTableVeiwCellDemo
   
4. //
   
5. //  Created by wzrong on 13-8-15.
   
6. //  Copyright (c) 2013年 wzrong. All rights reserved.
   
7. //
   
8. //  试卷模型
   
9. //
   
10. 
    
11. #import "WPaperModel.h"
    
12. 
    
13. @implementation WPaperModel
    
14. 
    
15. /**
    
16. 初始化试卷模型对象
    
17. @param paperId     试卷代号
    
18. @param year        试卷年份
    
19. @param province    试卷省份
    
20. @param title       试卷标题
    
21. */
    
22. - (id)initWithPaperID:(NSInteger)paperId
    
23.               paperYear:(NSString *)year
    
24.           paperProvince:(NSString *)province
    
25.              paperTitle:(NSString *)title{
    
26.     self = [super init];
    
27.     
    
28.     if (self) {
    
29.         self.paperID        = paperId;
    
30.         self.paperYear      = year;
    
31.         self.paperProvince  = province;
    
32.         self.paperTitle     = title;
    
33.     }
    
34.     
    
35.     return self;
    
36. }
    
37. 
    
38. @end

复制代码

2.2 在WViewController.m中定义要显示的数据，把这些数据初始化到数据模型中，并把数据模型添加到要展示在UITableView的列表集合中，代码如下：　　定义数据数组与试卷列表

1. @interface WViewController (){
   
2.     NSArray *_dataArray;        // 数据数组
   
3.     NSMutableArray *_paperList; // 试卷列表
   
4. }

复制代码

初始化数据数组、试卷列表与试卷模型，并把试卷模型添加到试卷列表中

1. - (void)viewDidLoad
   
2. {
   
3.     [super viewDidLoad];
   
4.     
   
5.     // 初始化数据数组
   
6.     _dataArray = @[@[@"2013", @"北京", @"2012-2013学年北京市石景山区初一下学期期末考试数学试卷（带解析）"],
   
7.                    @[@"2013", @"江苏", @"2012-2013学年江苏苏州市景范中学初二第二学期期末考试数学试卷（带解析）"],
   
8.                    @[@"2013", @"湖北", @"2013年湖北省恩施州初中数学评价《实数与代数式》单元试卷（一）（带解析）"],
   
9.                    @[@"2013", @"全国", @"2013人教版初中数学七年级上册第一章有理数练习卷（带解析）"],
   
10.                    @[@"2013", @"湖北", @"2013年初中毕业升学考试（湖北十堰卷）数学（带解析）"]];
    
11.     
    
12.     // 初始化试卷列表
    
13.     _paperList = [[NSMutableArray alloc]init];
    
14.     for (int i=0; i<_dataArray.count; i++) {
    
15.         // 初始化试卷模型
    
16.         WPaperModel *paperModel = [[WPaperModel alloc]initWithPaperID:i
    
17.                                                             paperYear:_dataArray[i][0]
    
18.                                                         paperProvince:_dataArray[i][1]
    
19.                                                            paperTitle:_dataArray[i][2]];
    
20.         // 添加试卷模型到试卷列表中
    
21.         [_paperList addObject:paperModel];
    
22.     }
    
23. }

复制代码

2.3 至此我们知道了要展示在UITableView上边的数据列表为_paperList了，那么也就知道了UITableView的行数了，所以就可以设置行数了

1. /**
   
2. 2、返回 UITableView 的行数
   
3. */
   
4. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
   
5.     return _paperList.count;
   
6. }

复制代码

3、由于我们要自定义Cell，所以行的高度也就是自定义Cell的高度，接下来我们就自定义Cell，起名为 WPaperCell　　3.1 与上边2.1类似，先建立一个View组，然后关联到View文件夹中，再然后在View中创建WPaperCell，如下图：　　  　　3.2 创建完成后，我们为WPaperCell建立相对应的WPaperCell.xib文件，如下图我们选择iOS -> Use Interface -> Empty，然后点击Next　　  　　然后拖拽一个UITableViewCell到WPaperCell.xib上，并与WPaperCell类关联　　 　　3.3 给Cell上拖拽3个UILabel，用来显示年、省份、标题，设置Identifier标识符为paperCell，Accessory的值为Disclosure Indicator，如下图：　　 　　上图中UILabel的线框，可以参考  iOS 开发问题集锦（二） 中的第2个问题。　　3.4 给3个UILabel设置名称，并初始化，代码如下：　　WPaperCell.h

1. //
   
2. //  WPaperCell.h
   
3. //  CustomTableVeiwCellDemo
   
4. //
   
5. //  Created by wzrong on 13-8-15.
   
6. //  Copyright (c) 2013年 wzrong. All rights reserved.
   
7. //
   
8. //  自定义UITableViewCell
   
9. //  
   
10. 
    
11. #import <UIKit/UIKit.h>
    
12. #import "WPaperModel.h"
    
13. 
    
14. @interface WPaperCell : UITableViewCell
    
15. 
    
16. @property (strong, nonatomic) IBOutlet UILabel *lblYear;        // 年标签 
    
17. @property (strong, nonatomic) IBOutlet UILabel *lblProvince;    // 省份标签
    
18. @property (strong, nonatomic) IBOutlet UILabel *lblTitle;       // 标题标签
    
19. 
    
20. /**
    
21. 设置Cell
    
22. */
    
23. -(void)setupCell:(WPaperModel *)model;
    
24. 
    
25. @end

复制代码

WPaperCell.m

1. //
   
2. //  WPaperCell.m
   
3. //  CustomTableVeiwCellDemo
   
4. //
   
5. //  Created by wzrong on 13-8-15.
   
6. //  Copyright (c) 2013年 wzrong. All rights reserved.
   
7. //
   
8. 
   
9. #import "WPaperCell.h"
   
10. 
    
11. @implementation WPaperCell
    
12. 
    
13. - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    
14. {
    
15.     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    
16.     if (self) {
    
17.         // Initialization code
    
18.     }
    
19.     return self;
    
20. }
    
21. 
    
22. - (void)setSelected:(BOOL)selected animated:(BOOL)animated
    
23. {
    
24.     [super setSelected:selected animated:animated];
    
25. 
    
26.     // Configure the view for the selected state
    
27. }
    
28. 
    
29. /**
    
30. 设置Cell
    
31. */
    
32. -(void)setupCell:(WPaperModel *)model{
    
33.     self.lblYear.text       = model.paperYear;
    
34.     self.lblProvince.text   = model.paperProvince;
    
35.     self.lblTitle.text      = model.paperTitle;
    
36. }
    
37. 
    
38. @end

复制代码

3.5 由于刚自定义的Cell的窗口高度为88，所以设置行高为88

1. /**
   
2. 3、设置行的高度
   
3. */
   
4. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
   
5.     return 88.0f;
   
6. }

复制代码

4、返回指定的行，由于是自定义的Cell，所以此处需要返回WPaperCell，首先导入 #import "WPaperCell.h"，然后设置，这里有两种设置方式。　　设置方式1：

1. /**
   
2. 4、返回指定的 row 的 cell
   
3. */
   
4. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
   
5.     // 1. cell标识符，使cell能够重用
   
6.     static NSString *paperCell = @"paperCell";
   
7.     
   
8.     // 2. 注册自定义Cell的到TableView中，并设置cell标识符为paperCell
   
9.     static BOOL isRegNib = NO;
   
10.     if (!isRegNib) {
    
11.         [tableView registerNib:[UINib nibWithNibName:@"WPaperCell" bundle:nil] forCellReuseIdentifier:paperCell];
    
12.         isRegNib = YES;
    
13.     }
    
14.     
    
15.     // 3. 从TableView中获取标识符为paperCell的Cell
    
16.     WPaperCell *cell = [tableView dequeueReusableCellWithIdentifier:paperCell];
    
17.     
    
18.     // 4. 设置单元格属性
    
19.     [cell setupCell:_paperList[indexPath.row]];
    
20.     
    
21.     return cell;
    
22. }

复制代码

设置方式2：

1. /**
   
2. 4、返回指定的 row 的 cell
   
3. */
   
4. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
   
5.     // 1. cell标示符，使cell能够重用
   
6.     static NSString *paperCell = @"paperCell";
   
7.     // 2. 从TableView中获取标示符为paperCell的Cell
   
8.     WPaperCell *cell = (WPaperCell *)[tableView dequeueReusableCellWithIdentifier:paperCell];
   
9.     // 如果 cell = nil , 则表示 tableView 中没有可用的闲置cell
   
10.     if(cell == nil){
    
11.         // 3. 把 WPaperCell.xib 放入数组中
    
12.         NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"WPaperCell" owner:self options:nil] ;
    
13.         
    
14.         // 获取nib中的第一个对象
    
15.         for (id oneObject in nib){
    
16.             // 判断获取的对象是否为自定义cell
    
17.             if ([oneObject isKindOfClass:[WPaperCell class]]){
    
18.                 // 4. 修改 cell 对象属性
    
19.                 cell = [(WPaperCell *)oneObject initWithStyle:UITableViewCellStyleDefault reuseIdentifier:paperCell];
    
20.             }
    
21.         }
    
22.     }
    
23.     // 5. 设置单元格属性
    
24.     [cell setupCell:_paperList[indexPath.row]];
    
25.     return cell;
    
26. }

复制代码

5、点击单元格时，输出省份，代码如下：

1. /**
   
2. 5、点击单元格时的处理
   
3. */
   
4. -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
   
5.     WPaperModel *paperModel = _paperList[indexPath.row];
   
6.     NSLog(@"paper province -> %@", paperModel.paperProvince);
   
7. }

复制代码

OK，大功告成，运行一下，看看效果： 

16084320-e16f011260fb4c359147f0291af415a8.jpg(88.78 KB, 下载次数: 23)

下载附件  保存到相册

2013-9-3 17:39 上传