Проблема с градиентным слоем в UIBUTTON в swift

Question

сейчас я разрабатываю кнопку со слоем градиента, как показано на картинке. У меня две проблемы

1- когда я добавляю слой градиента к кнопке, текст исчезает, как показано на последнем рисунке

2- Созданному мной слою градиента не нравится дизайн: левая сторона цвета в реальном альфа-канале меньше правой, я добавил правильный код, но не показывает то, что я хочу

-Это параметры, которые я использую

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

-This is the real design

This is output of the app

введите описание изображения здесь

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

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