IOS初级:UITableView
先来看一下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]; }