ios Swift 中 UIButton 的圆角

Round Top Corners of a UIButton in Swift

提问by Dave G

I know I can round all four corners using:

我知道我可以使用以下方法绕过所有四个角：

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

Since I only want to round two, I did some research and found 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
    }
}

Which is called like this:

这是这样调用的：

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

Yet this doesn't work for a UIButton. When I switch the extension to be for type UIButton and pass it a button , the output looks like this:

然而这不适用于 UIButton。当我将扩展名切换为 UIButton 类型并将其传递给 button 时，输出如下所示：

The question is, how do I adapt this to work on a UIButton?

问题是，我如何调整它以在 UIButton 上工作？

回答by Kirit Modi

Adding Extension of UIButton:

添加 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
    }
}

Calling in viewDidAppear/viewDidLayoutSubviews:

在 viewDidAppear/viewDidLayoutSubviews 中调用：

btnCorner.roundedButton()

Button Corner OutPut:

按钮角输出：

回答by Naishta

Swift 4: For latest iOS 11 onwards

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
    }
}

Earlier iOS (10,9 etc) Versions (works for iOS 11 too)

较早的 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
}

回答by C. Kontos

For swift 3Kirit Modi's answer is changed to:

对于swift 3Kirit 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
   }
}

At the start of the extension's file don't forget to add:

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

import UIKit

If you want an extension for a UIViewwith the option of rounding top or bottom corners you can use:

如果你想要一个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
   }
}

Which is called for a button as:

按钮调用如下：

myButton.roundedCorners(top: true)

回答by dsunku

iOS 11 has made it really easy to round corners. The code below rounds the top left and bottom right corners.

iOS 11 让圆角变得非常容易。下面的代码将左上角和右下角四舍五入。

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

回答by Scott

For swift 5and the most flexibility

对于swift 5和最大的灵活性

Define an extension with a roundCorners function

使用 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
    }
}

Call the roundCorners function

调用 roundCorners 函数

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

Or with a specific radius

或具有特定半径

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

回答by Hossam Ghareeb

Update you extension to be like 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()
    let rect = self.bounds
    mask.frame = rect
    mask.path = path.cgPath
    self.layer.mask = mask
}
}

The shape layer (mask) needs to know the frame

形状层（蒙版）需要知道框架

回答by Iyyappan Ravi

Use this Code,

使用此代码，

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

hope its helpful

希望它有帮助

回答by return true

You forgot to set the frame of your shape layer:

您忘记设置形状图层的框架：

mask.frame = layer.bounds

回答by sharath kumar

rounding is applied to corner's of view/Button .. , but coming to border of button , it is not applying correctly. can I have any solution for that? @

舍入应用于视图/按钮的角落..，但来到按钮的边框，它没有正确应用。我有什么解决办法吗？@

Here is the code that I have used , which is working (border) in iOS11.0 and above and not in below versions(<11.0)

这是我使用的代码，它在 iOS11.0 及更高版本中工作（边框），而不是在以下版本（<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