Uśpiony iOS z zaokrąglonymi narożnikami i pluskiem w tle

Question

Znalazłem jeden dziwny problem z zaokrąglonym UIButtonem.

To jest mój blok kodu, aby utworzyć ten przycisk.

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) 

Jak widać, istnieje UIButton z backgroundColor, border i promieniem rogu. Jest w pełni zaokrąglona. Ale na wyjściu dostaję następny wygląd:

Możesz zobaczyć, że granica 1 piksela poza przyciskiem, jest backroundColor (czarny). Wydaje się, że jego wewnętrzna krawędź (biała) nie zaczyna się od przycisku edje przycisku.

Czy masz pojęcie, jak to naprawić?

Answer 1

Zastosowanie CAShapeLayer zamiast, ale również daje zwiększoną wydajność:

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) 

pamiętać, aby nie używać backgroundColor z roundedButton, wystarczy użyć fillColor z CAShapeLayer.

Answer 2

Dzieje się tak również podczas dodawania obramowań do obrazów. Nie mogłem znaleźć sposobu na rozwiązanie go bezpośrednio, ale zamiast tego dodałem biały UIView za moim obrazem, aby uzyskać ten sam wygląd.

W twoim przypadku dodaj biały UIView za przyciskiem, z większymi wymiarami szerokości i wysokości, aby uzyskać pożądaną szerokość ramki (w twoim przypadku będzie to 6 [3x2] wyżej niż przycisk i 6 szerszy). Następnie zastosuj promień obramowania do UIView i UIButton i voilà!

Answer 3

Myślę, że to błąd z CALayer.

chciałbym zrobić coś takiego:

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)