can someone tell me please how to make the button rounded, shadow and gradient

here I set the gradient and shadow to the button, but without rounding:

 @IBOutlet weak var info: UIButton! 

info.setTitle("INFO", for: .normal)
info.setTwoGradients(colorOne: Colors.OrangeGrad, colorTwo: Colors.OrangeGradSec)
info.setTitleColor(UIColor.black, for: .normal)
info.layer.shadowColor = UIColor.darkGray.cgColor
info.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
info.layer.shadowOpacity = 0.8
info.layer.shadowRadius = 2
view.addSubview(info)

I know that the shadow disappears because of the rounding and I found a way to fix it, ex:

final class CustomButton: UIButton {

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews() {
        super.layoutSubviews()

        if shadowLayer == nil {
            shadowLayer = CAShapeLayer()
            shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 10).cgPath

            shadowLayer.fillColor = UIColor.white.cgColor
            shadowLayer.shadowColor = UIColor.darkGray.cgColor
            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowOffset = CGSize(width: 5.0, height: 2.0)
            shadowLayer.shadowOpacity = 0.7
            shadowLayer.shadowRadius = 2

            layer.insertSublayer(shadowLayer, at: 0)

        }
    }

but there is a line:

shadowLayer.fillColor = UIColor.white.cgColor

because of which I can't set the gradient

therefore, I cannot find a way by which all three conditions would be met

CodePudding user response：

Output:

Usage

class ViewController: UIViewController {
        
    @IBOutlet var btnGradient: CustomButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        btnGradient.gradientColors = [.red, .green]
        btnGradient.setTitle("Gradient Button", for: .normal)
        btnGradient.setTitleColor(.white, for: .normal)
    }
}

Custom Class

Use this class as a reference to setup the attributes:

class CustomButton: UIButton {
    
    var gradientColors : [UIColor] = [] {
        didSet {
            setupView()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    private func setupView() {
        
        let startPoint = CGPoint(x: 0, y: 0.5)
        let endPoint = CGPoint(x: 1, y: 0.5)
        
        var btnConfig = UIButton.Configuration.plain()
        btnConfig.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: layer.frame.height / 2, bottom: 5, trailing: layer.frame.height / 2)
        
        self.configuration = btnConfig
        layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        
        //Gradient
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = gradientColors.map { $0.cgColor }
        gradientLayer.startPoint = startPoint
        gradientLayer.endPoint = endPoint
        gradientLayer.cornerRadius = layer.frame.height / 2
        
        if let oldValue = layer.sublayers?[0] as? CAGradientLayer {
            layer.replaceSublayer(oldValue, with: gradientLayer)
        } else {
            layer.insertSublayer(gradientLayer, below: nil)
        }
        
        //Shadow
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: layer.frame.height / 2).cgPath
        layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
        layer.shadowOpacity = 0.7
        layer.shadowRadius = 2.0
    }
}

CodePudding user response：

You can use UIButton Extension or refer code

Pass colors in array with start & end point of gradient effect, you want to start & end. i.e. x=0, y=0 means TopLeft & x=1, y=1 means BottomRight

extension UIButton {
    func setGradientLayer(colorsInOrder colors: [CGColor], startPoint sPoint: CGPoint = CGPoint(x: 0, y: 0.5), endPoint ePoint: CGPoint = CGPoint(x: 1, y: 0.5)) {
        
        let gLayer = CAGradientLayer()
        gLayer.frame = self.bounds
        gLayer.colors = colors
        gLayer.startPoint = sPoint
        gLayer.endPoint = ePoint

        gLayer.cornerRadius = 5
        
        gLayer.shadowOpacity = 0.8
        gLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
        
        layer.insertSublayer(gLayer, at: 0)
    }
}