IOS第二十三天——自定义一个UITableViewCell单元格

这里的自定义单元格本来是要在第二十一天的时候实现来的，但是当时犯了一个错误，然后自己没解决，今天背着电脑去公司请教了下IOS工程师，然后很快就找到问题所在了，所以今天发出来这篇。

我们接着第二十一天的开始写，首先新建一个UITableViewCell的子类，取名为RootTableView.m，如下图所示：

点击next之后，选择父类为”UITableViewCell“

点击Next完成新建。

RootTableView.h中的代码如下：

#import <UIKit/UIKit.h>

@interface RootTableView : UITableViewCell
{
}
@property (nonatomic,retain) UILabel *textStr;
@end

这里代码比较简单，就是添加了一个UILabel类型的属性，那么接下来我们再来看RootTableView.m中的代码：

#import "RootTableView.h"

@implementation RootTableView
@synthesize textStr;

//设置初始化样式
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        //初始化代码，首先创建一个UILabel实例
        textStr=[[UILabel alloc] initWithFrame:CGRectZero];
        
        //设置字符串格式
        textStr.font=[UIFont systemFontOfSize:16];
        
        //设置字体颜色
        textStr.textColor=[UIColor blueColor];
        
        //设置背景颜色
        textStr.backgroundColor=[UIColor clearColor];
        
        //将此UILabel作为子视图加到开始声明的UILabel上
        [self.contentView addSubview:textStr];
    }
    return self;
}

//设置textStr实例的框架大小
-(CGRect)_textStrFrame
{
    CGRect rect=CGRectMake(self.contentView.frame.size.width/2,0.0f, self.contentView.frame.size.width/2, self.contentView.frame.size.height);
    return rect;
}

//初始化textStr实例框架
-(void)layoutSubviews
{
    [super layoutSubviews];
    textStr.frame=[self _textStrFrame];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];
}

@end

一开始我的错误就在于，没有添加

@synthesize textStr;

因此我查阅了下相关的资料，在Obj－C中，@property和@synthesize是要配对使用的，功能就是让编译器能够自动编写一个与数据成员同名的方法声明以省去读写方法的声明。

OK，那么我们如何让我们自定义的单元格在表格中显示呢？我们只需要改动如下方法，调用我们自定义的单元格就可以了：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    //UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    RootTableView *cell=(RootTableView *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [[RootTableView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }
    cell.textStr.text=[self->dataArray objectAtIndex:indexPath.row];
    return cell;
}

并不是很困难，对吧，只需要将UITableViewCell类替换成我们自定义的RootTableView类，然后给textStr赋值就可以了，我们来看一下执行的效果：

那么，这个功能是没有问题了，我们要是想，让单元格更加个性一点儿呢？比如，添加个图片，我们之前还没有讲到如何添加一个图片呢，那么我们今天干脆就直接加在单元格里试试看。

回到我们自定义的类，RootTableView.h，在其中添加一个UIImageView，取名为iView，下面是修改之后的代码：

#import <UIKit/UIKit.h>

@interface RootTableView : UITableViewCell
{
    UILabel *textStr;
    UIImageView *iView;
}
@property (nonatomic,retain) UILabel *textStr;
@property(nonatomic,retain)UIImageView *iView;
@end

然后，我们在RootTableView.m中，跟UILabel的自定义很相似，这里就不一一上代码了，直接放出源码：

#import "RootTableView.h"

@implementation RootTableView
@synthesize textStr;
@synthesize iView;

//设置初始化样式
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        //初始化代码，首先创建一个UILabel实例和一个UIImageView实例
        textStr=[[UILabel alloc] initWithFrame:CGRectZero];
        iView=[[UIImageView alloc] initWithFrame:CGRectZero];
        
        //设置字符串格式
        textStr.font=[UIFont systemFontOfSize:16];
        
        //设置字体颜色
        textStr.textColor=[UIColor blueColor];
        
        //设置背景颜色
        textStr.backgroundColor=[UIColor clearColor];
        
        //给UIImageView实例赋值
        iView.image=[UIImage imageNamed:@"test.png"];
        
        //将图片加到内容视图上
        [self.contentView addSubview:iView];
        
        //将此UILabel作为子视图加到开始声明的UILabel上
        [self.contentView addSubview:textStr];
    }
    return self;
}

//设置textStr实例的框架大小
-(CGRect)_textStrFrame
{
    CGRect rect=CGRectMake(self.contentView.frame.size.width/2,0.0f, self.contentView.frame.size.width/2, self.contentView.frame.size.height);
    return rect;
}

//初始化iView实例的框架大小
-(CGRect)_iViewFrame
{
    CGRect rect=CGRectMake(10.0f,0.0f, self.contentView.frame.size.width/3, self.contentView.frame.size.height);
    return rect;
}

//初始化textStr实例框架
-(void)layoutSubviews
{
    [super layoutSubviews];
    textStr.frame=[self _textStrFrame];
    iView.frame=[self _iViewFrame];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];
}

@end

另外，我觉得我写的注释虽然比较难看，总归还是可以看得懂的，那么我们再来看一下，如何在表视图中调初始化。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    
    //UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    RootTableView *cell=(RootTableView *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [[RootTableView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }
    cell.textStr.text=[self->dataArray objectAtIndex:indexPath.row];
    cell.iView.image=[UIImage imageNamed:@"test.png"];
    return cell;
}

特殊颜色标注的那一行，就是为UIImageView赋值的代码，一定要首先把test.png加入到工程里面，很简单，直接选中图片文件，拖拽到Supporting Files文件夹中就可以了。我们来看下运行效果：

不得不说，随手截图，实在是太丑了～大家请自行准备塑料袋～哈哈，开个小玩笑，因为我本身也是在自己学习中，所以也有很多不太懂的地方，各位看官多多包涵，如有纰漏之处，还望不吝赐教。

2013年05月07日，Eric.Tang 记