美文网首页ios初级篇学无止境牛叉的demo
iOS10 中优雅地实现可折叠UITableView的思路

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

作者: Tidus | 来源:发表于2017-01-06 17:43 被阅读386次

    前言

    标题中说的可折叠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的折叠状态来返回元素个数了。

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

    相关文章

      网友评论

      本文标题:iOS10 中优雅地实现可折叠UITableView的思路

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