教你做一个可折叠的TableView

最新推荐文章于 2022-11-11 09:30:58 发布

iOS_开发

最新推荐文章于 2022-11-11 09:30:58 发布

阅读量708

点赞数

点击上方“iOS开发”，选择“置顶公众号”

关键时刻，第一时间送达！

写在开头

首先，膜拜一下这位大神，Ramotion（https://github.com/Ramotion/folding-cell），自从在github上看到这个动画，惊为天人。

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

于是乎，就一头扎进了这个项目里，看到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收起来的时候展示的，就像这样：

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

需要注意的是，如果你的折叠次数为两次，那么这个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<NSString *,id> * _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都加入到数组里。

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

最后调皮一下，作者有一波操作没看懂，首先是把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
}
}
}