UITableViewCell Z-Order

Question

我有一个包含单元格的 uitableview。我试图弄清楚如何调整单元格的 z 顺序。我正在努力做到这一点：

但是当我加载 tableview 时，我得到了这个：

我已经尝试过[tableView sendSubViewToBack:cell]。此外，当我滚动到底部然后返回顶部时，结果如图 1 所示，但当我向下滚动时，结果如图 2 所示。感谢您的帮助。

    static NSString *CellIdentifier = @"Cell";
NSString *row = [NSString stringWithFormat:@"%li",(long)indexPath.row];
GetMoreTableViewCell *cell = [_chapters dequeueReusableCellWithIdentifier:CellIdentifier];
NSMutableDictionary *deckCategory = [[_data valueForKey:key] valueForKey:row];

if (cell == nil) {
    cell = [[GetMoreTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}


[tableView bringSubviewToFront:cell];

if([[[_data valueForKey:key] valueForKey:[NSString stringWithFormat:@"%i",indexPath.row]] valueForKey:@"isDefault"] == [NSNumber numberWithBool:YES]) {
    cell.addButton.hidden = YES;
}
cell.ttitle.text = [[[_data valueForKey:key] valueForKey:row] valueForKey:@"Name"];
cell.backgroundColor = [UIColor clearColor];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
CALayer * l = [cell.cellImage layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];

CALayer * b = [cell.cellBackground layer];
[b setMasksToBounds:YES];
[b setCornerRadius:19.0];
cell.cellImage.image = [UIImage imageNamed:[deckCategory valueForKey:@"Image"]];

if(indexPath.row == 0) {
    cell.cellBackground.image = [UIImage imageNamed:@"card_green.png"];
}
else if(indexPath.row == 1) {
    cell.cellBackground.image = [UIImage imageNamed:@"card_orange.png"];
}
else if(indexPath.row == 2) {
    cell.cellBackground.image = [UIImage imageNamed:@"card_red.png"];
}

return cell;

Answer 1

在我的 UITableViewCells 上使用阴影时，我遇到了同样的问题，屏幕下方（Y 方向）的单元格的阴影与屏幕顶部较高的单元格重叠。

我的解决方案是根据 indexPath 在 UITableViewCell 图层上设置 Z Position。

cell.layer.zPosition = CGFloat(indexPath.row)

我的问题只发生在个别部分。如果后续部分的单元格也遇到此问题，则需要将部分编号添加到计算中。

cell.layer.zPosition = CGFloat(indexPath.section) * 1000.0 +  CGFloat(indexPath.row)

如果每个部分的行数超过 1000 行，则增加幻数，或者想想为什么您的应用中有 1000 行；-)

Answer 2

前段时间我也遇到过同样的问题。

对我有用的解决方案是使用 Collection 视图而不是 TableView。通过从 UICollectionViewFlowLayout 扩展它来创建一个自定义类，并在你的 Collection View 中使用它。

class OverlappedCustomFlowLayout: UICollectionViewFlowLayout {
    override func prepare() {
        super.prepare()

        // This allows us to make intersection and overlapping
        // A negative number implies overlapping whereas positive implies space between the adjacent edges of two cells.
        minimumLineSpacing = -100
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let layoutAttributes = super.layoutAttributesForElements(in: rect)
        for currentLayoutAttributes: UICollectionViewLayoutAttributes in layoutAttributes! {

            // zIndex - Specifies the item’s position on the z-axis. 
            // Unlike a layer's zPosition, changing zIndex allows us to change not only layer position, 
            // but tapping/UI interaction logic too as it moves the whole item.
            currentLayoutAttributes.zIndex = currentLayoutAttributes.indexPath.row + 1
        }
    }

    return layoutAttributes
}

附： - 根据 Apple 的开发者文档zIndex

此属性用于确定项目的从前到后的顺序 在布局期间。具有较高索引值的项目出现在项目的顶部 具有较低的值。具有相同值的项目具有未确定 命令。该属性的默认值为 0。

希望对您有所帮助！ :)

Answer 3

它应该通过像这样改变单元层的 zPosition 来工作：tableView:cellForRowAtIndexPath: dataSource 方法中的cell.layer.zPosition = CGFloat(indexPath.row)。并且不要忘记将单元格的 clipsToBound 属性设置为 false。

Answer 4

不幸的是，您无法控制调用 cellForRow... 的顺序，因此将单元格发送到后面或前面不会这样做。

您可能需要创建一个方法，通过表格的可见单元格并根据索引路径对它们重新排序，但是您会弄乱您无法控制的视图。表格视图可以随时重新排列或添加子视图，您将尝试捕捉所有这些事件。

我会用 collection view 而不是 table view 来实现这样的视图，这将允许您使用自定义布局为每个 indexPath 指定 z 位置，并允许您重叠不同数量的细胞。创建自定义布局非常简单，尤其是对于表格类型的布局。

Answer 5

如果您想要降序的zPositions（以便第一个单元格在顶部），请使用基于the answer from Brett 的以下代码。使用这种方法，无需手动重新计算zPosition 值。

func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    DispatchQueue.main.async {
        for index in 0 ..< tableView.visibleCells.count {
            let zPosition = CGFloat(tableView.visibleCells.count - index)
            tableView.visibleCells[index].layer.zPosition = zPosition
        }
    }
}