如何在 UITableView 中插入和删除行时模拟折纸

Posted 2023-03-03

【中文标题】如何在 UITableView 中插入和删除行时模拟折纸

【英文标题】：How to simulate paper fold while inserting and deleting rows in a UITableView

【发布时间】：2014-06-13 18:37:51

【问题描述】：

所以我试图在添加和删除单元格的同时模拟折纸类型的折纸，就像 peek Calendar 应用程序：

通过继承 UITableView 并覆盖 insertRowsAtIndexPaths:withRowAnimation: 和 deleteRowsAtIndexPaths:withRowAnimation:，我已经非常接近这个功能了：

但是现在我似乎无法让动画看起来正确。下面是我当前的代码 - 我只是想帮助克服最后一个障碍（或者可能有一种完全不同的方法，例如将 tableview 添加到 tableviewcell）。

- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths
              withRowAnimation:(UITableViewRowAnimation)animation

    [super insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
    float duration = .30;
    int i = 0;
    for (NSIndexPath *indexPath in indexPaths) 
        __block UITableViewCell *cell = [super cellForRowAtIndexPath:indexPath];
        if (cell)  // If indexPath isn't visible we'll get nil here

            //even cells flip up while odd cells flip down
            if(i % 2 ==0)
                cell.layer.anchorPoint = CGPointMake(.5, 0);

                //start row off by rotating 90 degrees
                __block CATransform3D t = CATransform3DIdentity;
                t = CATransform3DTranslate(t, 0, -cell.bounds.size.height/2, 0);
                t = CATransform3DRotate(t, hn_radians(90), 1, 0, 0);
                t.m34 = -1.0/(cell.layer.bounds.size.height * 4.6666667);

                cell.layer.transform = t;


                //flip up
                [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^
                    t = CATransform3DIdentity;
                    t = CATransform3DTranslate(t, 0, -cell.bounds.size.height/2, 0);

                    cell.layer.transform = t;
                    NSLog(@"");
                 completion:^(BOOL finished) 
                    cell.layer.transform = CATransform3DIdentity;
                    cell.layer.anchorPoint = CGPointMake(.5, .5);
                ];



            
            else

                cell.contentView.layer.anchorPoint = CGPointMake(.5, 1);

                //start row off by rotating 90 degrees
                __block CATransform3D t = CATransform3DIdentity;
                t = CATransform3DTranslate(t, 0, -cell.contentView.bounds.size.height * 0.5f, 0);
                t = CATransform3DRotate(t, hn_radians(-90), 1, 0, 0);
                t.m34 = -1/500.f;

                cell.contentView.layer.transform = t;

                //flip down
                [UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^
                    t = CATransform3DIdentity;
                    t = CATransform3DTranslate(t, 0, cell.contentView.bounds.size.height * 0.5f, 0);
                    cell.contentView.layer.transform = t;
                 completion:^(BOOL finished) 
                    //reset anchor and transform
                    cell.contentView.layer.transform = CATransform3DIdentity;
                    cell.contentView.layer.anchorPoint = CGPointMake(.5, .5);
                ];

            
            i++;



        

    

【问题讨论】：

github.com/mpospese/MPFoldTransition

我已经检查了这个项目 - 没有做我想要的。它适用于从一个视图到另一个视图的单折叠过渡，但不适用于在 tableview 中添加/删除行，并且不支持多个折叠。

github.com/honcheng/PaperFold-for-ios 试试这个。

我想在 android 中使用这个，有什么建议/链接吗？

@MweyaMutsvene 最后，你的效果编码成功了吗？有了 Trycatchfinally 的答案？

【参考方案1】：

在UITableViewCell.h 文件中写下这个：

@property (nonatomic, assign) CGFloat  finishedHeight;
@property (nonatomic, strong) UIView *transformable1HalfView;
@property (nonatomic, strong) UIView *transformable2HalfView;

在UITableViewCell .m 文件中写下这个：

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) 
        // Initialization
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = -1/500.f;
        [self.contentView.layer setSublayerTransform:transform];

        self.transformable1HalfView = [[UIView alloc] initWithFrame:self.contentView.bounds];
        [self.transformable1HalfView.layer setAnchorPoint:CGPointMake(0.5, 0.0)];
        [self.transformable1HalfView setClipsToBounds:YES];
        [self.contentView addSubview:self.transformable1HalfView];

        self.transformable2HalfView = [[UIView alloc] initWithFrame:self.contentView.bounds];
        [self.transformable2HalfView.layer setAnchorPoint:CGPointMake(0.5, 1.0)];
        [self.transformable2HalfView setClipsToBounds:YES];
        [self.contentView addSubview:self.transformable2HalfView];
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        self.textLabel.autoresizingMask = UIViewAutoresizingNone;
        self.textLabel.backgroundColor = [UIColor clearColor];
        self.detailTextLabel.autoresizingMask = UIViewAutoresizingNone;
        self.detailTextLabel.backgroundColor = [UIColor clearColor];

    
    return self;

- (void)layoutSubviews

    [super layoutSubviews];

    CGFloat fraction = (self.frame.size.height / self.finishedHeight);
    fraction = MAX(MIN(1, fraction), 0);

    CGFloat angle = (M_PI / 2) - asinf(fraction);
    CATransform3D transform = CATransform3DMakeRotation(angle, -1, 0, 0);
    [self.transformable1HalfView.layer setTransform:transform];
    [self.transformable2HalfView.layer setTransform:CATransform3DMakeRotation(angle, 1, 0, 0)];


    CGSize contentViewSize = self.contentView.frame.size;
    CGFloat contentViewMidY = contentViewSize.height / 2;
    CGFloat labelHeight = self.finishedHeight / 2;

    // OPTIONAL: Always accomodate 1 px to the top label to ensure two labels 
    // won't display one px gap in between sometimes for certain angles 
    self.transformable1HalfView.frame = CGRectMake(0, contentViewMidY - (labelHeight * fraction),
                                                   contentViewSize.width, labelHeight + 1);
    self.transformable2HalfView.frame = CGRectMake(0, contentViewMidY - (labelHeight * (1 - fraction)),
                                                    contentViewSize.width, labelHeight);

    if ([self.textLabel.text length]) 
        self.detailTextLabel.text = self.textLabel.text;
        self.detailTextLabel.font = self.textLabel.font;
        self.detailTextLabel.textColor = self.textLabel.textColor;
        self.detailTextLabel.textAlignment = self.textLabel.textAlignment;
        self.detailTextLabel.textColor = [UIColor whiteColor];
        self.detailTextLabel.shadowColor = self.textLabel.shadowColor;
        self.detailTextLabel.shadowOffset = self.textLabel.shadowOffset;
    
    self.textLabel.frame = CGRectMake(10.0, 0.0, contentViewSize.width - 20.0, self.finishedHeight);
    self.detailTextLabel.frame = CGRectMake(10.0, -self.finishedHeight / 2, contentViewSize.width - 20.0, self.finishedHeight);

参考：https://github.com/jamztang/JTGestureBasedTableViewDemo

干杯。