class GradientBorderView : UIView{
var isSelected : Bool {
didSet{
if isSelected{
self.gradientLayer.removeFromSuperlayer()
self.normalLayer.removeFromSuperlayer()
self.layer.addSublayer(self.gradientLayer)
self.backgroundColor = UIColor(hexString: "#EBEDF2")
}else{
self.gradientLayer.removeFromSuperlayer()
self.normalLayer.removeFromSuperlayer()
self.layer.addSublayer(self.normalLayer)
self.backgroundColor = .white
}
}
}
var gradientLayer : CAGradientLayer
var shapeLayer = CAShapeLayer()
var normalShapeLayer = CAShapeLayer()
var normalLayer = CALayer()
init(isSelected:Bool,gradientLayer:CAGradientLayer) {
self.isSelected = isSelected
self.gradientLayer = gradientLayer
super.init(frame: .zero)
self.layer.cornerRadius = 4
self.normalLayer.backgroundColor = UIColor(hexString: "#979797")?.cgColor
self.normalShapeLayer.fillColor = nil
self.normalShapeLayer.strokeColor = UIColor.black.cgColor
self.normalShapeLayer.cornerRadius = 4
self.normalShapeLayer.lineWidth = 0.5
self.gradientLayer.cornerRadius = 4
self.shapeLayer.lineWidth = 2 // 设置边框宽度
self.shapeLayer.cornerRadius = 4
self.shapeLayer.fillColor = nil
self.shapeLayer.strokeColor = UIColor.black.cgColor
self.gradientLayer.mask = self.shapeLayer
self.normalLayer.mask = self.normalShapeLayer
self.layer.addSublayer(self.gradientLayer)
}
override func layoutSubviews() {
super.layoutSubviews()
self.gradientLayer.frame = CGRectMake(-2, -2, self.bounds.width + 4, self.bounds.height + 4)
self.normalLayer.frame = self.gradientLayer.frame
let innerBounds = self.gradientLayer.bounds.insetBy(dx: 2, dy: 2)
let innerPath = UIBezierPath(roundedRect: innerBounds, cornerRadius: 4)
self.shapeLayer.path = innerPath.cgPath
self.normalShapeLayer.path = innerPath.cgPath
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
支持通过selected属性控制渐变色是否展示
但如果单独设置view的背景为渐变色，实现起来就比较简单
class GradientView: UIView {
// 1. 创建 CAGradientLayer
var gradientLayer : CALayer
init(gradientLayer: CALayer) {
self.gradientLayer = gradientLayer
super.init(frame: .zero)
setupGradient()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupGradient() {
// 4. 添加渐变层到 UIView 的 layer 层次结构的最底部
layer.insertSublayer(gradientLayer, at: 0)
}
// 5. 更新 CAGradientLayer 的尺寸以匹配 UIView 的尺寸
override func layoutSubviews() {
super.layoutSubviews()
gradientLayer.frame = bounds
}
}
像button这种也比较简单
class GradientButtonPro: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
updateGradientLayer()
}
private func updateGradientLayer() {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [ UIColor(hexString: "#00CDFF")!.cgColor, UIColor(hexString: "#4872EC")!.cgColor ]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.cornerRadius = 2
layer.insertSublayer(gradientLayer, at: 0)
}
}
