美文网首页
iOS 类似QQ分组菜单的实现

iOS 类似QQ分组菜单的实现

作者: I丶am_Sure | 来源:发表于2018-05-29 17:58 被阅读0次

    序言

    最近项目中遇到一个类似QQ分组菜单的需求,效果图如下:

    C4CE779C-A03C-4B95-85BA-5E0D5AE2138F.png

    分析

    • “问题”可以作为组头,答案作为row,
    • 合着的状态下,行数为0,展开为1条
    • 每一组都有一个标识来记录该组的展开状态(可以通过声明一个静态数组用来记录是否展开)
    • 点击组头,刷新该组

    实现

    思路已经有了,接下来就是上干货的时候了;

    1. 声明静态数组(记录状态的方式有很多,可以根据个人喜好选择,本例子选用静态数组)
    {
        int _sectionStatus[4];//默认:关闭 
    }
    
    1. tableView的代理实现
    #pragma mark-TableView代理
    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    {
        return 4;
    }
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        return _sectionStatus[section]?1:0;
    }
    
    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return [tableView fd_heightForCellWithIdentifier:kHHTHelpCenterCell configuration:^(id cell) {
            HHTHelpCenterCell *tempCell = cell;
            
            NSString *LabelString=@"借鉴行业最领先的汽车融资模式,客户仅凭身份证,驾驶银行卡即可贷走心仪的车辆,彻底打破了中国传统汽车分";
            NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:LabelString];
            NSMutableParagraphStyle * paragraphStyle1 = [[NSMutableParagraphStyle alloc] init];
            [paragraphStyle1 setLineSpacing:9];
            [attributedString1 addAttribute:NSParagraphStyleAttributeName value:paragraphStyle1 range:NSMakeRange(0, [LabelString length])];
            
            tempCell.content=attributedString1;
        }];
        return SCALE_HEIGHT(153.f);
    }
    
    - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
        return 0.00000001f;
    }
    - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
        return 50;
    }
    
    - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {
        HHsectionHeaderView *view=[[HHsectionHeaderView alloc]initWithFrame:CGRectMake(0, 0, KScreenWidth, 50)];
        view.titleLab.text=self.dataSource[section];
        view.tag = section+10086;
        UITapGestureRecognizer *tapGesture=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(openOrClose:)];
        [view addGestureRecognizer:tapGesture];
        
        [UIView animateWithDuration:.5 animations:^{
            view.openIcon.transform=CGAffineTransformMakeRotation(_sectionStatus[section]?M_PI:0);
        }];
        return view;
        
    }
    
    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        //添加cell间隔线
        [tableView addLineforPlainCell:cell forRowAtIndexPath:indexPath withLeftSpace:0 hasSectionLine:YES];
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        HHTHelpCenterCell *cell = [tableView dequeueReusableCellWithIdentifier:kHHTHelpCenterCell];
        
        NSString *LabelString=@"借鉴行业最领先的汽车融资模式,客户仅凭身份证,驾驶银行卡即可贷走心仪的车辆,彻底打破了中国传统汽车分";
        NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:LabelString];
        NSMutableParagraphStyle * paragraphStyle1 = [[NSMutableParagraphStyle alloc] init];
        [paragraphStyle1 setLineSpacing:9];
        [attributedString1 addAttribute:NSParagraphStyleAttributeName value:paragraphStyle1 range:NSMakeRange(0, [LabelString length])];
        
        [cell.contentLab setAttributedText:attributedString1];
        
        return cell;
    
    }
    
    

    PS:本demo的cell是通过xib创建的,heightForRowAtIndexPath:方法里边是要实现不定高cell和添加行间距的逻辑。

    1. 实现组头的点击事件(修改标识值,刷新改组)
    -(void)openOrClose:(UIGestureRecognizer *)tap{
        
        _sectionStatus[tap.view.tag-10086]=!_sectionStatus[tap.view.tag-10086];
        
        NSIndexSet *indexSet=[NSIndexSet indexSetWithIndex:tap.view.tag-10086];
        [self.tableView reloadSections:indexSet withRowAnimation:UITableViewRowAnimationFade];
    }
    

    总结

    到此,整个实现方式已经完成了。当然了,解决方案并不只此一种,我这里只是抛砖引玉,提供一种思路。平时在项目中遇到此类需求时,不要着急写,应该多分析问题,缕清思路,那么代码的实现就是Soeasy的了。

    相关文章

      网友评论

          本文标题:iOS 类似QQ分组菜单的实现

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