swift 中 UIBUTTON 渐变层的问题

Question

现在我正在设计带有渐变图层的按钮，如图所示我有两个问题

1- 当我给按钮添加渐变层时，文本消失，如上图所示

2-我创建的渐变层不喜欢设计真实设计中颜色左侧的alpha小于右侧，我添加了正确的代码但没有显示我想要的

-这个参数我用的是什么

   @IBDesignable
class buttonGeneralDesign: UIButton {
private var gradientLayer: CAGradientLayer!
          @IBInspectable
          var cornerRadius: CGFloat = 0.0{
              didSet{
                  self.layer.cornerRadius = cornerRadius
                self.clipsToBounds = false
              }
          }
          
          @IBInspectable
          var borderColor: UIColor = .clear {
              didSet {
                  self.layer.borderColor = borderColor.cgColor
              }
          }
          @IBInspectable
          var borderWidth: CGFloat = 0.0 {
              didSet {
                  self.layer.borderWidth = borderWidth
              }
          }
          @IBInspectable
           var shadowColor: UIColor = .clear {
               didSet {
                   self.layer.shadowColor = shadowColor.cgColor
               }
           }
          @IBInspectable
           var shadowRadius: CGFloat = 0.0 {
               didSet{
                   self.layer.shadowRadius = shadowRadius
               }
           }
          
          @IBInspectable
          var shadowOpacity: Float = 0.0 {
              didSet{
                  self.layer.shadowOpacity = shadowOpacity
              }
          }
          
          @IBInspectable
            var shadowOffset: CGSize = CGSize.zero{
                didSet{
                    self.layer.shadowOffset = shadowOffset
                }
            }
  
  
 
  @IBInspectable var topColor: UIColor = .red {
      didSet {
          setNeedsLayout()
      }
  }
  
  @IBInspectable var bottomColor: UIColor = .yellow {
      didSet {
          setNeedsLayout()
      }
  }

  
  @IBInspectable var startPointX: CGFloat = 0 {
      didSet {
          setNeedsLayout()
      }
  }
  
  @IBInspectable var startPointY: CGFloat = 0.5 {
      didSet {
          setNeedsLayout()
      }
  }
  
  @IBInspectable var endPointX: CGFloat = 1 {
      didSet {
          setNeedsLayout()
      }
  }
  
  @IBInspectable var endPointY: CGFloat = 0.5 {
      didSet {
          setNeedsLayout()
      }
  }
  
//  override class var layerClass: AnyClass {
//      return CAGradientLayer.self
//  }
  
  override func layoutSubviews() {
      self.gradientLayer =  CAGradientLayer()
      self.gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
      self.gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY)
     self.gradientLayer.locations = [0,1]
      self.gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY)
    self.gradientLayer.position = self.center

      self.layer.insertSublayer( self.gradientLayer, at: 0)
    
  }
  
  
  
    }

-这才是真正的设计

这是应用程序的输出

Answer 1

首先：不要在layoutSubview中插入层，因为它会调用很多次
其二：插入图层时使用下方或上方

第三：使用self.gradientLayer.frame = self.bounds代替self.gradientLayer.position = self.center

.

import UIKit
 @IBDesignable
class buttonGeneralDesign: UIButton {
private var gradientLayer: CAGradientLayer!
          @IBInspectable
          var cornerRadius: CGFloat = 0.0{
              didSet{
                  self.layer.cornerRadius = cornerRadius
                self.clipsToBounds = false
              }
          }

          @IBInspectable
          var borderColor: UIColor = .clear {
              didSet {
                  self.layer.borderColor = borderColor.cgColor
              }
          }
          @IBInspectable
          var borderWidth: CGFloat = 0.0 {
              didSet {
                  self.layer.borderWidth = borderWidth
              }
          }
          @IBInspectable
           var shadowColor: UIColor = .clear {
               didSet {
                   self.layer.shadowColor = shadowColor.cgColor
               }
           }
          @IBInspectable
           var shadowRadius: CGFloat = 0.0 {
               didSet{
                   self.layer.shadowRadius = shadowRadius
               }
           }

          @IBInspectable
          var shadowOpacity: Float = 0.0 {
              didSet{
                  self.layer.shadowOpacity = shadowOpacity
              }
          }

          @IBInspectable
            var shadowOffset: CGSize = CGSize.zero{
                didSet{
                    self.layer.shadowOffset = shadowOffset
                }
            }



  @IBInspectable var topColor: UIColor = .red {
      didSet {
          setNeedsLayout()
      }
  }

  @IBInspectable var bottomColor: UIColor = .yellow {
      didSet {
          setNeedsLayout()
      }
  }


  @IBInspectable var startPointX: CGFloat = 0 {
      didSet {
          setNeedsLayout()
      }
  }

  @IBInspectable var startPointY: CGFloat = 0.5 {
      didSet {
          setNeedsLayout()
      }
  }

  @IBInspectable var endPointX: CGFloat = 1 {
      didSet {
          setNeedsLayout()
      }
  }

  @IBInspectable var endPointY: CGFloat = 0.5 {
      didSet {
          setNeedsLayout()
      }
  }

    override init(frame: CGRect) {
        super.init(frame: .zero)
        commonInit()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }

    func commonInit(){
        self.gradientLayer =  CAGradientLayer()
        self.gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
       self.gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY)
       self.gradientLayer.locations = [0,1]
       self.gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY)
       self.layer.insertSublayer( self.gradientLayer, below: self.titleLabel?.layer)
    }

  override func layoutSubviews() {
     self.gradientLayer.frame = self.bounds

  }



    }

Answer 2

func SetupGradientLeft2Right() {
    let gradient:CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = [UIColor.green.cgColor,UIColor.yellow.cgColor]
    gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    self.layer.insertSublayer(gradient, at: 0)
}

swift 中 UIBUTTON 渐变层的问题

The problem with gradiant layer in the UIBUTTON in swift

xcode

core-graphics

swift

swift5