swift - 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)
    
  }
  
  
  
    }

- 这是真正的设计

这是应用程序的输出

标签： swiftxcodecore-graphicsswift5

Answer 1

1. 第一：不要插入图层，layoutSubview因为它调用了很多次

2. 第二种：插入图层时使用低于或高于

3. 第三：使用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
   
     }
   
   
   
       }