求助：如何实现单侧圆角渐变与单侧圆角边框的双UIButton效果

看起来你是想做一个左右拼接的性别选择按钮组：左边按钮左圆角+水平渐变，右边按钮右圆角+仅显示右、上、下三边的黑色边框，但现在遇到了渐变溢出圆角、右侧按钮边框显示不对的问题对吧？我来帮你梳理下问题点和解决办法：

问题根源分析 #

你的代码里有几个关键细节没处理到位：

1. 渐变层没有和按钮的圆角裁剪同步，导致渐变颜色超出了圆角范围
2. 右侧按钮直接设置borderWidth和borderColor会给四边都加上边框，而你需要隐藏左边框
3. 两个按钮的布局可能存在间隙，导致视觉上不连贯

分步解决方案 #

1. 让渐变层适配按钮圆角

首先，给按钮设置圆角后，必须开启masksToBounds，这样按钮的所有子层（包括渐变层）都会被裁剪到圆角范围内：

btnMale.roundCorners([.topLeft,.bottomLeft], radius: 20)
btnMale.layer.masksToBounds = true // 关键：强制内容裁剪到圆角

如果你的applyGradient是自定义方法，要确保它内部创建的渐变层frame是基于按钮的bounds而非固定宽度（避免旋转或适配时错位），同时渐变层也不需要额外设置mask，因为按钮的layer已经做了裁剪。

2. 给右侧按钮添加单侧边框

不要用系统默认的borderWidth，而是通过自定义CAShapeLayer来实现仅显示右、上、下三边的边框：

btnFemale.roundCorners([.topRight,.bottomRight], radius: 20)
btnFemale.layer.masksToBounds = true

// 创建单侧边框层
let borderLayer = CALayer()
borderLayer.frame = btnFemale.bounds
borderLayer.borderColor = UIColor.black.cgColor
borderLayer.borderWidth = 0.5

// 用遮罩隐藏左边框
let maskPath = UIBezierPath(roundedRect: btnFemale.bounds, byRoundingCorners: [.topRight,.bottomRight], cornerRadii: CGSize(width:20, height:20))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
borderLayer.mask = maskLayer

btnFemale.layer.addSublayer(borderLayer)

3. 确保两个按钮紧密贴合

用UIStackView来布局两个按钮，设置spacing = 0保证中间没有间隙，同时设置distribution = .fillEqually让两个按钮宽度一致：

let buttonStack = UIStackView(arrangedSubviews: [btnMale, btnFemale])
buttonStack.axis = .horizontal
buttonStack.spacing = 0
buttonStack.distribution = .fillEqually
buttonStack.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(buttonStack)
// 添加合适的约束，比如居中+宽度适配
NSLayoutConstraint.activate([
    buttonStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    buttonStack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    buttonStack.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -90),
    buttonStack.heightAnchor.constraint(equalToConstant: 44) // 替换成你需要的高度
])

完整优化后的代码示例 #

// 初始化按钮
let btnMale = UIButton(type: .custom)
let btnFemale = UIButton(type: .custom)

// 配置左侧按钮：圆角+渐变
btnMale.roundCorners([.topLeft,.bottomLeft], radius: 20)
btnMale.layer.masksToBounds = true
btnMale.applyGradient(withColours: [Colors.appYellow, Colors.appRed], gradientOrientation: .horizontal)
btnMale.setImage(UIImage(named: Images.imgMaleIconWhite), for: .normal)

// 配置右侧按钮：圆角+单侧边框
btnFemale.roundCorners([.topRight,.bottomRight], radius: 20)
btnFemale.layer.masksToBounds = true
btnFemale.setImage(UIImage(named: Images.imgFemaleIconBlack), for: .normal)

// 添加单侧边框
let borderLayer = CALayer()
borderLayer.frame = btnFemale.bounds
borderLayer.borderColor = UIColor.black.cgColor
borderLayer.borderWidth = 0.5
let maskPath = UIBezierPath(roundedRect: btnFemale.bounds, byRoundingCorners: [.topRight,.bottomRight], cornerRadii: CGSize(width:20, height:20))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
borderLayer.mask = maskLayer
btnFemale.layer.addSublayer(borderLayer)

// 布局按钮组
let buttonStack = UIStackView(arrangedSubviews: [btnMale, btnFemale])
buttonStack.axis = .horizontal
buttonStack.spacing = 0
buttonStack.distribution = .fillEqually
buttonStack.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(buttonStack)

NSLayoutConstraint.activate([
    buttonStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    buttonStack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    buttonStack.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -90),
    buttonStack.heightAnchor.constraint(equalToConstant: btnMale.frame.size.height)
])

这样调整后，应该就能实现你想要的左右拼接、单侧圆角+渐变/边框的效果了。

内容的提问来源于stack exchange，提问作者pradip rathod