美文网首页
UITableView 二级列表相关应用和问题处理

UITableView 二级列表相关应用和问题处理

作者: 灿烂先森 | 来源:发表于2022-08-30 16:54 被阅读0次

    近期项目改版,新加了二级列表展开的需求,效果如下:

    图例.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;
    }
    

    至此,二级列表相关问题解决如此,你学废了吗?

    相关文章

      网友评论

          本文标题:UITableView 二级列表相关应用和问题处理

          本文链接:https://www.haomeiwen.com/subject/xferwrtx.html