- 在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似于微信、QQ、新浪微博等软件都有用到UITableView。
UITableView的创建
#import "ViewController.h"
// 定义一个宏作为cell的重用池
#define kTableViewCellReuse @"reuse"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource> // tableView的两个协议
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建tableView, 并让其与屏幕大小一样
UITableView *tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
[self.view addSubview:tableView];
tableView.delegate = self;
tableView.dataSource = self;
// 注册tableViewCell
[tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kTableViewCellReuse];
}
#pragma mark - tableView的dataSource协议
// 使其具有五个分区
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 5;
}
// 每个分区里面含有五个cell
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 5;
}
// 在这个协议方法里面给cell赋值
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kTableViewCellReuse];
cell.textLabel.text = @"这是一个cell";
return cell;
}
tableView的创建需要设置两个参数, 一个是frame, 我们就不多说了, 还有一个是style, 这个style是个枚举, 它总共有两种style, 如下所示。
typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain, // regular table view
UITableViewStyleGrouped // preferences style table view
};
下面两张图分别表示了UITableViewStylePlain和UITableViewStyleGrouped的显示样式
UITableViewStylePlain.png
UITableViewStyleGrouped.png
UITableView的头视图和尾视图
// 创建头视图View
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
headView.backgroundColor = [UIColor redColor];
// 创建尾视图View
UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 100)];
// 将两个View分别放在头视图和尾视图上
tableView.tableHeaderView = headView;
tableView.tableFooterView = footView;
效果图如图所示, 一般我们都是在头视图上添加轮播图等...
红色部分即为tableView的头视图
如图的蓝绿色即为tableView的尾视图
UITableViewCellStyle
- UITableView中每行数据都是一个UITableViewCell，在这个控件中为了显示更多的信息，iOS已经在其内部设置好了多个子控件以供开发者使用。
- 如果我们查看UITableViewCell的头文件就可以发现在其内部有一个UIView控件（contentView，作为其他元素的父视图）、两个UILable控件（textLabel、detailTextLabel）、一个UIImage控件（imageView），分别用于容器、显示内容、详情和图片。
- 这些控件不一定要使用, 因为我们可以自定义tableViewCell来实现一些系统做不了的事情, 这些控件的布局属性有UItableViewCellStyle进行设置.比如以下代码.
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"reuse"];
- 上面的代码是UITableViewCell的初始化方法, 可以通过其设置UITableViewCellStyle, 它是一个枚举值:
typedef NS_ENUM(NSInteger, UITableViewCellStyle) {
UITableViewCellStyleDefault, // 左侧显示textLabel（不显示detailTextLabel），imageView可选（显示在最左边）
UITableViewCellStyleValue1, // 左侧显示textLabel、右侧显示detailTextLabel（默认蓝色），imageView可选（显示在最左边）
UITableViewCellStyleValue2, // 左侧依次显示textLabel(默认蓝色)和detailTextLabel，imageView可选（显示在最左边）
UITableViewCellStyleSubtitle // 左上方显示textLabel，左下方显示detailTextLabel（默认灰色）,imageView可选（显示在最左边）
};
下面介绍几个常用的tableView的协议方法
#pragma mark - 设置每行高度（每行高度可以不一样, 通过判断实现）
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 45;
}
#pragma mark - 设置尾部标题内容高度
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 40;
}
#pragma mark - 返回每组头标题名称
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
NSString *headTitle = [NSString stringWithFormat:@"第%ld个分区的头视图", section];
return headTitle;
}
#pragma mark - 返回每组尾部说明
-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
NSString *footTitle = [NSString stringWithFormat:@"第%ld个分区的尾视图", section];
return footTitle;
}
#pragma mark - 返回每组标题索引
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
NSMutableArray *indexsArray = [[NSMutableArray alloc]init];
indexsArray = @[@"A", @"B", @"C", @"D", @"E"].mutableCopy;
return indexsArray;
}
#pragma mark - 设置分组头视图标题内容高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
// 通过section的不同可以设置每个头视图标题的高度
if(section==0) {
return 50;
}
return 40;
}
#pragma mark - 设置每行(Row)的高度（每行高度可以不一样）
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 45;
}
#pragma mark - 设置尾部说明内容高度(每个尾视图高度可以不同)
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
return 40;
}
#pragma mark - tableView的点击方法
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"点击了第%ld分区的第%ld个cell", indexPath.section, indexPath.row);
}
设置每个分区头视图和尾视图的View
#pragma mark - 返回每组尾视图的View
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
UIView *footView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
footView.backgroundColor = [UIColor greenColor];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
label.text = @"这个是每个分区的尾视图的label";
// 判断当第一个分区的时候, 显示的是footView, 其它的是label
if (section == 0) {
return footView;
} else {
return label;
}
}
#pragma mark - 返回每组头视图的View
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
headView.backgroundColor = [UIColor blueColor];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
label.text = @"这个是每个分区的头视图的label";
// 判断当第一个分区的时候, 显示的是headView, 其它的是label
if (section == 0) {
return headView;
} else {
return label;
}
}
下面我们看一下效果
tableView的头视图和尾视图自定义view.gif
就写到这里了, 希望有错误的大家指出, 互相学习互相进步, 以后我还会对应的写一些关于UITableView的内容, 欢迎大家一起讨论学习。
