【问题标题】:Editing UIButton to have rounded corners on one side [duplicate]编辑 UIButton 在一侧有圆角[重复]
【发布时间】:2017-05-15 18:52:31
【问题描述】:

我对 Swift 还很陌生,我正在尝试了解如何编辑 UIButton 以使它们看起来具有某种特定的方式。我想知道如何使我的 UIButton 看起来像:

【问题讨论】:

  • 截图对我来说是白屏
  • 我很抱歉。我已经用一张显示我正在寻找的内容的图片更新了我的问题。

标签: ios swift uibutton


【解决方案1】:

试试这个:

extension UIView {
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat, borderColor: UIColor?, borderWidth: CGFloat?) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))

        let mask = CAShapeLayer()
        mask.frame = self.bounds
        mask.path = path.cgPath
        self.layer.mask = mask

        if borderWidth != nil {
            addBorder(mask, borderWidth: borderWidth!, borderColor: borderColor!)
        }
    }

    private func addBorder(_ mask: CAShapeLayer, borderWidth: CGFloat, borderColor: UIColor) {
        let borderLayer = CAShapeLayer()
        borderLayer.path = mask.path
        borderLayer.fillColor = UIColor.clear.cgColor
        borderLayer.strokeColor = borderColor.cgColor
        borderLayer.lineWidth = borderWidth
        borderLayer.frame = bounds
        layer.addSublayer(borderLayer)
    }
}

用法:

someView.roundCorners([.topLeft, .topRight], radius: 3, borderColor: nil, borderWidth: nil) //top corners with radius 3 without border
someView.roundCorners(.allCorners, radius: 2, borderColor: UIColor.red, borderWidth: 1) //all corners with red border

您可以将其应用于任何继承 UIView 的 UI 元素(例如 UIButton)

【讨论】:

    【解决方案2】:

    在这种情况下,我会用白色文本制作一个透明按钮。

    然后我会定义边框的颜色和大小:

    self.myButton.layer.layer.borderColor  = UIColor.white
    self.myButton.layer.layer.borderWidth  = 3
    

    接下来我将圆按钮:

    self.myButton.layer.cornerRadius = 3
    self.myButton.clipsToBounds = true
    

    要使背景变为红色,只需将按钮放在该颜色的视图顶部

    【讨论】:

    • 这会环绕所有 4 个角,而不仅仅是 2 个。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-06-29
    • 2023-04-01
    • 1970-01-01
    • 2016-04-27
    • 2013-10-14
    • 2010-10-23
    • 2017-11-27
    相关资源
    最近更新 更多