自定义简单的TableView_自定义tableview-优快云博客

这篇博客介绍了如何在iOS开发中自定义一个简单的TableView，以满足项目中更复杂的需求。通过创建自定义的TableView和TableViewCell，实现了显示图片和多行文字的功能。博主详细讲解了创建TableView、设置数据源和代理、注册Cell以及规划TableView的布局过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.一个简单的TableView

在我们做项目期间TableView是一个非常常用的控件

系统有完整的TableView但是当我们在实际应用中会发现那些完整的tableView无法满足我们的要求所以需要我们自定义一个合适的TableView。

TableView从名字可以看出来他是UIView的一个子类

TableView可以显示图片，文字。

当我们要创建一个自定义的TableView时我们首先创建一个TableView

下面i是创建一个名字为myTableView的TableView并将它显示在view上

UITableView *myTableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];

myTableView.dataSource = self;

myTableView.delegate = self;

[self.view addSubview:myTableView];

创建一个名为CommonCell的TableViewCell类在

在创建TableVIew时先要实现协议

@interface ViewController () <UITableViewDataSource,UITableViewDelegate>

创建一个叫做CommonCell的TableViewCell的子类

在ViewController中注册一个“cell”

[myTableView registerClass:[CommonCell class] forCellReuseIdentifier:@"Cell"];

UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 40)];
headerView.backgroundColor = [UIColor redColor];

myTableView.tableHeaderView = headerView;
UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0,0, 0, 40)];
footerView.backgroundColor = [UIColor purpleColor];
myTableView.tableFooterView = footerView;

设置Cell的头部和尾部

在创建玩TableView后就要实现TableView格式的规划

确定TableView中cell的行数

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;

}

TableView中的label显示的文字

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CommonCell *cell = nil;
    cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    cell.textLabel.text = @"Zealer和老罗陷入口水的时候，另一家视频评测网站FView却要为生存做出选择";
    return cell;  
}

确定tableView中Cell的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 80;
}

并且在CommonCell中实现cell的布局

在cell

- (void)layoutSubviews
{
    [super layoutSubviews];
}

2.左边显示图片并且显示2行文字的TableView

我们要实现创建一个TableView

左边显示图片并且还显示两行文字

前面的方法一样先创建一个UITableView的对象

然后创建一个名为CommonCell的TAbleViewCell的类

在CommonCell中创建一个contentLabel的的UILabel；

用来显示第二行的文字

并设置第一行和二行文字的字体、大小、显示的行数。

self.textLabel.font = [UIFont systemFontOfSize:18];
self.contentLabel = [[UILabel alloc] init];创建一个contentionLabel的Label用来显示文字
self.contentLabel.font = [UIFont systemFontOfSize:12];设置字体和大小
self.contentLabel.numberOfLines = 2;//这里的2文字在contentionLabel中占2行

[self.contentView addSubview:self.contentLabel];

并且同样创建一个CommonCell的子类

NewsTableViewCell这是之图片存在时的布局

在里面实现对对TextLabel与contentLabel的位置进行布局

- (void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat x = self.imageView.image==nil?2:CGRectGetMaxX(self.imageView.frame);
    self.textLabel.frame = CGRectMake(x + 4, 2, 320-x-4, 28);
    self.contentLabel.frame = CGRectMake(x+4, CGRectGetMaxY(self.textLabel.frame) + 2, 320-x-4, 80 - 32);
}

创建一个CommonCell的子类NoImageViewCell

用来显示没有图片存在的时候图片以及TextLabel与connectLabel的的布局

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    self.imageView.frame = CGRectMake(2, 2, 76, 76);
    CGFloat x = 2;
    CGFloat x = self.imageView.image==nil?2:CGRectGetMaxX(self.imageView.frame);
    self.textLabel.frame = CGRectMake(x + 4, 2, 320-x-4, 28);
    self.contentLabel.frame = CGRectMake(x+4, CGRectGetMaxY(self.textLabel.frame) + 2, 320-x-4, 80 - 32);
}

在ViewController中注册两个Cell用来承载里面的内容

[myTableView registerClass:[NewsTableViewCell class] forCellReuseIdentifier:@"oddCell"];
[myTableView registerClass:[NoImageTableViewCell class] forCellReuseIdentifier:@"evenCell"];

<span style="font-family:Arial, Helvetica, sans-serif;">设置TableView的头和脚</span>

<span style="font-family: Arial, Helvetica, sans-serif;">UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 40)];</span>

headerView.backgroundColor = [UIColor redColor];
myTableView.tableHeaderView = headerView;
UIView *footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 40)];
footerView.backgroundColor = [UIColor purpleColor];
myTableView.tableFooterView = footerView;

设置cell的行数

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;

}

设置textLabel和contentLabel显示的文字

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CommonCell *cell = nil;
    if (indexPath.row % 2) {
        cell = [tableView dequeueReusableCellWithIdentifier:@"oddCell" forIndexPath:indexPath];
        cell.imageView.image = [UIImage imageNamed:@"1.jpg"];
    }
    else {
        cell = [tableView dequeueReusableCellWithIdentifier:@"evenCell" forIndexPath:indexPath];
    }
    cell.textLabel.text = @"Zealer和老罗陷入口水的时候，另一家视频评测网站FView却要为生存做出选择";
    cell.contentLabel.text = @"然而到了 8 月 2 日，汽车之家的创始人李想突然发布了一条关于 Fview 的微博，“刚才和彭林一起吃了个晚饭，FView 精彩而又感性的视频评测很快就会重新启动了，而且会更好。”";
    return cell;
}

设置cell的高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 80;
}
设置cell的偏度及分组
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 3;

}

下面是设置Section的头和脚可以用图片文字或者试图，

设置section的头文字格式的

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"section header: %d", section];
}
设置section的脚文字格式的
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return [NSString stringWithFormat:@"section footer: %d", section];
}
返回section的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 30;
}

<pre name="code" class="objc">- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 60;
}

返回一个参数给Section只要UIView的子类都可以

可以时UIImageview、UIView、UILabel、、、
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
   UIImage *im = [UIImage imageNamed:@"1.jpg"];
    
    UIImageView *v = [[UIImageView alloc] init];
    v.image = im;
    v.backgroundColor = [UIColor yellowColor];
    return v;
}
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor cyanColor];
    
    return v;
}

<p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; font-family: Menlo;">viewForHeaderInSection与<span style="background-color: rgb(255, 255, 255);">titleForHeaderInSection只能实现一个不能同时实现</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; font-family: Menlo;"><span style="background-color: rgb(255, 255, 255);">只有UIImageView才能是指透明度，透明度用alpn最小值0最大值1。</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-family: Menlo;"><span style="font-size:32px;"><span style="background-color: rgb(255, 255, 255);">总结：</span></span></p><p style="margin-top: 0px; margin-bottom: 0px; font-family: Menlo;"><span style="background-color: rgb(255, 255, 255);"><span style="font-size:12px;">在这次针对UITableView的复习中发现tableview中有许多的方法</span></span></p><p style="margin-top: 0px; margin-bottom: 0px; font-family: Menlo;"><span style="font-size:10px;"><span style="background-color: rgb(255, 255, 255);">
</span></span></p>