Swift 中带有 2 个边角半径的透明背景按钮

Question

我正在构建自己的 segmentedControl。它是一个空心（透明）的分段控件。所选段的 borderWidth 突出显示。每个段都是水平堆栈中的一个按钮。这就是我想要实现的目标：

我正在使用此扩展程序来舍入所选按钮

extension UIButton {
    func roundedButton(corners: UIRectCorner, radius: CGFloat){
        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
    }
}

输出如下：

是否只在左侧圆角而不使用遮罩？

Answer 1

您可以像下面那样编辑 roundCorners 函数；

extension UIButton {
    
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor, borderWidth: CGFloat) {
        let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        layer.mask = mask
        
        let borderLayer = CAShapeLayer()
        borderLayer.path = path.cgPath
        borderLayer.lineWidth = borderWidth
        borderLayer.strokeColor = borderColor.cgColor
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.frame = bounds
        layer.addSublayer(borderLayer)
    }
}

并像这样使用它：

let button = UIButton(frame: CGRect(x: 50, y: 50, width: 100, height: 40))
button.setTitle("Today", for: .normal)
button.roundCorners([.topLeft, .bottomLeft], radius: 25, borderColor: .white, borderWidth: 10)

Swift 中带有 2 个边角半径的透明背景按钮

Transparent background button with 2 sided corner radius in Swift

swift

uibutton

uibezierpath

rounded-corners

cornerradius