iOS UIButton với các góc tròn và lỗi nền

Question

Tôi đã tìm thấy một vấn đề lạ với UIButton được làm tròn.

Đây là khối mã của tôi để tạo nút này.

let roundedButton = UIButton(type: .System) 
roundedButton.frame = CGRectMake(100, 100, 100, 100) 
roundedButton.backgroundColor = UIColor.blackColor() 
roundedButton.layer.borderColor = UIColor.whiteColor().CGColor 
roundedButton.layer.borderWidth = 3.0 
roundedButton.layer.cornerRadius = roundedButton.frame.size.width/2 
roundedButton.layer.masksToBounds = true 
self.view.addSubview(roundedButton) 

Như bạn thấy, có bán kính UIButton với backgroundColor, đường viền và góc. Nó tròn hoàn toàn. Nhưng ở đầu ra, tôi xuất hiện tiếp theo:

Bạn có thể thấy đường viền 1px bên ngoài nút, đó là backroundColor (màu đen). Dường như đường viền bên trong của nó (màu trắng) không bắt đầu từ nút của nút.

Bạn có biết cách sửa lỗi này không?

Answer 1

Sử dụng CAShapeLayer thay vào đó, nó cũng cung cấp cho nâng cao hiệu suất:

let roundedButton = UIButton(type: .Custom) 
    roundedButton.frame = CGRectMake(100, 100, 100, 100) 
    let _border = CAShapeLayer() 
    _border.path = UIBezierPath(roundedRect: roundedButton.bounds, cornerRadius:roundedButton.frame.size.width/2).CGPath 
    _border.frame = roundedButton.bounds 
    _border.strokeColor = UIColor.whiteColor().CGColor 
    _border.fillColor = UIColor.blackColor().CGColor 
    _border.lineWidth = 3.0 
    roundedButton.layer.addSublayer(_border) 

    self.view.addSubview(roundedButton) 

Ghi không sử dụng backgroundColor của roundedButton, chỉ cần sử dụng fillColor của CAShapeLayer.

Answer 2

Điều này cũng xảy ra khi thêm đường viền vào hình ảnh. Tôi không thể tìm ra cách để giải quyết nó trực tiếp nhưng thay vào đó tôi thêm một UIView màu trắng phía sau hình ảnh của tôi để đạt được cùng một cái nhìn.

Trong trường hợp của bạn, thêm UIView màu trắng phía sau nút, với kích thước chiều rộng và chiều cao lớn hơn để đạt được chiều rộng đường viền mong muốn (trong trường hợp của bạn sẽ cao hơn 6 [3x2] so với nút và 6 rộng hơn). Sau đó, chỉ cần áp dụng bán kính đường viền cho cả UIView và UIButton và voilà!

Answer 3

Tôi nghĩ rằng đó là lỗi với CALayer.

tôi sẽ làm một cái gì đó như thế này:

let borderWidth: CGFloat = 3.0 

let roundedButton = UIButton(type: .System) 
roundedButton.frame = CGRectMake(100, 100, 100, 100) 
roundedButton.layer.cornerRadius = roundedButton.frame.size.width/2 
roundedButton.layer.backgroundColor = UIColor.whiteColor().CGColor 
roundedButton.layer.masksToBounds = true 

let innerLayer = CALayer() 
innerLayer.frame = CGRect(
    x: borderWidth, 
    y: borderWidth, 
    width: roundedButton.frame.width - borderWidth * 2, 
    height: roundedButton.frame.height - borderWidth * 2 
) 
innerLayer.backgroundColor = UIColor.blackColor().CGColor 
innerLayer.cornerRadius = innerLayer.frame.size.width/2 
roundedButton.layer.addSublayer(innerLayer)