iOS中TableView的自定义

Problem:

关于table view，摘了一段《iOS 7 programming cookbook》的描述，如下：

"A table view is simply a scrolling view that is separated into sections, each of which is further separated into rows. Each row is an instance of theUITableViewCellclass, and you can create custom table view rows bysubclassingthis class. Using table views is an ideal way to present a list of items to users. You can embed images,text, and other objects into your table view cells; you can customize their height, shape,grouping, and much more. The simplicity of the structure of table views is what makes them highly customizable. "

Apple提供了标准的tableview实现，同时也为开发者提供了customizing符合自己需求的table view。那么，如何去自定义table view呢？有两种方式：一是使用Interface Builder的xib文件去完成table view cell的布局，这种方式省去写很多代码的麻烦，将编写代码变成了在图形界面上简单的拉入一些控件、调整位置、设置相关参数和与代码进行关联(IBOutlet,IBAction)的过程；二是纯代码的方式(programmatically)。这里将介绍后者。

Solution：

要根据需求自定义table view，首先不得不去详细了解iOS中的table view。下面的资料是关于tableview的相当不错的资料，只要细心去阅读，那么相信你肯定也能很快掌握iOS中如此powerful的table view。这里将给出对口的、有用的资料，然后给出example代码。

(1)Apple官方的非常靠谱的详细的文档：

https://developer.apple.com/library/ios/documentation/uikit/reference/UITableView_Class/Reference/Reference.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewStyles/TableViewCharacteristics.html#//apple_ref/doc/uid/TP40007451

其实读完这两个文档，就差不多了。

(2)《iOS 7 programming cookbook》的第四章"constructing and using table views" 。

iOS 7 programming cookbook以及它之前的几个版本，是很不错的iOS开发的书籍。如果是一名新手，那么这本书或许不得不读。

Example：

自定义table view cell，需要写一个继承自uitableviewcell的类，如customtableviewcell，在这个类里面，我们可以根据需求来对UI控件进行布局。下面给出一个例子，实际的代码应该根据自己的需要就行改动。我相信看了上面的资料，对照这个例子，那么肯定可以达到自己能编写自定义tableview的目的。接口和实现的代码如下，接口可以写在CustomTableViewCell.h文件中，实现可以写CustomTableViewCell.m文件中。

//CustomTableViewCell.h文件

@interface CustomTableViewCell : UITableViewCell@property (nonatomic, strong) UIImageView *iconImage;@property (nonatomic, strong) UIImageView *arrowImage;@property (nonatomic, strong) UILabel *nameLabel;@property (nonatomic, strong) UILabel *emailLabel;@property (nonatomic, strong) UILabel *dateLabel;@end

//CustomTableViewCell.m文件

#define TABLE_CELL_HEIGHT 80@implementation BeaconTableViewCell@synthesize iconImage = _iconImage;@synthesize arrowImage = _arrowImage;@synthesize nameLabel = _nameLabel;@synthesize emailLabel = _emailLabel;@synthesize dateLabel = _dateLabel;- (id) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];    if (self) {                CGFloat iconSquare = 60.f;        self.iconImage = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, iconSquare, iconSquare)];        self.iconImage.contentMode = UIViewContentModeScaleAspectFit;        self.iconImage.backgroundColor = [UIColor grayColor];        [self.contentView addSubview:self.iconImage];                CGFloat nameWidth = 100.f;        CGFloat nameHeight = 30.f;        self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(iconSquare+20, 15, nameWidth, nameHeight)];        self.nameLabel.backgroundColor = [UIColor clearColor];        self.nameLabel.textAlignment = NSTextAlignmentLeft;        self.nameLabel.font = [UIFont fontWithName:nil size:20];        [self.contentView addSubview:self.nameLabel];                CGFloat dateWidth = 100.f;        CGFloat dateHeight = 30.f;        self.dateLabel = [[UILabel alloc] initWithFrame:CGRectMake(200, 15, dateWidth, dateHeight)];        self.dateLabel.backgroundColor = [UIColor clearColor];        self.dateLabel.textAlignment = NSTextAlignmentLeft;        self.dateLabel.font = [UIFont fontWithName:nil size:15];        self.dateLabel.textColor = GRAY_COLOR;        [self.contentView addSubview:self.dateLabel];                CGFloat emailWidth = 220.f;        CGFloat emailHeight = 30.f;        self.emailLabel = [[UILabel alloc] initWithFrame:CGRectMake(iconSquare+20, 40, emailWidth, emailHeight)];        self.emailLabel.backgroundColor = [UIColor clearColor];        self.emailLabel.textAlignment = NSTextAlignmentLeft;        self.emailLabel.font = [UIFont fontWithName:nil size:15];        self.emailLabel.textColor = GRAY_COLOR;        [self.contentView addSubview:self.emailLabel];                self.arrowImage = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width-30, (TABLE_CELL_HEIGHT-15)/2, 15, 15)];        self.arrowImage.backgroundColor = [UIColor clearColor];        self.arrowImage.image = [UIImage imageNamed:@"arrow"];        [self.contentView addSubview:self.arrowImage];            }        return self;}@end

在table view的delegate中，tabelView:cellForRowAtIndextPath:的delegate方式示例如下：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{    CustomTableViewCell *cell = nil;    static NSString *tableIdentifier = @"TableIdentifier";    cell = [tableView dequeueReusableCellWithIdentifier:tableIdentifier];    cell.backgroundColor = [UIColor whiteColor];    if (nil == cell) {    cell = [[[BeaconTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:tableIdentifier] autorelease];            }    cell.nameLabel.text = @"your string";    cell.emailLabel.text = @"your string";    cell.dateLabel.text = @"2014-02-17";        return cell;}

Demo:

(provide git link coming soon......)