brefchan / ccfoldcell

Cell折叠动效(OC实现)

CCFoldCell

Cell折叠动效(OC实现) 之前在https://github.com/Ramotion/folding-cell 看到了用Swift实现的很炫酷的Cell折叠效果,准备用在公司的项目里面,可惜公司的项目是OC实现,所以,自己动手丰衣足食,我用OC实现了同样的效果

如果觉得有用,不妨给个Star呗~

项目演示

使用方法

Cell Xib 设置

首先,下载Demo,把CCFoldCell文件夹拖入你的工程,创建一个新的Cell继承CCFoldCell,新Cell必须要用Xib.

然后,在Xib中选中你的Cell

在右边属性设置里面设置FoldCell属性

Item Count属性表示翻转动画时,你的内容视图分成多少块翻转视图来进行翻转,值越大,则每块翻转视图越小,反之亦然.注意,值必须设置成2以上 BackViewColor属性表示你的翻转视图的背后的颜色是什么.

然后用AutoLayout进行Cell的布局,布局的规范是,翻转前的视图称为Foreground视图,将翻转完成时显示的视图称为Contener视图 所以你需要在Cell中布局2个视图,注意2个视图之间不能有任何的相关约束,顶部约束都必须相对于Cell的contentView来进行

然后分别将这2个视图与containerView和foregroundView Outlets绑定,然后将2个视图相对于Cell的contentView的顶部约束和 containerViewTop 和 foregroundViewTop Outlets绑定

Cell 方法重写

接下来在Cell的.m文件中重写父类

- (NSTimeInterval)animationDurationWithItemIndex:(NSInteger)itemIndex animationType:(AnimationType)type;

方法,里面返回的是每次翻转的用时,用NSNumber装起来放入数组返回,例如Demo中的翻转用时返回的是

- (NSTimeInterval)animationDurationWithItemIndex:(NSInteger)itemIndex animationType:(AnimationType)type
{
    NSArray<NSNumber *> *array = @[@(0.5f),@(.25f),@(.25f)];
    return array[itemIndex].doubleValue;
}

那么,Cell的设置就已经完成了,现在讲解的是在视图控制器中如何让Cell进行动画

动画的开始时机

在UITableView的

- (void)tableView:(UITableView *)tableView willDisplayCell:(DemoCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath;

中进行Cell样式的展示,根据Cell的高度来判断Cell是否进行了翻转,具体代码为

- (void)tableView:(UITableView *)tableView willDisplayCell:(DemoCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (![cell isKindOfClass:[DemoCell class]]) return;
    
    cell.backgroundColor = [UIColor clearColor];
    
    CGFloat cellHeight = self.cellHeights[indexPath.row].floatValue;
    if (cellHeight == kCloseCellHeight) {
        [cell selectedAnimationByIsSelected:NO animated:NO completion:nil];
    }else
    {
        [cell selectedAnimationByIsSelected:YES animated:NO completion:nil];
    }
    
    [cell setNumber:indexPath.row];
}

然后在UITableViewDelegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

中进行Cell的动画触发 使用Cell的

- (void)selectedAnimationByIsSelected:(BOOL)isSelected animated:(BOOL)animated completion:(void(^)())completion;

方法来设置Cell是否是翻转状态,是否进行动画.

Demo中的实现为

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    DemoCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    
    if (![cell isKindOfClass:[DemoCell class]]) return;
    
    if (cell.isAnimating) return;
    
    NSTimeInterval duration = 0.f;
    
    CGFloat cellHeight = self.cellHeights[indexPath.row].floatValue;
    
    if (cellHeight == kCloseCellHeight) {
        self.cellHeights[indexPath.row] = @(kOpenCellHeight);
        [cell selectedAnimationByIsSelected:YES animated:YES completion:nil];
        duration = 1.f;
    }else
    {
        self.cellHeights[indexPath.row] = @(kCloseCellHeight);
        [cell selectedAnimationByIsSelected:NO animated:YES completion:nil];
        duration = 1.f;
    }
    
    [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        [tableView beginUpdates];
        [tableView endUpdates];
    } completion:nil];
    
}

   

大功告成

  现在就可以运行项目,欣赏流畅的Cell折叠效果了

ccfoldcell's Issues

能否提供一种纯代码不用xib的方式，感觉xib好难用

你试试xcode9 使用你这个 诡异的很

table View 顯示問題

選取 cell 動畫 會有閃動(閃爍)的問題
不會像原本這麼平滑？
在 ios 9 上

截屏模糊变清晰处理

方法一：

- (UIImage *)takeSnapshotWithFrame:(CGRect)frame
{
    
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [UIScreen mainScreen].scale);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    UIGraphicsBeginImageContextWithOptions(frame.size, NO, 0);
    [img drawInRect:CGRectMake(0, -frame.origin.y, img.size.width, img.size.height)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return  image;
}

方法二：

- (UIImage *)takeSnapshotWithFrame:(CGRect)frame
{
    
    UIGraphicsBeginImageContextWithOptions(frame.size, NO, [UIScreen mainScreen].scale);
    
    [self drawViewHierarchyInRect:CGRectMake(0, -frame.origin.y, self.bounds.size.width, self.bounds.size.height) afterScreenUpdates:YES];
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();

    return  image;
}

方法二是贴出来讨论的，在效果上面欠缺。 @bref-Chan

你们公司应用这个cell的项目上架了吗？

想看看应用到实际项目中的效果，请问你们公司的App叫什么名字？

翻滚的时候表视图跳动

将表视图拉到底，然后点击单元格执行动画。
表视图会被往上闪屏，然后执行cell动画。