dequeueReusableCell 打破了cliptobounds [英] dequeueReusableCell breaks cliptobounds

问题描述

我有一个非常简单的 UIScrollView，其中包含一些内容(许多子视图).此滚动视图用于显示用户发布的一些帖子(图像 + 文本).其中一个视图实际上是作者的图像，它溢出了底部单元格边界.因此，它与后面的单元格重叠，并且使用 clipToBounds = false 我能够获得所需的结果.如果我向下滚动，一切都会很好.当我开始向上滚动时，之前覆盖的视图现在被剪掉了.

下载我的游乐场的完整版.

I've got a very simple UIScrollView with some content (many subviews). This scroll view is used to show some posts made by users (image + text). One of these views is actually the image of the author and it overflows bottom cell bounds. It is thus overlapped with the cell coming after, and using clipToBounds = false I'm able to obtain the desired result. Everything works great if I scroll down. When I start to scroll back up the view that previously was overlying now gets clipped.

Cell overlapping working fine Cell overlapping not working (when I scroll up)

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cellIdentifier = (indexPath.row % 2 == 0) ? "FeedCellLeft" : "FeedCellRight";
    let cell = feedScrollView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! FeedCell;
    self.setUpCell(cell, atIndexPath: indexPath);
    return cell
}

the setUpCell function simply perform some UI related tasks

let row = indexPath.row

    cell.postImage.downloadImageFrom(link: rows[row].image, contentMode: .scaleToFill)
    cell.postAuthorImage.downloadImageFrom(link: "https://pbs.twimg.com/profile_images/691867591154012160/oaq0n2zy.jpg", contentMode: .scaleToFill)
    cell.postAuthorImage.layer.cornerRadius = 22.0;
    cell.postAuthorImage.layer.borderColor = UIColor.white.cgColor
    cell.postAuthorImage.layer.borderWidth = 2.0;
    cell.postAuthorImage.layer.masksToBounds = true;

    cell.selectionStyle = .none

    cell.postData.layer.cornerRadius = 10.0;

    cell.contentView.superview?.clipsToBounds = false;
    cell.clipsToBounds = false;


    if (indexPath.row % 2 != 0) {
        cell.postData.transform = CGAffineTransform.init(rotationAngle: (4 * .pi) / 180);
    } else {
        cell.postData.transform = CGAffineTransform.init(rotationAngle: (-4 * .pi) / 180);
    }

It seems that the deque operation breaks the layout I've made (using autolayout). I've tried many solution like this

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.contentView.superview?.clipsToBounds = false;
    cell.clipsToBounds = false;
    cell.contentView.clipsToBounds = false;
}

But the results looks always the same. The height of every row is fixed.

解决方案

I think the issue is with the hierarchy of subviews. When you scroll down, you cells dequeued from top to bottom and added to UITableView in the same order and all looks fine. Because the previous cell is above the following in view hierarchy. But when you scroll up, cells are dequeued from bottom to top and it means that the cell on top is "behind" the previous cell. You can easily check it with Debugging View Hierarchies feature for Xcode.

You can try to bringSubviewToFront: for example:

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell,  forRowAt indexPath: IndexPath) {
    cell.superview.bringSubview(toFront cell)
}

---

Updated version

I have made small research in Playgrounds and found only one reasonable option to implement overlapping cells without huge performance issues. The solution is based on cell.layer.zPosition property and works fine (at least in my Playground). I updated the code inside willDisplay cell: with the following one:

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.layer.zPosition = (CGFloat)(tableView.numberOfRows(inSection: 0) - indexPath.row)
}

According to the documentation for .zPosition (Apple Developer Documentation):

The default value of this property is 0. Changing the value of this property changes the the front-to-back ordering of layers onscreen. Higher values place this layer visually closer to the viewer than layers with lower values. This can affect the visibility of layers whose frame rectangles overlap.

So I use current dataSource counter as minuend and indexPath.row of the current cell as subtrahend to calculate zPosition of the layer for each cell.

You can download full version of my playground here.

这篇关于dequeueReusableCell 打破了cliptobounds的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！