I am beginner in Swift/Xcode. I made a custom class in my Xcode project to handle buttons appearance (color, shape etc) that works find.

However, I can't succeed to add gradients to these buttons.

I tried the below code, but it adds a new squared gradient onto my rounded buttons instead of applying the intended gradients to those buttons. Here is what I already gave many tries: - add this code to my custom button class (inheriting from UIButton) - add this code to my custom button class (inheriting from UIView) - above 2 approaches and removing the backgroungColor settings - Using a separate function called from viewController

func ConfigMenuButtons() {

    // Set button shape color
    layer.cornerRadius = 37

    // Set button size
    translatesAutoresizingMaskIntoConstraints = false
    widthAnchor.constraint(equalToConstant: 74).isActive = true
    heightAnchor.constraint(equalToConstant: 74).isActive = true

    // Set button text
    setTitleColor(.white, for: .normal)
    titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)

    // Set button shadow
    layer.shadowRadius = 2
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2)
    layer.shadowOpacity = 0.8

    // Set button gradient colors
    let lightBlue = UIColor(red: 122/255, green: 127/255, blue: 249/255, alpha: 1)
    let darkBlue = UIColor(red: 74/255, green: 88/255, blue: 205/255, alpha: 1)

    // Set gradients
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
    gradientLayer.locations = [0.0,1.0]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

    clipsToBounds = true

    // insert gradients to button
    layer.insertSublayer(gradientLayer, at: 0)
}

But I always end up with this "square shaped gradient layer" appearing onto the targeted buttons, instead of having these gradients applied directly to these buttons. If someone had any piece of advice, it would be fantastic. Thank you!

Here is the screen shot of the button with its partial expected effect

1 Answers

0
Community On

Here is a screenshot of fixed issue

I finally fixed the issue as below adding a CGRect size.

   func ConfigMenuButtons() {

    // Set button shape
    layer.cornerRadius = 37

    // Set button size
    translatesAutoresizingMaskIntoConstraints = false
    widthAnchor.constraint(equalToConstant: 74).isActive = true
    heightAnchor.constraint(equalToConstant: 74).isActive = true

    // Set button text
    setTitleColor(.white, for: .normal)
    titleLabel?.font = UIFont.boldSystemFont(ofSize: 15)

    // Set button shadow
    layer.shadowRadius = 2
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2)
    layer.shadowOpacity = 0.8

    // Set button gradient colors
    let lightBlue = UIColor(red: 112/255, green: 117/255, blue: 239/255, alpha: 1)
    let darkBlue = UIColor(red: 70/255, green: 84/255, blue: 201/255, alpha: 1)

    // Set gradients
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = bounds
    gradientLayer.colors = [lightBlue.cgColor, darkBlue.cgColor]
    gradientLayer.locations = [0.0,1.0]
    gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

    // THAT IS THE LINE THAT COULD FIX THE ISSUE
    gradientLayer.frame = CGRect(x: 0, y: 0, width: 74, height: 74)

    // Set rounded shape
    gradientLayer.cornerRadius = 37

    // insert gradients to button
    layer.insertSublayer(gradientLayer, at: 0)
}