转载

教你做一个可折叠的TableView

写在开头

首先，膜拜一下这位大神，Ramotion，自从在github上看到这个动画，惊为天人。

教你做一个可折叠的TableView

心里不禁感叹，原来动画还可以这样做，可能是技术限制了我的想象力。

教你做一个可折叠的TableView

于是乎，就一头扎进了这个项目里，看到issue里有很多人提出想要一个Tutorial和OC版本，决定边研究源码，边写一个OC版本，毕竟代码还是要自己码一遍可以学的更快。文章结尾会放出OC版本的链接，如果想要swift版本的Demo，可以直接去这位大神的Git下载。

如何使用

1.先自建一个TableViewCell，父类为提供的FoldCell。

@interface DemoFoldingCell : HSFolderCell

2.初始化你的TableViewCell时，设置折叠动画的次数以及foregroundView和containerView。你所有的界面都是在这两个View里显示的。然后运行父类的commonInit方法。

self.itemCount = 4;
self.foregroundView = [self createForegroundView];
self.containerView = [self createContainerView];

[self commonInit];

foregroundView：这个View是你的cell收起来的时候展示的，就像这样：

教你做一个可折叠的TableView

containerView：这是当你的cell展开时用于展示的，像这样：

教你做一个可折叠的TableView

需要注意的是，如果你的折叠次数为两次，那么这个View的高度应为foregroundView的两倍，如果超过两次，那么高度需要满足这个条件：

CGFloat itemHeight = (containerViewSize.height - 2 * foregroundViewSize.height) / (self.itemCount - 2); 
    if(self.itemCount == 2){
        // decrease containerView height or increase itemCount
        NSAssert(containerViewSize.height - 2 * foregroundViewSize.height == 0, @"containerView.height too high");
    }else{
        // decrease containerView height or increase itemCount
        NSAssert(containerViewSize.height - 2 * foregroundViewSize.height >= itemHeight, @"containerView.height too high");
    }

3.在TableView的didSelect方法里，调用unfold方法进行动画展示。

    if([self.itemHeight[indexPath.row] floatValue] == closeHeight){
        //open cell
        self.itemHeight[indexPath.row] = [NSNumber numberWithFloat:openHeight];
        [cell unfold:YES animated:YES completion:nil];
        duration = 0.5;
    }else{
        //close cell
        self.itemHeight[indexPath.row] = [NSNumber numberWithFloat:closeHeight];
        [cell unfold:NO animated:YES completion:nil];
        duration = 1.1;
    }
   
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        [tableView beginUpdates];
        [tableView endUpdates];
    } completion:nil];

有几点要注意的：

1.iOS11以后，TableView有时候会乱跳，需要设置

 _tableView.estimatedRowHeight = 0;
 _tableView.estimatedSectionHeaderHeight = 0;
 _tableView.estimatedSectionFooterHeight = 0;

2.需要实现willDisplayCell方法，否则在滑动过程会因为Cell复用而出现错乱。

    if([self.itemHeight[indexPath.row] floatValue] == closeHeight){
        [(DemoFoldingCell *)cell unfold:NO animated:NO completion:nil];
    } else {
        [(DemoFoldingCell *)cell unfold:YES animated:NO completion:nil];
    }

3.一定要将两个View的Top类型的Constraint设定到Cell提供的两个属性上，像这样：

NSLayoutConstraint * topConstraint = [NSLayoutConstraint constraintWithItem:foregroundView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeTop multiplier:1 constant:8];
self.foregroundViewTop = topConstraint;
//
NSLayoutConstraint * topConstraint = [NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.contentView attribute:NSLayoutAttributeTop multiplier:1 constant:181];
self.containerViewTop = topConstraint;

原理解析

我一直认为，要理清代码，就要跟着代码走一遍，自己码一遍，这样才能体会到每一个地方的作用。另外，这里我贴的是我自己改过后的OC代码，想看Swift版本的，可以去这位大神的Git上下载，我在文章开头贴了链接。

先感叹一下，Swift在很多情况下，真的是要比OC方便太多，举几个代码里的例子：

for case let itemView as RotatedView in animationView.subviews.filter({ $0 is RotatedView }).sorted(by: { $0.tag < $1.tag }) {
    rotatedViews.append(itemView)
    if let backView = itemView.backView {
        rotatedViews.append(backView)
    }
}

这里Swift只用了一句话，就对animationVIew的subview数组进行了过滤，找到了所有为RotatedView的subview，且做了排序。而我写的OC版本是这样：

- (NSArray *)rotatedViewsInAnimationView{
    NSArray * arr = [self.animationView.subviews filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(UIView * evaluatedObject, NSDictionary * _Nullable bindings) {
        return [evaluatedObject isMemberOfClass:[HSRotatedView class]] && evaluatedObject.tag > 0 && evaluatedObject.tag < self.animationView.subviews.count;
    }]];
  
    return arr;
}

- (NSArray *)sortRotatedViewsInAnimationView{
    NSArray * arr = [self rotatedViewsInAnimationView];
  
    NSArray * sortedArr = [arr sortedArrayUsingComparator:^NSComparisonResult(UIView * obj1, UIView * obj2) {
        if(obj1.tag < obj2.tag){
            return NSOrderedAscending;
        }
        if(obj1.tag > obj2.tag){
            return NSOrderedDescending;
        }
        return NSOrderedSame;
    }];
   
    return sortedArr;
}

别的不多说了，来看代码吧！

最开始是在commonInit方法里调用了configureDefaultState方法，方法里对两个TopConstraint属性是否赋值做了判断，然后创建了AnimationView。这个View是一层盖在你Cell上的View，当你Cell折叠起来的时候是不显示的，当展开时显示出来用于做动画。它的约束完全和你的ContainerView的约束一样。

到这里，准备工作就做好了。另外要提一句的是，这里面有一种用于做翻转动画的View，我给它命名为HSRotatedView，它提供了三个方法：

- (CATransform3D)transform3d;

- (void)addBackView:(CGFloat)height color:(UIColor *)color;

- (void)foldingAnimation:(NSString *)timing from:(CGFloat)from to:(CGFloat)to duration:(NSTimeInterval)duration delay:(NSTimeInterval)delay hidden:(BOOL)hidden;

transform3d是返回一个transform3D实例，并且设定了m34值，这样才能看到3d动画。addBackView方法是为该RotatedView添加一个背部view，当你的cell展开或者折叠时，除了你想给用户看到的view以外，翻转后背部的view也应该呈现出来，这里我们的背部view就是一个单纯颜色的view。最后一个方法就是折叠动画了。

还有一个文件是UIView的category，用于截出特定位置的画面。

当我们选择某个Cell执行unfold方法时，比如展开Cell，会先执行addImageItemsToAnimationView方法。简单来说，就是通过截屏的方法，将你的containerView分部分截出来，包括你的所需要创建的背部view，每一个都设定好属性，然后加到animationView上去。接着调用createAnimationItemView方法，将所有刚才创建的view都加入到数组里。

最后就是按顺序一个个执行动画了，我放慢了动画效果，可以看一下：

教你做一个可折叠的TableView

最后调皮一下，作者有一波操作没看懂，首先是把subView命名为superView，然后这个循环...可能技术又限制了我的想象力，这是源码代码：

guard let animationViewSuperView = animationView?.subviews else {
    fatalError()
}

if animationType == .open {
     for view in animationViewSuperView.filter({ $0 is RotatedView }) {
        view.alpha = 0
    }
} else {
     for case let view as RotatedView in animationViewSuperView.filter({ $0 is RotatedView }) {
         if animationType == .open {
            view.alpha = 0
        } else {
             view.alpha = 1
             view.backView?.alpha = 0
        }
    }
}

这是我改了之后的循环：

for (HSRotatedView * view in arr) {
    if(animationType == AnimationTypeOpen){
        view.alpha = 0;
    }else{
        view.alpha = 1;
        view.backView.alpha = 0;
    }       
}

教你做一个可折叠的TableView