iOS UIButton с закругленными углами и фоновой ошибкой

Question

Я нашел одну странную проблему с округлым UIButton.

Это мой блок кода для создания этой кнопки.

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)

Как вы можете видеть, есть кнопка UIB с backgroundColor, границей и угловым радиусом. Это полностью округлено. Но в результате я получаю следующий вид:

Вы можете видеть, что граница 1px вне кнопки, это ее backroundColor (черный). Кажется, что его внутренняя граница (белая) не начинается с края кнопки.

У вас есть идеи, как это исправить?

Answer 1

Вместо этого используйте CAShapeLayer, он также обеспечивает повышенную производительность:

    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)

Помните, что не следует использовать backgroundColor ofndedButton, просто используйте fillColor из CAShapeLayer.

Answer 2

Это также происходит при добавлении границ к изображениям. Я не мог найти способ решить это напрямую, но вместо этого я добавил белый UIView позади моего изображения, чтобы добиться того же внешнего вида.

В вашем случае добавьте белый UIView за кнопкой, с большими размерами ширины и высоты, чтобы получить желаемую ширину границы (в вашем случае она будет на 6 [3x2] больше, чем кнопка, и на 6 шире). Затем просто примените радиус границы как к UIView, так и к UIButton и вуаля!

Answer 3

Я думаю, что это ошибка с CALayer,

Я бы сделал что-то вроде этого:

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)