先来看一下tableview 的结构(plain style)。
-------------------------------------- +
header table header
-------------------------------------- +
-------------------------------------- +
section header
--------------------------------------
cell
-------------------------------------- table section
cell
--------------------------------------- +
section footer
--------------------------------------- +
--------------------------------------- +
footer talbe foot
--------------------------------------- +
1、首先要在 UITableViewController 的 viewDidLoad方法中设置 self.tableView.sectionHeaderHeight的值，不然你不会看到section的数据的。
2、在UITableViewController 的numberOfSectionsInTableView方法中返回section的个数。
3、在UITableViewController 的(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 方法中设置cell中的数据。
static NSString *identifier = @"dataCell";//这个用于cell种类的标识
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier]; //按identifier查找可重用cell。也就是系统要是有identifier类型的cell给你用，就返回这个可用的cell给你,否则返回nil
if (!cell) {//如果没有
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];//老子新建一个 }
DataGroupModel *groupModel = self.dataArray[indexPath.section]; //这里的dataArray可以是一个NSMutableArray，包含二级数据，第一级group用于section，第二级data用于cell
DataModel *dataModel = groupModel.data[indexPath.row]; //定为到group的data级数据
cell.imageView.image = [UIImage imageNamed:dataModel.icon];//这里cell的imageView等成员是UITableViewCell自己带的
cell.textLabel.text = dataModel.name;
cell.detailTextLabel.text = dataModel.detail; return cell;
4、接下来我们来设置section，我们用一个自定义的UIView类型的对象来作为section的header，也就是表头<th>。
4.1、在UITableViewController 的(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section方法中指定view。
HeaderView *header = [HeaderView headerView:tableView];//这里的HeaderView是我们自己定义的一个继承UITableViewHeaderFooterView的类
header.delegate = self; //设置header对象delegate为当前控制器
header.groupModel = self.dataArray[section];//设置header对象groupModel成员为某个二级数组
return header;//返回UIView *
4.2、接着我们定义HeaderView这个类
HeaderView.h
@protocol HeaderViewDelegate <NSObject> @optional
- (void)clickView; //首先定义一个代理方法，让TableViewController取实现，点击section的header时候要显示cell @end @interface HeaderView : UITableViewHeaderFooterView
@property (nonatomic, assign) id<HeaderViewDelegate> delegate;//有protocol的代理，肯定要有这个代理了 @property (nonatomic, strong) JKGroupModel *groupModel;//单个section的group数据
+ (instancetype)headerView:(UITableView *)tableView;//声明类的getter方法，这里说明一下instancetype，这个数据类型在这个类里就是HeaderView *，也就是self的数据类型，但这个instancetype只能做返回值，不能做参数类型。
@end
HeaderView.m
@implementation HeaderView{//我们先定义一些全局变量，全局变量也能这样写？
UIButton *_arrowBtn;
UILabel *_label;
}
//重写initWithReuseIdentifier
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{
if (self = [super init]) {//先让父类自己搞他自己的那一套初始化
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//我们定义一个UIButton，在UIButton上面自己实现怎么显示数据
[button setBackgroundImage:[UIImage imageNamed:@"header_bg"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"header_bg_highlighted"] forState:UIControlStateHighlighted];
[button setImage:[UIImage imageNamed:@"arrow"] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
button.imageView.contentMode = UIViewContentModeCenter;
[button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];//点击section的header时，应该显示cell或者收起cell
button.imageView.clipsToBounds = NO;
_arrowBtn = button;
[self addSubview:_arrowBtn];//添加到视图
//创建label，显示当前在线人数
UILabel *labelRight = [[UILabel alloc] init];
labelRight.textAlignment = NSTextAlignmentCenter;
_label = labelRight;
[self addSubview:_label];//添加到视图
}
return self;
}
//点击section的header时，应该显示cell或者收起cell
- (void)buttonAction{
self.groupModel.isOpen = !self.groupModel.isOpen;
if ([self.delegate respondsToSelector:@selector(clickView)]) {//respondsToSelector这个方法是查找clickView是否存在
[self.delegate clickView];//delegate的方法clickView的实现在TableViewController里
}
}
//下面是一下布局和图像的东西didMoveToSuperview，layoutSubviews，setGroupModel，这里先不讲
- (void)didMoveToSuperview{
_arrowBtn.imageView.transform = self.groupModel.isOpen ? CGAffineTransformMakeRotation(M_PI_2) :CGAffineTransformMakeRotation(0);
}
//布局
- (void)layoutSubviews{
[super layoutSubviews];
_arrowBtn.frame = self.bounds;
_label.frame = CGRectMake(self.frame.size.width - 70, 0, 60, self.frame.size.height);
}
//赋值
- (void)setGroupModel:(JKGroupModel *)groupModel{
_groupModel = groupModel;
[_arrowBtn setTitle:_groupModel.name forState:UIControlStateNormal];
_label.text = [NSString stringWithFormat:@"%@/%lu",_groupModel.online,(unsigned long)_groupModel.friends.count];
}
5、这里我们实现一下HeaderView中声明的一个代理clickView
- (void)clickView{
[self.tableView reloadData];//这个reloadData会重新执行所有的UITableView显示类方法，相当刷新这个UITableView
}6、这里我们实现点击 cell的时候push到一个视图，这里没有太多说明了
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
ViewController *viewCtrl = [[ViewController alloc] init];
[self.navigationController pushViewController:viewCtrl animated:NO];
}7、这里我们实现用一个TableFooterView盖住多余的section线。
- (void)clipExtraCellLine:(UITableView *)tableView{
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor clearColor];
[self.tableView setTableFooterView:view];
}