The problem with gradiant layer in the UIBUTTON in swift - swift

Question

now I am designing button with gradient layer like show in the picture
I have two problems
1- when I add gradient layer to the button the text disappear like show in the last figure
2- The gradient layer I have created does not like the design the left side of the color in the real design alpha less than right ,I have added the right code but does not show what I want
-This parameters what I am using
#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

First: don't insert layer in layoutSubview because it calls many
times
Second: Use below or above when inserting layer
Third: use self.gradientLayer.frame = self.bounds instead of 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)
}