【Objective-c】UITableView 折叠效果

小编敲代码实现项目功能时,心中总会打上许多问号“ ?”,虽然项目的UI和功能都实现了,但总觉得自己的方法很low,没有什么复用度和设计模式可言,处于低级阶段,离高新的目标很是遥远!!!更不要说迎娶白富美了"~".......好了,扯了有点远了,言归正传:UITableView折叠效果(类似QQ联系人的折叠),在没有看到大神博客的时候,

我实现的套路如下:
1、使用Xib定制两个Cell(一个标题Cell,一个展开Cell)
2、折叠展开是通过改变tableView的section分区中cell的个数,折叠时数量1,展开时数  量就有多个
3、两个重要参数:一个NSArray存储内容(后台数据请求返回的),
                               一个NSDictionary记录“折叠展开”
4、改变“折叠”“展开状态”,通过刷新整个tableIView展示

不足的是:
1、在cellForRow方法中要判断是标题Cell还是展开Cell
2、在cell的点击方法中也是需要判断是标题Cell还是展开Cell
3、刷新整个tableView,消耗的资源比较大(当然可以只是刷新某个section)

虽然实现的代码量不多,逻辑也不复杂,但是要知道项目是会成长的,后续添加的功能需求只会越来越多,这就考验当初设计时:代码的灵活度、代码的分工明不明细(影响代码的可读性)、代码的扩展性等等,这就是我们经常看到一些大神在实现一些简单功能的时候总会创建几个分类,然后跳来跳去的,心中就疑惑就起来了.....

接下来谈谈大神的方法(面向对象的编程思想)

1、依然是通过改变tableView的section分区中cell的个数,不同的是折叠时为0,展开时是多个,因为布局中标题cell是在每个section的头视图显示的(这样在cellForRow中就不需要判断)
2、创建UITableViewHeaderFooterView的子类,自定义标题内容
3、自定义cell,显示展开后的cell
4、创建section模型,存储每组section的内容
5、创建cell模型,存储展开后每个cell的内容
6、单独刷新section

详情请看代码:

先看效果图,有个概念


spring.gif
建立模型:
@interface SectionModel : NSObject
@property (nonatomic,assign) BOOL isExpand;
@property (nonatomic,strong) NSString *title;
@property (nonatomic,strong) NSArray *cellArray;
@end
@interface CellModel : NSObject
@property (nonatomic,strong) NSString *title;
@end
创建一个继承于UITableViewHeaderFooterView的子类"SectionView"
@class SectionModel;
typedef void(^CallBackBlock)(BOOL);
@interface SectionView : UITableViewHeaderFooterView
@property (nonatomic,strong) SectionModel *model;
@property (nonatomic,strong) CallBackBlock block;
@end

.m文件

/* 在构造方法中,创建UI*/
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{
    if (self = [super initWithReuseIdentifier:reuseIdentifier]) {
        CGFloat w = [UIScreen mainScreen].bounds.size.width;
        self.arrowImage = [[UIImageView alloc]initWithFrame:CGRectMake(10, (44 - 8) / 2, 15, 8)];
        self.arrowImage.image = [UIImage imageNamed:@"right.png"];
        [self.contentView addSubview:self.arrowImage];
        
        UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, w, 44)];
        [button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:button];
        
        self.titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, (44 - 20) / 2, w-20, 20)];
        self.titleLabel.font = [UIFont systemFontOfSize:17];
        self.titleLabel.textColor = [UIColor blackColor];

        UIView *line = [[UIView alloc]initWithFrame:CGRectMake(0, 43, w, 1)];
        line.backgroundColor = [UIColor darkGrayColor];
        [self.contentView addSubview:line];
        
        [self.contentView addSubview:self.titleLabel];
        
        self.contentView.backgroundColor = [UIColor yellowColor];
    }
    return self;
}
/*
  1、通过懒加载,设置“箭头”的方向
  2、通过头视图SectionView的点击,改变“箭头”的方向
  3、通过点击SectionView,回调block进行section刷新
*/
- (void)setModel:(SectionModel *)model{
    if (_model != model) {
        _model = model;
    }
    self.titleLabel.text = model.title;
    if (model.isExpand) {       //展开
        self.arrowImage.transform = CGAffineTransformIdentity;
    }else{
        self.arrowImage.transform = CGAffineTransformMakeRotation(M_PI);
    }
}

- (void)btnClick:(UIButton *)sender{
    self.model.isExpand = ! self.model.isExpand;
    if (self.model.isExpand) {
        self.arrowImage.transform = CGAffineTransformIdentity;
    }else{
        self.arrowImage.transform = CGAffineTransformMakeRotation(M_PI);
    }
    if (self.block) {
        self.block(self.model.isExpand);
    }
}
tableView 的配置
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic,strong) UITableView *tableView;
@property (nonatomic,strong) NSMutableArray *sectionData;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStylePlain];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    [self.view addSubview:self.tableView];
    
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cellid"];
    [self.tableView registerClass:[SectionView class] forHeaderFooterViewReuseIdentifier:@"header"];
}
//懒加载
- (NSMutableArray *)sectionData{
    if (_sectionData == nil) {
        _sectionData = [[NSMutableArray alloc]init];
        for (int i=0; i<20; i++) {
            SectionModel *model = [[SectionModel alloc]init];
            model.title = [NSString stringWithFormat:@"%d",i];
            model.isExpand = NO;
            NSMutableArray *array = [[NSMutableArray alloc]init];
            for (int j=0; j<10; j++) {
                CellModel *cell = [[CellModel alloc]init];
                cell.title = [NSString stringWithFormat:@"LivenCell==Section:%d,Row:%d",i,j];
                [array addObject:cell];
            }
            model.cellArray = array;
            [_sectionData addObject:model];
        }
    }
    return _sectionData;

}
#pragma mark - tableView delegate
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return self.sectionData.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    SectionModel *model = _sectionData[section];
    return model.isExpand?model.cellArray.count:0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellid"];
    SectionModel *section = _sectionData[indexPath.section];
    CellModel *model = section.cellArray[indexPath.row];
    cell.textLabel.text = model.title;
    return cell;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    SectionView *view = [tableView dequeueReusableHeaderFooterViewWithIdentifier:@"header"];
    SectionModel *model = _sectionData[section];
    view.model = model;
    //更变了section的cell数量,所以要刷新
    view.block = ^(BOOL isExpanded){
        [tableView reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];
    };
    return view;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 44;
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    return 44;
}

整体的内容就这么多,这个Demo真的不错,觉得好的自己多敲几遍,最后必须感谢“标哥”对我的启发

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 概述在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似...
    liudhkk阅读 8,978评论 3 38
  • 原创 2017-07-26 王晓先 先姐笔耕为卫知产并护青春 惊险的实弹训练 王晓先 我插队当知青的那个年代,每年...
    先姐笔耕阅读 349评论 1 0
  • 嗨,大家好,我是丽妃娘娘,周末快乐! 今天是跑休时间,所以起床后没有跑步,看了一篇TED。 讲述的是一位英国姑娘,...
    丽妃娘娘阅读 3,266评论 2 2
  • 定义:对自己的思考过程的认知与理解。 对自己的思考过程,思考原理和思考结果,往往需要去思考一下为什么我会这么想,这...
    Sucler阅读 153评论 0 0
  • 对于性爱的渴望,被写进两性动物的基因里,人类的基因包含对性爱的渴望。 如果人类的基因中没有对性爱的渴望,那么,人类...
    小星Stack阅读 374评论 0 0