Search code examples
iosswiftuiviewcagradientlayer

How to apply gradients to mulitple custom uiviews?


I have 6 custom uiviews arranged. Also I have tried applying gradient using various techniques.

How to call the functions or how to apply gradient for mulitple views having different cgcolor codes.

        func onebg(){
                    applyGradient(color_1: UIColor(red: 218.0/255.0, green: 52.0/255.0, blue: 204.0/255.0, alpha: 1.0).cgColor, color_2: UIColor(red: 149.0/255.0, green: 39.0/255.0, blue: 137.0/255.0, alpha: 1.0).cgColor, view: calendarView)
                }

        func twobg(){
                    applyGradient(color_1: UIColor(red: 104.0/255.0, green: 220.0/255.0, blue: 108.0/255.0, alpha: 1.0).cgColor, color_2: UIColor(red: 28.0/255.0, green: 170.0/255.0, blue: 87.0/255.0, alpha: 1.0).cgColor, view: classroomView)
                }

        func threebg(){
                    applyGradient(color_1: UIColor(red: 0.0/255.0, green: 144.0/255.0, blue: 214.0/255.0, alpha: 1.0).cgColor, color_2: UIColor(red: 34.0/255.0, green: 66.0/255.0, blue: 138.0/255.0, alpha: 1.0).cgColor, view: appointmentView)
                }


        I have called this 6 methods like, onebg() twobg() from viewdidload(). But it is not applying and most importantly what i am getting is , the gradient color is applied only for last view. 

        func applyGradient(color_1 : CGColor , color_2: CGColor , view : UIView)  {

                    gradientLayer.frame = view.bounds

                    let color1 = color_1

                    let color2 = color_2

                    gradientLayer.colors = [color1, color2]

                    gradientLayer.locations = [0.0, 0.75, 0.25, 1.0]

                    view.layer.insertSublayer(gradientLayer, at: 0)
        }

This is the method im calling for applying ,by adding insertsublayer for gradients.Please help.


Solution

  • Swift 4.0

    You need to implement this code in one file and assign to view, configure in inspector attribute your gradient as below image

    You can try this way.

    @IBDesignable class xGradientView: UIView {
    
        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
                layer.cornerRadius = newValue
            }
        }
    
        @IBInspectable
        var borderWidth: CGFloat {
            get {
                return layer.borderWidth
            }
            set {
                layer.borderWidth = newValue
            }
        }
    
        @IBInspectable
        var borderColor: UIColor? {
            get {
                if let color = layer.borderColor {
                    return UIColor(cgColor: color)
                }
                return nil
            }
            set {
                if let color = newValue {
                    layer.borderColor = color.cgColor
                } else {
                    layer.borderColor = nil
                }
            }
        }
    
        @IBInspectable
        var shadowRadius: CGFloat {
            get {
                return layer.shadowRadius
            }
            set {
                layer.shadowRadius = newValue
            }
        }
        @IBInspectable
        var shadowOpacity: Float {
            get {
                return layer.shadowOpacity
            }
            set {
                layer.shadowOpacity = newValue
            }
        }
    
        @IBInspectable
        var shadowOffset: CGSize {
            get {
                return layer.shadowOffset
            }
            set {
                layer.shadowOffset = newValue
            }
        }
    
        @IBInspectable
        var shadowColor: UIColor? {
            get {
                if let color = layer.shadowColor {
                    return UIColor(cgColor: color)
                }
                return nil
            }
            set {
                if let color = newValue {
                    layer.shadowColor = color.cgColor
                } else {
                    layer.shadowColor = nil
                }
            }
        }
    
    //    MARK:- Gradient Color
    
        @IBInspectable var startColor:   UIColor = .clear { didSet { updateColors() }}
        @IBInspectable var endColor:     UIColor = .clear { didSet { updateColors() }}
        @IBInspectable var startLocation: Double =   0.0 { didSet { updateLocations() }}
        @IBInspectable var endLocation:   Double =   0.0 { didSet { updateLocations() }}
        @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
        @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}
        var gradientSet = [[CGColor]]()
        var currentGradient: Int = 0
        override class var layerClass: AnyClass { return CAGradientLayer.self }
        var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
        func updatePoints() {
            if horizontalMode {
                gradientLayer.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
                gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
    
            } else {
                gradientLayer.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
                gradientLayer.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
            }
        }
        func updateLocations() {
            gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
        }
        func updateColors() {
            gradientLayer.colors    = [startColor.cgColor, endColor.cgColor]
        }
        override func layoutSubviews() {
            super.layoutSubviews()
            gradientLayer.drawsAsynchronously = true
            gradientSet.append([startColor.cgColor, endColor.cgColor])
            gradientSet.append([endColor.cgColor, startColor.cgColor])
            updatePoints()
            updateLocations()
            updateColors()
        }
    }
    

    enter image description here