iOS - 带有渐变,圆角,阴影的UIButton
2021-04-06 本文已影响0人
yyyyw
- 创建一个Button,继承UIButton。
import UIKit
class ShadowButton: UIButton {
// 圆角
var cornerRadius: CGFloat = 0 {
didSet{
self.layer.cornerRadius = cornerRadius
self.layer.masksToBounds = true
// 刷新
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
// 渐变色
var gradientColor: [UIColor] = [] {
didSet{
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
// 阴影颜色
var shadowColor: UIColor = .white {
didSet{
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
// 阴影Offset
var shadowOffset: CGSize = .zero {
didSet{
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
// 阴影Opacity
var shadowOpacity: Float = 0.0 {
didSet{
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
// 阴影Radius
var shadowRadius: CGFloat = 0.0 {
didSet{
self.setNeedsLayout()
self.layoutIfNeeded()
}
}
/// 阴影layer
private var shadowLayer: CALayer?
/// 渐变layer
private var gradientLayer: CALayer?
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
if shadowLayer != nil {
shadowLayer?.removeFromSuperlayer()
}
shadowLayer = CALayer()
shadowLayer?.frame = self.frame
shadowLayer?.cornerRadius = cornerRadius
shadowLayer?.backgroundColor = self.backgroundColor?.cgColor
shadowLayer?.masksToBounds = false
shadowLayer?.shadowColor = shadowColor.cgColor
shadowLayer?.shadowOffset = shadowOffset
shadowLayer?.shadowOpacity = shadowOpacity
shadowLayer?.shadowRadius = shadowRadius
if gradientColor.count != 0{
gradientLayer = CAGradientLayer.init(colors: gradientColor, startPoint: CGPoint.init(x: 0, y: 1), endPoint: CGPoint.init(x: 1, y: 1))
gradientLayer?.frame = rect
if let layer = gradientLayer {
// 添加渐变
self.layer.insertSublayer(layer, at: 0)
}
}else{
gradientLayer?.removeFromSuperlayer()
}
if let layer = shadowLayer {
self.superview?.layer.insertSublayer(layer, below: self.layer)
}
}
}
// MARK: - 渐变
extension CAGradientLayer {
convenience init(colors: [UIColor], locations: [CGFloat]? = nil, startPoint: CGPoint, endPoint: CGPoint, type: CAGradientLayerType = .axial) {
self.init()
self.colors = colors.map { $0.cgColor }
self.locations = locations?.map { NSNumber(value: Double($0)) }
self.startPoint = startPoint
self.endPoint = endPoint
self.type = type
}
}
- 使用
let button = ShadowButton()
button.backgroundColor = .red
button.setTitle("按钮", for: .normal)
button.setTitleColor(.white, for: .normal)
button.cornerRadius = 25
button.shadowColor = #colorLiteral(red: 0.01568627451, green: 0.5960784314, blue: 0.7607843137, alpha: 1)
button.shadowOpacity = 0.9
button.shadowOffset = .zero
button.shadowRadius = 6
button.gradientColor = [#colorLiteral(red: 0.007843137255, green: 0.9215686275, blue: 0.4039215686, alpha: 1),#colorLiteral(red: 0.01960784314, green: 0.5411764706, blue: 0.8196078431, alpha: 1)]
button.frame = CGRect(x: 24, y: 400, width: UIScreen.main.bounds.size.width - 48, height: 50)
view.addSubview(button)
-
效果图
WeChat45d71eb2eac0b1a7c84e95c7792fbc23.png