Скругленный градиент на границе UIButton - PullRequest
Новая
       33

Скругленный градиент на границе UIButton

0 голосов
/ 28 мая 2018

Здравствуйте. Я пытался реализовать UIButton в моем приложении, которое имеет закругленные углы и границу, которая является градиентом.Я использовал следующий код для создания границы градиента на моей кнопке: 

    let gradient = CAGradientLayer()
    gradient.frame =  CGRect(origin: CGPoint.zero, size: self.myBtn.frame.size)
    gradient.colors = [colourOne.cgColor, colourTwo.cgColor]

    let shape = CAShapeLayer()
    shape.lineWidth = 6
    shape.path = UIBezierPath(roundedRect: self.myBtn.bounds, cornerRadius: 22).cgPath
    shape.strokeColor = UIColor.black.cgColor
    shape.fillColor = UIColor.clear.cgColor
    gradient.mask = shape

    self.myBtn.layer.addSublayer(gradient)

Этот код хорошо работает для создания границы, но, как видно из рисунка, углы не закруглены должным образом.Другие методы, которые я попробовал, сделали закругленные углы вообще невидимыми.

my button with the above code

Кроме того, мне нужна кнопка для прозрачной заливки, поэтому я не могу просто сделать градиентную заливку.

Если кто-либоможет пролить некоторый свет на это для меня, я был бы очень признателен.

1 Ответ

0 голосов
/ 28 мая 2018

Вам необходимо установить радиус угла перед созданием UIBezierPath с UIButton bounds и cornerRadius.

Попробуйте ниже: 

self.myBtn.layer.cornerRadius = self.myBtn.frame.height/2
self.myBtn.clipsToBounds = true

let gradient = CAGradientLayer()
gradient.frame =  CGRect(origin: CGPoint.zero, size: self.myBtn.frame.size)
gradient.colors =  [UIColor.blue.cgColor, UIColor.green.cgColor]

let shape = CAShapeLayer()
shape.lineWidth = 6

shape.path = UIBezierPath(roundedRect: self.myBtn.bounds, cornerRadius: self.myBtn.layer.cornerRadius).cgPath

shape.strokeColor = UIColor.black.cgColor
shape.fillColor = UIColor.clear.cgColor
gradient.mask = shape

self.myBtn.layer.addSublayer(gradient)

Вывод: -

enter image description here

...