iOS UIButton mit abgerundeten Ecken und Hintergrund Bug

Question

Ich fand ein seltsames Problem mit abgerundeten UIButton.

Dies ist mein Code-Block, um diese Schaltfläche zu erstellen.

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) 

Wie Sie sehen können, gibt es eine UIButton mit backgroundColor, Rahmen und Eckenradius. Es ist komplett abgerundet. Aber in der Ausgabe bekomme ich das nächste Aussehen:

Sie können sehen, dass 1px Grenze außerhalb der Schaltfläche, es ist seine backroundColor (schwarz). Scheint, dass seine innere Grenze (weiß) nicht von der edje des Knopfes anfängt.

Haben Sie eine Idee, wie Sie das beheben können?

Answer 1

Verwenden CAShapeLayer statt, es gibt auch eine verbesserte Leistung:

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) 

Denken Sie daran, nicht von roundedButton Backgroundcolor zu bedienen, nur fillColor von CAShapeLayer verwenden.

Answer 2

Dies passiert auch beim Hinzufügen von Rahmen zu Bildern. Ich konnte keinen Weg finden, es direkt zu lösen, aber stattdessen fügte ich hinter meinem Bild eine weiße UIView hinzu, um dasselbe Aussehen zu erreichen.

Fügen Sie in Ihrem Fall eine weiße UIView hinter der Schaltfläche mit größeren Breiten- und Höhenmaßen hinzu, um die gewünschte Rahmenbreite zu erreichen (in Ihrem Fall ist sie 6 [3x2] höher als die Schaltfläche und 6 breiter). Dann wenden Sie einfach den Grenzradius auf die UIView und die UIButton und voilà!

Answer 3

Ich denke, es ist ein Fehler mit CALayer.

Ich würde so etwas tun:

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)