自定义SwiftyRecordButton无法渲染，请求排查代码问题

我来帮你分析下这个自定义按钮渲染失败的问题，几个关键的问题点和修复方法如下：

核心问题分析 #

1. 图层圆角未生效：你给circleBorder设置了cornerRadius，但没有开启masksToBounds = true，导致图层不会被裁剪成圆形，红色背景会以方形显示，直接盖住了蓝色边框。
2. 初始化时Frame未确定：在init方法中直接使用self.bounds，如果按钮是通过XIB/Storyboard加载的，此时控件的最终尺寸还没确定，图层的大小会和实际显示的按钮不匹配。
3. 未实际使用innerCircle：你声明了innerCircle变量，但没有完成初始化和添加到视图的操作，这部分代码完全没有发挥作用。
4. 背景色覆盖边框：circleBorder的backgroundColor设为红色，会填充整个图层区域，把蓝色边框的视觉效果完全掩盖了——Snapchat风格的按钮应该是外层蓝色边框+内部红色实心圆，而不是用图层背景色来实现内部圆。

修复后的完整代码 #

class SwiftyRecordButton: SwiftyCamButton {
    private var circleBorder: CALayer!
    private var innerCircle: UIView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        drawButton()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        drawButton()
    }
    
    // 重写layoutSubviews，确保按钮尺寸变化时图层同步更新
    override func layoutSubviews() {
        super.layoutSubviews()
        updateLayerFrames()
    }
    
    private func drawButton() {
        self.backgroundColor = .white
        
        // 初始化外层边框图层
        circleBorder = CALayer()
        circleBorder.backgroundColor = UIColor.clear.cgColor // 边框层不需要背景色
        circleBorder.borderWidth = 6.0
        circleBorder.borderColor = UIColor.blue.cgColor
        circleBorder.cornerRadius = self.bounds.size.width / 2
        circleBorder.masksToBounds = true // 开启圆角裁剪
        layer.insertSublayer(circleBorder, at: 0)
        
        // 初始化内部红色实心圆
        innerCircle = UIView()
        innerCircle.backgroundColor = .red
        innerCircle.layer.cornerRadius = (self.bounds.size.width - 12) / 2 // 减去两倍边框宽度，留出边框空间
        innerCircle.clipsToBounds = true
        innerCircle.translatesAutoresizingMaskIntoConstraints = false
        addSubview(innerCircle)
        
        // 添加自动布局约束，确保内部圆始终适配按钮尺寸
        NSLayoutConstraint.activate([
            innerCircle.centerXAnchor.constraint(equalTo: centerXAnchor),
            innerCircle.centerYAnchor.constraint(equalTo: centerYAnchor),
            innerCircle.widthAnchor.constraint(equalTo: widthAnchor, constant: -12),
            innerCircle.heightAnchor.constraint(equalTo: heightAnchor, constant: -12)
        ])
        
        // 初始同步图层尺寸
        updateLayerFrames()
    }
    
    private func updateLayerFrames() {
        circleBorder.bounds = self.bounds
        circleBorder.position = CGPoint(x: self.bounds.midX, y: self.bounds.midY)
        circleBorder.cornerRadius = self.bounds.size.width / 2
    }
}

关键修复说明 #

• 给circleBorder设置backgroundColor = .clear，并开启masksToBounds = true，让蓝色边框以圆形正常显示。
• 重写layoutSubviews()方法，当按钮的尺寸因自动布局或其他原因变化时，调用updateLayerFrames()同步图层的大小和圆角，避免初始化时尺寸不匹配的问题。
• 完善了innerCircle的实现，通过自动布局约束让它始终比按钮小一圈（对应6pt的边框宽度），确保边框可见，完美还原Snapchat的按钮样式。
• 开启innerCircle的clipsToBounds = true，让内部圆也被裁剪成圆形。

额外检查点 #

如果修复后还是有问题，可以排查：

• 确认SwiftyCamButton父类没有对按钮样式做额外的覆盖（比如设置了其他图层、背景色）。
• 确保按钮的宽高相等，否则圆角会变成椭圆，影响视觉效果。

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