UITableView的样式
UITableView
的样式有两种,一种为UITableViewStylePlain
普通样式(默认样式);一种为UITableViewStyleGrouped
分组样式。
typedef NS_ENUM(NSInteger, UITableViewStyle) {
UITableViewStylePlain, // regular table view 常规
UITableViewStyleGrouped // preferences style table view 偏好样式
};
创建UITableView
创建UITableView
的方法有三种,如果不指定tableView的样式,则默认使用UITableViewStylePlain样式。
//1.创建对象,不指定tableView的样式
UITableView * tableView = [UITableView new];
UITableView * tableView = [[UITableView alloc]init];
//2.创建对象,并设置其frame,不指定tableView的样式
UITableView * tableView = [[UITableView alloc]initWithFrame:self.view.bounds];
//3.创建对象,并设置其frame,指定tableView的样式为UITableViewStylePlain
UITableView * tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
同样的,当使用UItableViewController
时,如果不指定tableView的样式,则默认使用UITableViewStylePlain样式。
1.创建视图控制器,不指定tableView的样式
YXSecTableViewController * c = [YXSecTableViewController new];
YXSecTableViewController * c = [[YXSecTableViewController alloc]init];
2.创建视图控制器,指定tableView的样式为UITableViewStyleGrouped
YXSecTableViewController * c = [[YXSecTableViewController alloc]initWithStyle:UITableViewStyleGrouped];
例子
这是本次例子使用的设计图:
根据这个设计图, 我们可以分析,该tableView的样式应该为UITableViewStyleGrouped
,没有tableHeaderView
,sectionHeaderView
和tableFooterView
,没有分割线,但有一个高度为5的sectioFooterView
,用作分割各个单元格。
先不要吐槽,我知道,在cell
中创建一个高度为5的view
就可以了,后面会讲到。
分析完成
创建YXFirstTableViewController
,继承UITableViewController
,tableView的样式为默认样式。设置cell
的高度为自动计算。使用xib
来自定义cell
,设置storeArr.count
个section
,每个section
只有1个cell
。使用属性设置sectionFooterHeight
为5。
====== AppDelegate ======
- (UIViewController *)setRootVC{
UIViewController * c = [NSClassFromString(@"YXFirstTableViewController") new];
UINavigationController * navi = [[UINavigationController alloc]initWithRootViewController:c];
return navi;
}
====== YXFirstTableViewController ======
#define kScreenW [UIScreen mainScreen].bounds.size.width
#define kScreenH [UIScreen mainScreen].bounds.size.height
#define YXRGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255. blue:b/255.0f alpha:1]
#define YXSameRGB(v) YXRGB(v,v,v)
#pragma mark ============== Init ==============
- (void)setUpTable{
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 100;
self.tableView.sectionFooterHeight = 5;
[self.tableView registerNib:[UINib nibWithNibName:@"YXStoreTableViewCell" bundle:nil] forCellReuseIdentifier:@"YXStoreTableViewCell"];
}
#pragma mark ============== TableView ==============
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return storeArr.count;
}
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
UIView * view= [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 5)];
view.backgroundColor = [UIColor colorWithRed:229/255.0 green:229/255.0 blue:220/255.0 alpha:1];
return view;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
YXStoreTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"YXStoreTableViewCell"];
cell.model = storeArr[indexPath.section];
return cell;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%s",__func__);
}
运行:使用属性设置self.tableView.sectionFooterHeight = 5;
没有起作用。
并且当我的section
数量只有几个时(显示的内容小于tableView
的高度时),tableview
最底端还会出现‘格外’的分割线。
思考:使用属性设置不行,那使用代理方法呢?
先不管分割线问题,我使用代理方法设置sectionFooterHeight
的高度
-(CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 5;
}
运行:设置成功,并且没有了分割线!
但我发现sectionFooter
的背景色太浅,使用数码测色计测出颜色为YXSameRGB(247)
。
使用代理方法设置sectionFooter
的背景颜色。
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
UIView * view= [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 5)];
view.backgroundColor = YXSameRGB(229);
return view;
}
运行:成功设置sectionFooter
的背景颜色
滑动tableView
,仔细观察,发现最底下的sectionFooter
竟然跟随tableView
一起滚动。
估计如果你也设置了header
的话,效果也是一样。
这个效果,有好有坏,但这里,看起来并不友好,并且如果我的sectionFooter
高度为30时,还会遮挡cell
的内容,本来iphone
屏幕就不大,这简直不可原谅。
解决方法:
设置tableView
的style
为Group
当使用UITableViewController
时,设置tableView
的style
有两种方法:
由于我习惯使用NSClassFormString()
方法创建视图控制器,所以我使用第二种方式设置tableView
的style
1.创建视图控制的时候设置其style
YXSecTableViewController * c = [[YXSecTableViewController alloc]initWithStyle:UITableViewStyleGrouped];
2.覆盖其初始化方法,指定你想要的样式
-(instancetype)initWithStyle:(UITableViewStyle)style{
if (self = [super initWithStyle:UITableViewStyleGrouped]){
}
return self;
}
运行:成功解决sectionFooter
跟随tableView
一起滚动的效果
但是出现了另外两个问题:
1.tableView
的背景色改变了,使用数码测色计测出颜色为YXRGB(239,239,244)
,原来是白色
2.多了tableHeaderView
3.多了sectionHeaderView
1.删除sectionHeaderView
,
有鉴于前面使用属性设置sectionFooter
的高度无效的情况,这次我使用代理方法设置sectionHeaderHeight
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 0;
}
运行:代码不起作用
思考,使用代理方法设置sectionHeaderView能起作用吗?
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView * view= [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 0)];
return view;
}
运行:这仍然不起作用
一番折腾后,我发现:
1.当headerView的高度为0时,tableview会使用默认高度来设置sectionHeaderView的height
2.-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
代理方法的使用前提是要设置sectionHeaderHeight,否则该方法不起作用。
先不管footer
是否也一样呢?
反推过来,当我的tableView
的style
为Plian
时,使用属性设置sectionFooterHeight
不起作用,需要使用代理方法来设置。
那么当我的tableView
的style
为Group
时,我使用代理方法来设置sectionHeaderHeight
不起作用,那使用属性设置呢?
使用属性设置sectionHeaderHeight
:
self.tableView.sectionHeaderHeight = 0;
运行:成功设置了sectionHeaderHeight
2.删除tableHeaderView
当tableView
的stlye
为Plain
时,我们想删除tableView
底部格外的分割线有两种方法:
1.设置tableFooterView为一个size为0的view
self.tableView.tableFooterView = [UIView new];
2.设置分割线的样式为无分割线
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
使用同样技巧,我设置tableHeaderView
为一个size
为0的view
,虽然当前当style
为Group
,但我认为也是一样的
self.tableView.tableHeaderView = [UIView new];
运行:遗憾的是,这并不起作用。
我尝试使用以下方法,虽然我觉得结果是一样的。
[self.tableView setTableHeaderView:[UIView new]];
运行:果然还是不行。
没有办法了,你们呢?我只好把tableHeaderView
的高度设置为5,这跟sectionFooterView
一样了,这样看起来效果会好点。
UIView * tableHeader = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 5)];
tableHeader.backgroundColor = YXSameRGB(229);
self.tableView.tableHeaderView = tableHeader;
好吧,看来这样的做法并不能达到跟设计图一样的效果。
在cell中创建一个高度为5的view
其实最简单的方法是在cell中创建一个高度为5的view,
创建YXSecTableViewController
继承自UITableViewController
,tableView
的样式为默认样式Plain
,设置分割线的样式为无分割线。
#pragma mark ============== Init ==============
- (void)setUpTable{
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 100;
[self.tableView registerNib:[UINib nibWithNibName:@"YXSecStoreTableViewCell" bundle:nil] forCellReuseIdentifier:@"YXSecStoreTableViewCell"];
}
#pragma mark ============== TableView ==============
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return storeArr.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
YXSecStoreTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"YXSecStoreTableViewCell"];
cell.model = storeArr[indexPath.section];
return cell;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%s",__func__);
}
运行:没有问题。