iOS10 中优雅地实现可折叠UITableView的思路

前言

标题中说的可折叠TableView是指含有多个Section的TableView,可以按需求折叠或展开指定的Section,实现的方式有很多种,也比较简单。曾经笔者也根据网上搜到的信息自己实现了一个可折叠的TableView,但实现的方式略为笨拙。最近项目没那么紧,重新思考了下发现能有更优雅的实现,于是就有了这篇文章,也算是把这个过程记录下来,加深对其中运用到的知识的印象。下面笔者将会详细介绍这种实现方式,只想看结果的读者可以直接拖到最后查看效果图和DEMO。

1、基本原理

可折叠TableView的实现方法很多,但是离不开的一个关键点就是:** 保存TableView中每个Section的折叠状态,并根据这个状态,判断每个Section下该不该展示数据(Cell)。 **
根据这个关键点,我们需要做的事情有两个。第一,使用合适的方式保存每个Section的折叠状态。第二,根据状态(折叠或展开)判断是否展示数据。

1.1 折叠状态

既然确定了需要保存这个状态,那我们需要考虑的就是这个状态要怎么保存、保存在哪里。
年轻的我曾经将这个折叠状态保存在了接口返回的数据中,举个例子,接口返回的是一个json列表,列表中的每个对象代表一个Section,Cell的数据放在对象中的一个列表。

[
    //section
    {
      name:"section1",
      //row
      list:[{},{}]
    },...,{

    }
]

这样子处理虽然能保存状态,但弊端就是每次从接口获取到数据后都需要对数据源进行处理,在数据源中的每个section对象中加个state字段来标识该section是否折叠。而且如果接口返回的是一个里面放着列表的json列表,就更麻烦了,还需要自己重新修改数据源的结构。同时当列表的折叠状态发生改变,还需要遍历数据源数组,来修改对应的折叠状态。

解决方案

所以在这次的实现中,笔者将这个状态放到tableView本身身上来保存,用一个属性来保存它,以此将它跟数据源分开来,减低对数据源的污染。由于考虑到需要保存多个section的状态,而且每个section的状态都是独立的,只有展开和折叠两种,并且是无序的,所以使用了NSSet保存。section序号存在于这个Set中的section代表折叠,不存在代表展开。

@property (strong, nonatomic) NSMutableSet *ww_foldState;

考虑到暴露状态属性给外界修改容易造成UI与状态不一致,于是只把这个属性放在了TableView的内部维护使用。

1.2 判断是否展现数据

年轻的我(再次出现:D)在之前的实现方式是在UITableViewDataSource的代理方法中处理是否展现数据,如:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSArray* dataList = self.dataHelper.dataList;
    BOOL isFolded = [self.dataHelper isSectionFolded:section];
    if(dataList != nil && section < dataList.count){
        if(isFolded){
            //折叠中返回0
            return 0;
        }else{
            //需要展示的行数
            return 1;
        }
    }
    return 0;
}

向上面说的,由于折叠状态放到了数据源中保存,所以只好在代理方法中(代理也就是ViewController持有着数据源)根据数据源的状态去判断了。这样做对于新开发的项目来说也没什么不太好的地方,但假如是对旧项目进行修改,对需要改造的TableView的代理方法一个个去修改,就显得有点麻烦了。

解决方案

在这里我选择了hook TableView中调用上面的代理方法的方法,并添加自己的逻辑。在上面返回行数的代理方法中打个断点,运行一下,我们就可以从堆栈中看到是哪个方法在调用这个代理方法了。


-[UITableView _numberOfRowsInSection:]就是我们要hook的方法

然后根据TableView对应section的折叠状态,返回具体的行数。

2、实现

下面将详细介绍实现方式,涉及到ObjectC中的一些runtime知识,不在这篇文章的讨论范围内,就不细说了。

2.1 方法交换

由于需要hook TableView中的方法,先给NSObject创建一个分类,用于添加method swizzle相关的方法。

#import <objc/runtime.h>

@interface NSObject (WWExtension)
+ (void)ww_swizzInstanceMethod:(SEL)methodOrig withMethod:(SEL)methodNew;
+ (void)ww_swizzClassMethod:(SEL)methodOrig withMethod:(SEL)methodNew;
@end

@implementation NSObject (WWExtension)
+ (void)ww_swizzInstanceMethod:(SEL)methodOrig withMethod:(SEL)methodNew
{
    Method orig = class_getInstanceMethod(self, methodOrig);
    Method new = class_getInstanceMethod(self, methodNew);
    if(orig && new){
        method_exchangeImplementations(orig, new);
    }else{
        NSLog(@"swizz method failed: %s", sel_getName(methodOrig));
    }
}

+ (void)ww_swizzClassMethod:(SEL)methodOrig withMethod:(SEL)methodNew
{
    Method orig = class_getClassMethod(self, methodOrig);
    Method new = class_getClassMethod(self, methodNew);
    if(orig && new){
        method_exchangeImplementations(orig, new);
    }else{
        NSLog(@"swizz method failed: %s", sel_getName(methodOrig));
    }
}
@end

记得导入<objc/runtime.h>

2.2 TableView分类

1.考虑到降低代码侵入性,我选择了用分类的方式去实现这个功能。给TableView创建一个分类,用于添加折叠相关状态与方法

@interface UITableView (WWFoldableTableView)

@property (assign, nonatomic) BOOL ww_foldable;

- (BOOL)ww_isSectionFolded:(NSInteger)section;
- (void)ww_foldSection:(NSInteger)section fold:(BOOL)fold;

@end

可以看到我在分类中声明了属性,但编译器并不会帮我们合成实例变量,所以需要用runtime中的objc_getAssociatedObjectobjc_setAssociatedObject方法在运行时绑定对象。例如ww_foldable这个属性:

static const char WWFoldableKey = '\0';
- (BOOL)ww_foldable
{
    return [objc_getAssociatedObject(self, &WWFoldableKey) boolValue];
}

- (void)setWw_foldable:(BOOL)ww_foldable
{
    [self willChangeValueForKey:@"ww_foldable"];
    objc_setAssociatedObject(self, &WWFoldableKey, @(ww_foldable), OBJC_ASSOCIATION_ASSIGN);
    [self didChangeValueForKey:@"ww_foldable"];
    
    //initialize
    if(ww_foldable && !self.ww_foldState){
        NSMutableSet *foldState = [NSMutableSet set];
        self.ww_foldState = foldState;
    }
    
    //clean up
    if(!ww_foldable){
        [self setWw_foldState:nil];
    }
}

定义了的这两个方法后当我们在代码中调用tableView.ww_foldable时,编译器会根据需要将代码自动编译成[tableView ww_foldable]或者[tableView setWw_foldable:]。ww_foldState也是同样的道理。

2.然后是两个关键的用于交换的方法:

+ (void)load
{
    [self ww_swizzInstanceMethod:@selector(_numberOfRowsInSection:) withMethod:@selector(ww__numberOfRowsInSection:)];
}

- (NSInteger)ww__numberOfRowsInSection:(NSInteger)section
{
    if(!self.ww_foldState || !self.ww_foldState){
        return [self ww__numberOfRowsInSection:section];
    }
    
    //根据折叠状态返回行数
    BOOL isFolded = [self ww_isSectionFolded:section];
    return isFolded ? 0 : [self ww__numberOfRowsInSection:section];
}

在分类中的+load方法中将_numberOfRowsInSection:私有实例方法与自己定义的方法交换。
_numberOfRowsInSection:中,TableView调用代理的相应方法返回指定section中的行数,我在原有的逻辑后面,添加根据折叠状态返回行数的逻辑。
判断指定section是否折叠,只需要判断保存state的NSSet中是否存在该Section的索引即可。

3.调用
在上面两步中,已经展示了这个组件的大部分代码。其次调用这个组件的方式也很简单,引用这个组件的头文件,然后正常定义我们的TableView,在最后加上tableView.ww_foldable = YES;即可,例如:

#pragma mark - getter
- (UITableView *)tableView
{
    if(!_tableView){
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight-StatusBarHeight-NavigationBarHeight) style:UITableViewStyleGrouped];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

        //设置可折叠
        _tableView.ww_foldable = YES;
    }
    return _tableView;
}

然后在需要触发折叠/展开tableView的事件中调用:

[self.tableView ww_foldSection:section fold:![self.tableView ww_isSectionFolded:section]];

还有其他的代码可以自行到Demo中查看~

运行效果:

Demo效果

完整的Demo代码在这里:
https://github.com/Tidusww/WWFoldableTableView

3、总结

通过思考需求的本质原理,结合OC运行时的特性,让我们以很小的代码量(除去注释150行代码不到),很低的侵入性(仅引用一个头文件,无需继承,正常定义tableView),十分方便的方式(1行代码用于设置tableView)来优雅地实现可折叠TableView。

另外也有一些容易踩到的坑在这里整理一下,如:

  1. 使用运行时特性给tableview添加实例对象的时候要处理好关联的类型,不然容易出现超出预期的结果。

  2. 设置了某个section的折叠状态后需要及时更新UI,让UI跟状态保持一致。

  3. 可以使用[self reloadSections:[NSIndexSet indexSetWithIndex:section] withRowAnimation:UITableViewRowAnimationFade];方法来动态刷新某一section,但要注意如果此时其他section的行数变化了(通过代理方法两次获取到的数目不同,在这里其实就是手动修改了折叠状态,但没有刷新tableView)会引起crash。

  4. 这种实现方式其实存在一个隐患,由于我们在+load方法中替换** 私有实例方法 **,假如苹果对UITableView进行优化或者重构(虽然可能性比较小),导致逻辑变更、方法名有变等情况,就有可能影响到相关逻辑,我们的方法也会不起作用了。所以需要在每个iOS新版本一直对其进行维护,检查方法是否改名或者逻辑是否改变。在旧版本的iOS系统中则只能在代理方法中根据当前section的折叠状态来返回元素个数了。

最后如果大家有更好的实现方式或者本文有什么纰漏,欢迎在文章下面评论留言,一起讨论,一起进步。 _~

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

推荐阅读更多精彩内容