免费开源的iOS开发学习平台

UITableView详解：9-段（Section）实现示例

本章节通过一个实际的案例演示一下表视图中Seciton的设置方法，其中涉及到：

  • Seciton的顶部文字与底部文字的设置
  • Section的顶部自定义视图与底部自定义视图的实现
  • 索引功能的实现以及索引样式的设置

准备工作

创建一个Single View Application应用，在ViewController.m中直接添加一个UITableView类型的属性，ViewController作为UITableView的代理及数据源要遵守UITableView的代理协议和数据源协议。

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(nonatomic,strong)UITableView *tableView;
@end

通过懒加载的方式初始化UITableView，并对其做一些简单的设置。

- (UITableView *)tableView {
    if (_tableView == nil) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0,20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStyleGrouped];
        //设置代理和数据源
        _tableView.delegate = self;
        _tableView.dataSource = self;
        //分割线与屏幕等宽
        _tableView.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0);
        //分割线颜色
        _tableView.separatorColor = [UIColor blackColor];
        //索引栏颜色
        _tableView.sectionIndexBackgroundColor = [UIColor clearColor];
        //索引文字颜色
        _tableView.sectionIndexColor = [UIColor redColor];
    }
    return _tableView;
}

将tableView作为子视图添加到控制器view上

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.tableView];
}

实现数据源方法

  • 实现UITableViewDataSource中定义的必须实现的数据源方法，设置每个Section中单元格的数量，并创建所有的单元格对象。
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 4;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    //设定重用标识符
    static NSString *cellID = @"cellID";
    //重用机制
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
    }
    cell.textLabel.text = @"99iOS";
    cell.detailTextLabel.text = @"苹果iOS开发进阶之路";
    cell.imageView.image = [UIImage imageNamed:@"99logo"];
    cell.accessoryType = UITableViewCellAccessoryNone;
    return cell;
}
  • 设置section数量
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 4;
}

设置section的头部文字与底部文字

通过实现tableView:titleForHeaderInSection:以及tableView:titleForFooterInSection:可以实现对每个Section的文字头部以及文字底部进行定制。由于在这两个方法中，section都是作为参数传入的，因此，我们可以为每个Seciton定义不同的头部文字和底部文字。

  • 设置Section的header文字
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    NSString *message = [NSString stringWithFormat:@"这是第 %ld 个Section头部视图",(long)section];
    return message;
}
  • 设置Section的footer文字
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
    NSString *message = [NSString stringWithFormat:@"这是第 %ld 个Section底部视图",(long)section];
    return message;
}

运行效果如下：

设置section的样式-使用自定义View

为了实现更加复杂多样的效果，我们还可以为section设置自定义header和footer，这里只简单定义两个UIView，橙色作为头部视图，绿色作为底部视图。

  • 定制头部视图样式
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30)];
    headerView.backgroundColor = [UIColor orangeColor];
    return headerView;
}
  • 定制底部视图样式
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section {
    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30)];
    footerView.backgroundColor = [UIColor greenColor];
    return footerView;
}

运行效果如下所示。

索引样式定制

通过实现sectionIndexTitlesForTableView:方法我们即可实现索引内容的定制，该方法的返回值是一个数组，并且数组中存储的都是字符串类型的对象。由于数组中的对象是有序存储的，因此每个字符串对象都对应了一个段Section，当我们点击索引时，即可跳转到对应的段Section。另外，关于索引外观样式的定制需要在UITableView对象中设置。

- (NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView {
    return @[@"S0",@"S1",@"S2",@"S3"];
}

运行效果如下：

示例代码

https://github.com/99ios/8.2.9