近期项目改版,新加了二级列表展开的需求,效果如下:
图例.png逻辑分析:
二级列表,主要功能是子列表的折叠和展开,且默认是折叠状态。这就需要用到tableView的section 和 row,即section 是父列表单元,每个section下的row为子列表单元,且每次点击section需要存储点击状态,从而表现子列表的折叠和展开效果。由于接口数据也是二级表单,因此model在创建时也是二级结构,这点需要注意。
代码:
#import "studentMemberListView.h"
@interface studentMemberListView ()<UITableViewDelegate,UITableViewDataSource>
{
BOOL status[10];//结构体用于存储section点击的bool值
}
@property(nonatomic, strong)UITableView *memberList;
@end
@implementation studentMemberListView
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor whiteColor];
[self addSubUI];
//默认第一个分组是打开的
status[0] = YES;
}
return self;
}
-(void)addSubUI
{
[self addSubview:self.memberList];
self.memberList.frame = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
}
#pragma mark -----tableDelgate&dataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section{
BOOL closeAge = status[section];
//关闭显示为0行
if (closeAge == NO) {
return 0;
}
return 3;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell1"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell1"];
cell.backgroundColor = [UIColor whiteColor];
cell.textLabel.textColor = [UIColor grayColor];
}
cell.textLabel.text = @"subcell11111111";
return cell;
}
- (void)sectionAction:(UIControl *)control{
NSInteger section = control.tag;
status[section] = !status[section];
NSIndexSet *indexSet = [NSIndexSet indexSetWithIndex:section];
[_memberList reloadSections:indexSet withRowAnimation:UITableViewRowAnimationNone]; //刷新制定单元格
return cell;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 3;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//设置cell 高度
return 76;
}
//section的header view的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 44;
}
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
NSLog(@"Section:%d Row:%d selected and its data is %@",
indexPath.section,indexPath.row,cell.textLabel.text);
[tableView deselectRowAtIndexPath:indexPath animated:NO];
//推出到子VC
//[self.navigationController pushViewController:[[studentDeatilViewController alloc] init] animated:YES];
}
//自定义section的header view
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIControl *titileView = [[UIControl alloc] initWithFrame:CGRectZero];
titileView.tag = section;
[titileView addTarget:self action:@selector(sectionAction:) forControlEvents:UIControlEventTouchUpInside];
//设置 头视图的标题
UILabel *titleLable = [[UILabel alloc] initWithFrame:CGRectMake(40, 12, 100, 30)];
titleLable.backgroundColor = [UIColor clearColor];
titleLable.textColor = [UIColor blackColor];
titleLable.font = [UIFont systemFontOfSize:18];
titleLable.text = @"title111111111111";
[titleLable sizeToFit];
[titileView addSubview:titleLable];
return titileView;
}
-(UITableView *)memberList
{
if (!_memberList) {
_memberList = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStyleGrouped];
_memberList.delegate = self;
_memberList.dataSource = self;
_memberList.backgroundColor = [UIColor whiteColor];
_memberList.separatorStyle = UITableViewCellSeparatorStyleNone;
[_memberList registerClass:[UITableViewCell class] forCellReuseIdentifier: @"cell"1];
}
return _memberList;
}
这里需要说的是,一开始笔者是打算用model来存储section的点击bool值的,但是在参考囧囧的文章后,发现其引入的结构体status更简洁,于是,这里借用了一下。
需要注意的是:status[10]为C语言中的结构体,这里你可以理解为oc语言中:一个数组+字典的概念,具体这里不展开叙述,有要求可百度了解,而10则为结构体的空间,如果你需要开辟多个,那将10增大即可。
另外添加一个在开发二级列表中遇到的问题:列表在大于一页时,展开子类表再折叠后,列表会上下抖动。在我查阅相关资料后得知,抖动是因为列表没有设置初始高度,再后期展开再折叠刷新section后,系统IOS11后列表为了优化布局,会重新计算高度,因此会出现抖动。解决方法如下:
1.在刷新时添加performWithoutAnimationBlock:
//刷新制定单元格
[UIView performWithoutAnimation:^{
[self.memberList reloadSections:indexSet withRowAnimation:UITableViewRowAnimationNone];
}];
2.在tableView初始化时设定列表初始高度:
-(UITableView *)memberList
{
if (!_memberList) {
_memberList = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStyleGrouped];
_memberList.delegate = self;
_memberList.dataSource = self;
_memberList.backgroundColor = [UIColor whiteColor];
_memberList.separatorStyle = UITableViewCellSeparatorStyleNone;
[_memberList registerClass:[UITableViewCell class] forCellReuseIdentifier: @"cell"1];
if (@available(iOS 11.0, *)) {
//设定默认cell高度,防止展开页面抖动
UITableView.appearance.estimatedRowHeight = 0;
UITableView.appearance.estimatedSectionFooterHeight = 0;
UITableView.appearance.estimatedSectionHeaderHeight = 0;
}
}
return _memberList;
}
至此,二级列表相关问题解决如此,你学废了吗?
网友评论