使用 cornerRadius 时，iOS UIView 背景颜色错误

Question

我为UIView申请了cornerRadius，并申请了边框颜色。 但是，我可以在角落看到错误的颜色。 下图是模拟器的放大图像。

下图是调试视图层次结构。

如何解决这个问题？

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .black
        
        let test = UIView()
        test.backgroundColor = .white
        test.layer.cornerRadius = 7
        test.layer.borderColor = UIColor.black.cgColor
        test.layer.borderWidth = 2
        
        view.addSubview(test)
        
        test.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            test.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
            test.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
            test.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15),
            test.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
}

Answer 1

好的 - 你看到的是边界抗锯齿的“人工制品”......因为边界是画在里面的观点。

自从（我相信）第一版 iOS 以来就是这样。

当使用圆角半径使视图变圆时，伪影更加明显：

并放大到 200%：

避免这种情况的方法是使用带有圆角UIBezierPath 的CAShapeLayer。

这是一个快速示例视图子类，其公共属性类似于您已经在 .layer 上使用的属性：

class ExampleView: UIView {
    public var fillColor: CGColor = UIColor.clear.cgColor {
        didSet {
            shapeLayer.fillColor = fillColor
        }
    }
    public var strokeColor: CGColor = UIColor.clear.cgColor {
        didSet {
            shapeLayer.strokeColor = strokeColor
        }
    }
    public var lineWidth: CGFloat = 0 {
        didSet {
            shapeLayer.lineWidth = lineWidth
        }
    }
    public var cornerRadius: CGFloat = 0 {
        didSet {
            shapeLayer.cornerRadius = cornerRadius
        }
    }
    private var shapeLayer: CAShapeLayer!
    override class var layerClass: AnyClass {
        return CAShapeLayer.self
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() -> Void {
        shapeLayer = self.layer as? CAShapeLayer
        shapeLayer.fillColor = fillColor
        shapeLayer.strokeColor = strokeColor
        shapeLayer.lineWidth = lineWidth
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        let pth = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
        shapeLayer.path = pth.cgPath
    }

}

这给了我们：

并再次放大到 200%：

这是一个显示差异的示例视图控制器：

class ExampleViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .black
        
        let test = UIView()
        test.backgroundColor = .white
        test.layer.cornerRadius = 7
        test.layer.borderColor = UIColor.black.cgColor
        test.layer.borderWidth = 2
        
        
        let circleTest = UIView()
        circleTest.backgroundColor = .white
        circleTest.layer.cornerRadius = 20
        circleTest.layer.borderColor = UIColor.black.cgColor
        circleTest.layer.borderWidth = 2

        
        let myTest = ExampleView()
        myTest.backgroundColor = .white
        myTest.cornerRadius = 7
        myTest.strokeColor = UIColor.black.cgColor
        myTest.lineWidth = 2
        

        let myCircleTest = ExampleView()
        myCircleTest.backgroundColor = .white
        myCircleTest.cornerRadius = 20
        myCircleTest.strokeColor = UIColor.black.cgColor
        myCircleTest.lineWidth = 2
        

        view.addSubview(test)
        view.addSubview(circleTest)
        view.addSubview(myTest)
        view.addSubview(myCircleTest)

        test.translatesAutoresizingMaskIntoConstraints = false
        circleTest.translatesAutoresizingMaskIntoConstraints = false
        myTest.translatesAutoresizingMaskIntoConstraints = false
        myCircleTest.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            test.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
            test.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
            test.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -170),
            test.heightAnchor.constraint(equalToConstant: 40),

            circleTest.topAnchor.constraint(equalTo: test.bottomAnchor, constant: 8),
            circleTest.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            circleTest.heightAnchor.constraint(equalToConstant: 40),
            circleTest.widthAnchor.constraint(equalTo: circleTest.heightAnchor),

            myTest.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
            myTest.topAnchor.constraint(equalTo: circleTest.bottomAnchor, constant: 8),
            myTest.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -170),
            myTest.heightAnchor.constraint(equalToConstant: 40),

            myCircleTest.topAnchor.constraint(equalTo: myTest.bottomAnchor, constant: 8),
            myCircleTest.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myCircleTest.heightAnchor.constraint(equalToConstant: 40),
            myCircleTest.widthAnchor.constraint(equalTo: myCircleTest.heightAnchor),
            
        ])
    }

}

Answer 2

我希望我对您的评论是正确的，边框颜色不正确，因为您仍然在视图的外边缘看到背景颜色为白色的边缘。

如果是这种情况，您可以通过将视图设置为 clipsToBounds 为真来轻松摆脱它。您的代码看起来只是略有不同。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .black
        
        let test = UIView()
        test.backgroundColor = .white
        test.clipsToBounds = true
        test.layer.cornerRadius = 7
        test.layer.borderColor = UIColor.black.cgColor
        test.layer.borderWidth = 2
        
        view.addSubview(test)
        
        test.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            test.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
            test.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
            test.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15),
            test.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
}

这应该可以解决您的边缘问题。