两个 UIButton 形成一个具有渐变颜色,另一个具有边框和圆角

Posted

技术标签:

【中文标题】两个 UIButton 形成一个具有渐变颜色,另一个具有边框和圆角【英文标题】:Two UIButton form one having gradient color and another having border and rounded corner 【发布时间】:2018-05-23 08:27:32 【问题描述】:

我正在尝试在 [.topLeft,.bottomLeft][.topRight,.bottomRight] 上使用渐变颜色和角半径来实现这一点,但我无法做到实现一侧的边框颜色。

这是我的代码

//btnMale gradient color
btnMale.roundCorners([.topLeft,.bottomLeft], radius: 20)
btnFemale.roundCorners([.topRight,.bottomRight], radius: 20)
btnMale.backgroundColor = .clear
let gradient1: CAGradientLayer = CAGradientLayer()
gradient1.frame = CGRect(x: 0, y: 0, width: (self.view.frame.size.width - 90)/2 , height: btnMale.frame.size.height)
gradient1.colors = [Colors.appYellow,Colors.appRed].map  $0.cgColor 
gradient1.startPoint = GradientOrientation.horizontal.startPoint
gradient1.endPoint = GradientOrientation.horizontal.endPoint
btnMale.layer.insertSublayer(gradient1, at: 0)
btnMale.applyGradient(withColours: [Colors.appYellow,Colors.appRed], gradientOrientation: .horizontal)
btnMale.borderWidth = 0.0

btnFemale.borderWidth = 0.5
btnFemale.borderColor = .black
btnMale.setImage(UIImage(named: Images.imgMaleIconWhite), for: .normal)
btnFemale.setImage(UIImage(named: Images.imgFemaleIconBlack), for: .normal)

这是我的输出

请帮忙。

【问题讨论】:

一个题外话的建议:您不想为此目的使用UISegmentedControl 吗?您还可以将图层样式应用于整个元素而不是不同的按钮。 @AuRi 有什么例子吗?或代码 【参考方案1】:

Pradip 最好在 UIView 中添加按钮。您将很容易管理。我使用 UIView 制作了您想要的 UI。看到这个,

let button = UIButton.init(frame: CGRect.init(x: 0, y: 250, width: 200, height: 100))
    button.setTitle("HI", for: .normal)
    button.addTarget(self, action: #selector(self.btnTapped(pageNo:)), for: .touchUpInside)
    self.view.addSubview(button)

    let view = UIView.init(frame: CGRect.init(x: 50, y: 250, width: 250, height: 50))
    view.backgroundColor = UIColor.red
    self.view.addSubview(view)

    let btnMale = UIButton.init(type: .custom)
    btnMale.frame = CGRect.init(x: 0, y: 0, width: 125, height: 50)
    btnMale.setTitle("Male", for: .normal)

    btnMale.applyGradient(colours: [UIColor.yellow,UIColor.red])


    view.addSubview(btnMale)

    let btnFemale = UIButton.init(type: .custom)
    btnFemale.frame = CGRect.init(x: 125, y: 0, width: 125, height: 50)
    btnFemale.setTitle("Female", for: .normal)
    view.addSubview(btnFemale)

    view.layer.cornerRadius = 25
    view.clipsToBounds = true

以上代码的输出将如下所示。

【讨论】:

以上是关于两个 UIButton 形成一个具有渐变颜色,另一个具有边框和圆角的主要内容,如果未能解决你的问题,请参考以下文章

自定义 UIButton 类 - 渐变离开按钮边框

在两个 CAGradientLayer 颜色设置之间连续渐变?

以编程方式将渐变边框颜色应用于 UIButton

为uibutton背景图像iphone sdk设置渐变颜色(颜色)

如何创建具有渐变和突出显示的 UIButton?

突出显示时更改 UIButton 的背景颜色