insetGrouped样式UITableViewCell设置clipsToBounds=false无效问题

我想实现一款采用UITableView.Style.insetGrouped样式的表格，分为三个分组。针对第二组的单元格，我尝试通过重写cell的setFrame:方法缩进右侧边缘，在cell边界外添加按钮，同时把cell和contentView的clipsToBounds设为false，还重写了point(inside:with:)方法确保按钮可点击。但不管怎么弄，cell的clipsToBounds总会被恢复成true，按钮根本显示不出来。哪怕子类化UITableViewCell并重写clipsToBounds让它始终返回false，按钮还是看不见。但把表格样式改成plain或grouped时，按钮就能正常显示且可点击。

我知道还有其他实现方案，比如把每个“分组”做成独立表格视图，或者给cell的backgroundView设置自定义圆角视图，但我想知道为什么这个方案在insetGrouped样式下无效？有没有可行的解决办法？

附上我的代码：

class InsetButtonTableViewCell: UITableViewCell {
    @IBOutlet var buttonStack: UIStackView!
    
    override var frame: CGRect {
        get { super.frame }
        set {
            guard let buttonStack = buttonStack else { super.frame = newValue; return }
            var insetFrame = newValue
            insetFrame.size.width -= buttonStack.frame.width
            super.frame = insetFrame
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        clipsToBounds = false
        contentView.clipsToBounds = false
    }
    
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        frame.union(buttonStack.frame).contains(point)
    }
}

问题原因分析 #

insetGrouped样式的UITableView内部会对cell做额外的布局和样式处理：它会给每个cell套一层系统容器视图，并且这个容器的clipsToBounds会被强制设为true。同时系统会在cell的布局周期（比如layoutSubviews、prepareForReuse阶段）重置cell的clipsToBounds属性，哪怕你重写属性返回false，也会被系统的后续操作覆盖。

另外，insetGrouped的cell布局逻辑和plain/grouped不同，它的圆角、内边距都是由系统统一管理的，你修改cell的frame会和系统的布局逻辑冲突，导致按钮这类子视图被容器视图裁剪掉。

可行解决办法 #

方案1：调整contentView内边距，按钮放在contentView内部 #

放弃修改cell的frame，给contentView设置右侧内边距，把按钮放在contentView的右侧内边距预留空间里，既不会触发系统裁剪，也能实现视觉上的“超出缩进”效果：

class InsetButtonTableViewCell: UITableViewCell {
    @IBOutlet var buttonStack: UIStackView!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 给contentView右侧留足够空间放按钮
        let buttonWidth = buttonStack.frame.width
        contentView.layoutMargins = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: buttonWidth + 16)
        clipsToBounds = false
        contentView.clipsToBounds = false
    }
    
    // 确保按钮区域能响应点击
    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        return super.point(inside: point, with: event) || buttonStack.frame.contains(convert(point, to: buttonStack))
    }
}

方案2：自定义cell的backgroundView，接管样式控制 #

既然系统的insetGrouped样式会干扰布局，我们可以完全接管cell的背景样式：

• 自定义一个带圆角的UIView作为cell的backgroundView，设置好圆角、背景色和内边距；
• 把按钮直接添加到cell的contentView上，调整位置到视觉上的“外侧”；
• 确保cell和contentView的clipsToBounds为false。

这种方式能避开系统对cell的强制裁剪，同时保留分组的视觉效果。

方案3：利用表格和cell的layoutMargins #

在tableView的初始化代码里设置全局布局边距：

// 假设buttonWidth是按钮的固定宽度
tableView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: buttonWidth + 16)

然后在cell里调整按钮的布局，让它位于contentView的trailing margin外侧，insetGrouped样式允许contentView的子视图超出margin范围，只要不超出tableView的边界就不会被裁剪。

内容的提问来源于stack exchange，提问作者rhmac25