UITableViewCell

发表于

简单的数据实现了但这肯定不是我们所需求的样式，我们所需求的肯定是一种能满足我们审美的创建方式。

这时我们就需要单独去设置cell的样式，哪该如何去设置呢？接下来就我个人经验来讲解下。

首先创建一个集成于UITableViewCell的一个类文件

创建好之后可以先了解下该类有哪些属性和方法。

为了方便讲解我们就按下图的文字内容布局来讲解。

左边的头像右上角的绿标还有右下角的眼标及信息标识都看作是图片,那就可以用UIImageView来布局实现。

定义四个UIImageView类的属性分别来对应上面的图片。

1
2
3
4
5
6
7
8
9
10
#import <UIKit/UIKit.h>

@interface TableViewCell : UITableViewCell

@property (nonatomic, strong) UIImageView *imageViewA;//头像
@property (nonatomic, strong) UIImageView *imageViewB;//绿标
@property (nonatomic, strong) UIImageView *imageViewC;//眼标
@property (nonatomic, strong) UIImageView *imageViewD;//信息标识

@end

而像标题``时间差信息``眼标信息``信息标识显示的内容我们就用UILabel

1
2
3
4
@property (nonatomic, strong) UILabel *labelA;//标题
@property (nonatomic, strong) UILabel *labelB;//时间差
@property (nonatomic, strong) UILabel *labelC;//眼标信息
@property (nonatomic, strong) UILabel *labelD;//标识信息

在.m文件中 先初始化这些属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.imageViewA = [[UIImageView alloc] init];
        self.imageViewB = [[UIImageView alloc] init];
        self.imageViewC = [[UIImageView alloc] init];
        self.imageViewD = [[UIImageView alloc] init];
        self.labelA = [[UILabel alloc] init];
        self.labelB = [[UILabel alloc] init];
        self.labelC = [[UILabel alloc] init];
        self.labelD = [[UILabel alloc] init];
    }
    return self;
}

然后添加到cell的视图当中，注意cell的视图用的是contentView而非View

1
2
3
4
5
6
7
8
[self.contentView addSubview:self.imageViewA];
[self.contentView addSubview:self.imageViewB];
[self.contentView addSubview:self.imageViewC];
[self.contentView addSubview:self.imageViewD];
[self.contentView addSubview:self.labelA];
[self.contentView addSubview:self.labelB];
[self.contentView addSubview:self.labelC];
[self.contentView addSubview:self.labelD];

之后就是设置每个属性视图在cell中的frame和背景颜色方便观察 比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.imageViewA.frame = CGRectMake(5, 5, 80, 80);
self.imageViewB.frame = CGRectMake(300, 5, 20, 20);
self.imageViewC.frame = CGRectMake(300, 60, 20, 20);
self.imageViewD.frame = CGRectMake(230, 60, 20, 20);
        
self.labelA.frame = CGRectMake(90, 5, 150, 20);
self.labelB.frame = CGRectMake(90, 60, 100, 20);
self.labelC.frame = CGRectMake(255, 60, 50, 20);
self.labelD.frame = CGRectMake(330, 60, 50, 20);
        
self.labelA.backgroundColor = [UIColor redColor];
self.labelB.backgroundColor = [UIColor redColor];
self.labelC.backgroundColor = [UIColor redColor];
self.labelD.backgroundColor = [UIColor redColor];

cell的布局设置好之后接下来就是怎么把它与UITableView关联起来
回到ViewController.h文件首先关联头文件

1
2
#import "ViewController.h"
#import "TableViewCell.h"

接着在- (void)viewDidLoad方法中修改注册cell的信息,
把UITableViewCell更改为上面引入头文件的文件名我这里是TableViewCell

1
[tableView registerClass:[TableViewCell class] forCellReuseIdentifier:@"cell"];

这样就相当于当前的tableview注册的是TableViewCell的相关信息，会根据TableViewCell的布局信息来设置cell里的内容。

因为我们设置了新的UILabel属性信息因此也必须使用设置的属性来显示内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    
//    cell.textLabel.text = [self.array objectAtIndex:indexPath.row];

    cell.labelA.text = [self.array objectAtIndex:indexPath.row];
    cell.labelA.textColor = [UIColor blueColor];
    
    cell.labelB.text = @"8小时后之前";
    cell.labelB.textColor = [UIColor blueColor];
    
    cell.labelC.text = @"2356";
    cell.labelC.textColor = [UIColor blueColor];
    
    return cell;
}

运行

可以在ViewController.h文件中通过下面的方法可以设置cell的行高。

1
2
3
4
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 100;
}