ios - Esquinas redondeadas de un botón UIB en Swift

uibutton rounded-corners

Question

Sé que puedo redondear las cuatro esquinas usando:

 myBtn.layer.cornerRadius = 8
 myBtn.layer.masksToBounds = true

Como solo quiero la segunda ronda, investigué un poco y encontré this :

extension UIView {
    func roundCorners(corners:UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.CGPath
        self.layer.mask = mask
    }
}

Que se llama así:

view.roundCorners([.TopLeft , .TopRight], radius: 10)

Sin embargo, esto no funciona para un UIButton. Cuando cambio la extensión para que sea del tipo UIButton y le pase un botón, la salida se ve así:

La pregunta es, ¿cómo puedo adaptar esto para trabajar en un UIButton?

Answer 1

Actualice su extensión para que sea así:

extension UIView {
func roundCorners(corners:UIRectCorner, radius: CGFloat) {
    let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let mask = CAShapeLayer()
    let rect = self.bounds
    mask.frame = rect
    mask.path = path.cgPath
    self.layer.mask = mask
}
}

La capa de forma (máscara) necesita conocer el marco

Answer 2

Olvidó configurar el marco de su capa de forma:

mask.frame = layer.bounds

Answer 3

Para Swift 3, la respuesta de Kirit Modi se cambia a:

extension UIButton {
   func roundedButton(){
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: [.topLeft , .topRight],
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

Al comienzo del archivo de extensión, no olvide agregar:

import UIKit

Si desea una extensión para un UIView con la opción de redondear las esquinas superiores o inferiores, puede usar:

extension UIView {
   func roundedCorners(top: Bool){
       let corners:UIRectCorner = (top ? [.topLeft , .topRight] : [.bottomRight , .bottomLeft])        
       let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                    byRoundingCorners: corners,
                                    cornerRadii:CGSize(width:8.0, height:8.0))
       let maskLayer1 = CAShapeLayer()
       maskLayer1.frame = self.bounds
       maskLayer1.path = maskPAth1.cgPath
       self.layer.mask = maskLayer1
   }
}

Que se llama para un botón como:

myButton.roundedCorners(top: true)

Answer 4

Para Swift 5 y la mayor flexibilidad

Definir una extensión con una función roundCorners

extension UIButton {
    func roundCorners(corners: UIRectCorner, radius: Int = 8) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: corners,
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

Llama a la función roundCorners

myButton.roundCorners(corners: [.topLeft, .topRight])

O con un radio específico

myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)

Answer 5

Use este código,

let path = UIBezierPath(roundedRect:viewTo.bounds, byRoundingCorners:[.TopRight, .TopLeft], cornerRadii: CGSizeMake(20, 20))
let maskLayer = CAShapeLayer()
maskLayer.path = path.CGPath
viewTo.layer.mask = maskLayer

espero que sea útil

Answer 6

el redondeo se aplica a la esquina de la vista / Botón .., pero al llegar al borde del botón, no se aplica correctamente. ¿Puedo tener alguna solución para eso? @ @

Aquí está el código que he usado, que funciona (borde) en iOS11.0 y superior y no en las versiones siguientes (<11.0)

if #available(iOS 11.0, *) {
        self.layer.cornerRadius = radius
        self.layer.maskedCorners = maskedCorners
    } else {
        let shapeLayer = CAShapeLayer()
        shapeLayer.position = self.center
        self.layer.masksToBounds = true
        self.clipsToBounds = true
        let bezirePath = UIBezierPath(roundedRect: self.bounds,
                                      byRoundingCorners: corners,
                                      cornerRadii: CGSize(width: radius, height: radius))
        shapeLayer.bounds = frame
        shapeLayer.path = bezirePath.cgPath

        self.layer.mask = shapeLayer

Answer 7

iOS 11 ha hecho que sea realmente fácil redondear esquinas. El siguiente código redondea las esquinas superior izquierda e inferior derecha.

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

Answer 8

Agregar extensión de UIButton:

extension UIButton{
    func roundedButton(){
        let maskPath1 = UIBezierPath(roundedRect: bounds,
            byRoundingCorners: [.topLeft , .topRight],
            cornerRadii: CGSize(width: 8, height: 8))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }
}

Llamando a viewDidAppear / viewDidLayoutSubviews:

btnCorner.roundedButton()

Botón de esquina de salida

Answer 9

Swift 4: para el último iOS 11 en adelante

override func viewDidLoad() {
    super.viewDidLoad()

    if #available(iOS 11.0, *) {
        self.viewToRound.clipsToBounds = true
        viewToRound.layer.cornerRadius = 20
        viewToRound.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    } else {
        // Fallback on earlier versions
    }
}

Versiones anteriores de iOS (10,9, etc.) (también funciona para iOS 11)

override func viewDidLayoutSubviews() {
    self.viewToRound.clipsToBounds = true
    let path = UIBezierPath(roundedRect: viewToRound.bounds,
                            byRoundingCorners: [.topRight, .topLeft],
                            cornerRadii: CGSize(width: 20, height: 20))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    viewToRound.layer.mask = maskLayer
}