如何翻转iOS UITableViewCell？

Question

我有一个包含许多单元格的tableview。每个单元格都有一点信息＆＃34; i＆＃34;按钮，我希望用户能够点击以编辑该单元格中的信息，通过＆＃34;翻转＆＃34;右边的细胞。

我为两个可能的单元格状态中的每一个都有一个单独的表格单元格XIB，并且cellForRowAtIndexPath提供正确的XIB（具有不同的单元格标识符），具体取决于该单元格是应该在常规视图中还是在详细信息/编辑中视图。这可以很好地使用例如reloadRowsAtIndexPaths来反映当＆＃34; i＆＃34;按下按钮。

但我无法弄清楚如何在单元格＆＃34; i＆＃34;按下按钮。翻转不是＆＃34; withRowAnimation＆＃34;的选项之一。在reloadRowsAtIndexPaths中。使用像UIView animateWithDuration这样的标准动画方法并不起作用：reloadRowsAtIndexPaths只会导致相关单元格立即重新加载，忽略动画指令。我甚至尝试使用drawViewHierarchyInRect来获取单元格的未来状态作为图像，但是我无法让单元格快速地重绘自己以便被drawViewHierarchyInRect拾取（我不会这样做）希望用户在动画之前实际看到动画的结果。

有没有人知道如何处理这个问题？

修改

总而言之，我遇到的挑战是：除了reloadRowsAtIndexPaths（打破动画）之外，还有另一种方法可以将UITableView单元格内容与不同的UITableViewCell Xib交换，而不会给新Xib的IBOutlets带来麻烦吗？ （将它作为Nib加载到子视图中似乎打破了IBOutlets。）到目前为止，答案还没有解决这个问题。

Answer 1

如果您使用两个子类UITableViewCell，而不是使用单个子类UITableViewCell，并执行翻转动画，那将会很复杂，

让xib在其contentView中添加子类UITableViewCell添加两个视图

1. 普通视图
2. 翻转视图

在这个视图中添加你想要显示的内容，并确保在单元格中都有hav outlet 例如，我拿了



在上面的两个视图中，第一个View-FlipView及其内容标签和按钮，第二个也与第一个视图相同，顶视图应为normalView
将按钮操作连接到单元格，您只需在自定义单元格中执行如下操作

  //flip the view to flipView
- (IBAction)flipButtonAction:(UIButton *)sender
  {

    [UIView transitionWithView:self.contentView duration:0.6 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{
    [self.contentView insertSubview:_flipView aboveSubview:_normalView];
    } completion:^(BOOL finished) {

    }];
   }

   //flip the view back to normalView
 - (IBAction)flipBackButtonAction:(id)sender
  {

     [UIView transitionWithView:self.contentView duration:0.6 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
      [self.contentView insertSubview:_normalView aboveSubview:_flipView];
    } completion:^(BOOL finished) {

   }];
  }  

它看起来像下面的东西



任何问题只是评论...... :)希望这有助于你.. :)

Answer 2

您可能不希望重新加载表的数据以翻转任何给定的单元格。你的细胞应该能够“自己”翻转。所以你需要子类UITableViewCell并且你的子类中你会有类似flip函数的东西，它会对单元格的子视图进行一些动画制作。

现在这是一个翻转动画的技巧。您不仅可以同时更改视图层次结构并进行翻转，还可以在动画期间的错误时间看到视图的“背面”。连续使用两个动画：

[UIView animateWithDuration:... {
    // Flip the content "half way" by rotating 90 degrees about the y axis.
    // At the end of this animation your view will be perpendicular to the
    // screen and *not visible*.
    contentView.layer.transform = CATransform3DMakeRotation(M_PI_2, 0, 1, 0);
} completion: {
    // Here you can rearrange your views (remember the view isn't visible
    // right now!
    //
    // When the "back side" views are all ready, you can kick off the second
    // half of the flip animation.
    [UIView animateWithDuration:... {
        // Flip *back* to the identity (not all the way around to M_PI)
        // because if you flip all the way around your views will actually
        // be flipped.  You don't want that.  Users will instinctively see
        // the movement as *continuous* and interpret the flip back and forth
        // animation as one continuous rotation all the way around.
        contentView.layer.transform = CATransform3DIdentity;
    }
}

Answer 3

斯威夫特4：

@IBAction func flipButtonAction(_ sender: UIButton) {

    UIView.transition(with: contentView, duration: 0.6, options: .transitionFlipFromRight, animations: {() -> Void in
        self.contentView.insertSubview(flipView, aboveSubview: normalView)
    }, completion: {(_ finished: Bool) -> Void in
    })
}

//flip the view back to normalView

@IBAction func flipBackButtonAction(_ sender: Any) {

    UIView.transition(with: contentView, duration: 0.6, options: .transitionFlipFromLeft, animations: {() -> Void in
        self.contentView.insertSubview(normalView, aboveSubview: flipView)
    }, completion: {(_ finished: Bool) -> Void in
    })
}

Answer 4

我看不出为什么你不能使用[UIView animateWithDuration ...]。

你可以在每个单元格中有两个UIViews来扩展你的动画效果。第一个是可见的，第二个是隐藏的

在动画的中间点，只需隐藏第一个UIView并取消隐藏第二个UIView并从那里继续动画。