Swift中UIButton的圆顶角

Dav*_*e G 30 rounded-corners uibutton ios swift

我知道我可以使用以下四个角来围绕:

 myBtn.layer.cornerRadius = 8
 myBtn.layer.masksToBounds = true
Run Code Online (Sandbox Code Playgroud)

由于我只想围绕第二轮,我做了一些研究,发现了这个:

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
    }
}
Run Code Online (Sandbox Code Playgroud)

这被称为:

view.roundCorners([.TopLeft , .TopRight], radius: 10)
Run Code Online (Sandbox Code Playgroud)

然而,这对于UIButton不起作用.当我将扩展名切换为类型UIButton并将其传递给按钮时,输出如下所示:

在此输入图像描述

问题是,我如何使其适应UIButton?

Kir*_*odi 46

添加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
    }
}
Run Code Online (Sandbox Code Playgroud)

在viewDidAppear/viewDidLayoutSubviews中调用:

btnCorner.roundedButton()
Run Code Online (Sandbox Code Playgroud)

按钮角OutPut:

在此输入图像描述

  • 当按钮在堆栈视图中时不起作用。在左下角和右下角进行圆角处理时,仅将左下角四舍五入。当使用未嵌入堆栈视图中的按钮时,它可以很好地工作 (2认同)

Nai*_*hta 35

Swift 4:适用于最新的iOS 11以上版本

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
    }
}
Run Code Online (Sandbox Code Playgroud)

早期的iOS(10,9等)版本(适用于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
}
Run Code Online (Sandbox Code Playgroud)


C. *_*tos 20

对于迅捷3 Kirit Modi的回答改为:

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
   }
}
Run Code Online (Sandbox Code Playgroud)

在扩展文件的开头,不要忘记添加:

import UIKit
Run Code Online (Sandbox Code Playgroud)

如果你想要一个UIView的扩展,可以选择圆角顶角或底角,你可以使用:

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
   }
}
Run Code Online (Sandbox Code Playgroud)

这被称为按钮:

myButton.roundedCorners(top: true)
Run Code Online (Sandbox Code Playgroud)


Sco*_*ott 8

对于swift 5和最大的灵活性

使用 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
    }
}
Run Code Online (Sandbox Code Playgroud)

调用 roundCorners 函数

myButton.roundCorners(corners: [.topLeft, .topRight])
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

或具有特定半径

myButton.roundCorners(corners: [.topLeft, .topRight], radius: 20)
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明


小智 7

iOS 11让圆角非常容易.下面的代码围绕左上角和右下角.

myView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]
Run Code Online (Sandbox Code Playgroud)


Hos*_*eeb 5

更新您的扩展程序是这样的:

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
}
}
Run Code Online (Sandbox Code Playgroud)

形状层(掩模)需要知道框架