IOS स्विफ्ट ऐप के बैकग्राउंड व्यू के लिए ग्रेडिएंट कैसे लागू करें

Question

मैं एक दृश्य के पृष्ठभूमि रंग (एक स्टोरीबोर्ड का मुख्य दृश्य) के रूप में एक ढाल लगाने की कोशिश कर रहा हूं। कोड चलता है, लेकिन कुछ भी नहीं बदलता है। मैं xCode बीटा 2 और स्विफ्ट का उपयोग कर रहा हूं।

यहाँ कोड है:

class Colors {
  let colorTop = UIColor(red: 192.0/255.0, green: 38.0/255.0, blue: 42.0/255.0, alpha: 1.0)
  let colorBottom = UIColor(red: 35.0/255.0, green: 2.0/255.0, blue: 2.0/255.0, alpha: 1.0)

  let gl: CAGradientLayer

  init() {
    gl = CAGradientLayer()
    gl.colors = [ colorTop, colorBottom]
    gl.locations = [ 0.0, 1.0]
  }
}

तब व्यू कंट्रोलर में:

  let colors = Colors()

  func refresh() {
        view.backgroundColor = UIColor.clearColor()
        var backgroundLayer = colors.gl
        backgroundLayer.frame = view.frame
        view.layer.insertSublayer(backgroundLayer, atIndex: 0)
      }
    }
  }

Comments

मैंने एक घटक प्रकाशित किया जो इसे आसान बनाता है, आप इसे कोको पोड्स का उपयोग कर सकते हैं, मैं यह सुझाव देता हूं क्योंकि यह बहुत सरल है और आप इसे एक्सकोड पर इंटरफ़ेस बिल्डर के माध्यम से सेट कर सकते हैं। और देखें github.com/heuristisk/hkGraddiant

— एंडरसन सैंटोस गुस्माओ

Answer 1

आपके द्वारा ढाल के लिए प्रदान किए जाने वाले रंग प्रकार के होने चाहिए CGColor। तो के अपने सरणी सेट CGColorकरने के लिए gl.colors।

सही कोड है:

class Colors {
    var gl:CAGradientLayer!

    init() {
        let colorTop = UIColor(red: 192.0 / 255.0, green: 38.0 / 255.0, blue: 42.0 / 255.0, alpha: 1.0).cgColor
        let colorBottom = UIColor(red: 35.0 / 255.0, green: 2.0 / 255.0, blue: 2.0 / 255.0, alpha: 1.0).cgColor

        self.gl = CAGradientLayer()
        self.gl.colors = [colorTop, colorBottom]
        self.gl.locations = [0.0, 1.0]
    }
}

Comments

यह कुंजी थी: gl.frame = view.bounds;

— Justingordon

मुझे यह त्रुटि हो रही है fatal error: array element cannot be bridged to Objective-C, जब .colorsसंपत्ति को सौंप रहा हूं । इसमें क्या गलत हो सकता है?

— त्रिकोप्स

मैंने इसे ठीक कर लिया है। यह स्विफ्ट में एक बग है, बस सरणी को स्पष्ट प्रकार के साथ चर में संग्रहीत करें [AnyObject]और फिर इसे .colorsसंपत्ति पर असाइन करें ।

— त्रिकोप्स

चलो c: ऐरे <AnyObject> = [colorTop, colorBottom]

— JP_

तेजी के लिए 1.0 वाक्यविन्यास होगाlet c: [AnyObject] = [colorTop, colorBottom]

— क्रिस

Answer 2

Xcode 11 • स्विफ्ट 5.1

---

आप अपना खुद का ग्रेडिएंट व्यू इस प्रकार बना सकते हैं:

@IBDesignable
public class Gradient: UIView {
    @IBInspectable var startColor:   UIColor = .black { didSet { updateColors() }}
    @IBInspectable var endColor:     UIColor = .white { didSet { updateColors() }}
    @IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
    @IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
    @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
    @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}

    override public class var layerClass: AnyClass { CAGradientLayer.self }

    var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }

    func updatePoints() {
        if horizontalMode {
            gradientLayer.startPoint = diagonalMode ? .init(x: 1, y: 0) : .init(x: 0, y: 0.5)
            gradientLayer.endPoint   = diagonalMode ? .init(x: 0, y: 1) : .init(x: 1, y: 0.5)
        } else {
            gradientLayer.startPoint = diagonalMode ? .init(x: 0, y: 0) : .init(x: 0.5, y: 0)
            gradientLayer.endPoint   = diagonalMode ? .init(x: 1, y: 1) : .init(x: 0.5, y: 1)
        }
    }
    func updateLocations() {
        gradientLayer.locations = [startLocation as NSNumber, endLocation as NSNumber]
    }
    func updateColors() {
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
    }
    override public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        updatePoints()
        updateLocations()
        updateColors()
    }

}

Comments

आयात को मत भूलना UIKit

— djdance

क्या आप कृपया इस पंक्ति को समझा सकते हैं: ओवरराइड करें वर्ग var लेयरक्लास: AnyClass {वापसी CAGradientLayer.self}

— मोहम्मद

डेवलपर

— .apple.com/documentation/uikit/uiview/…

स्थान / स्थिति / ग्रेडिएंटॉप्स की अधिकतम संख्या क्या लागू हो सकती है? यह निश्चित संख्या से अधिक लगता है, आईओएस ग्रेडिएंट का प्रतिपादन नहीं करता है। पेज खाली है

— अरुण प्रसाद

@AsadAmodi धन्यवाद

— लियो डबस

Answer 3

और यदि आपको ढाल की दिशा बदलने की आवश्यकता है, तो आपको स्टार्टअप और एंडपॉइंट का उपयोग करना होगा।

let gradient: CAGradientLayer = CAGradientLayer()

gradient.colors = [UIColor.blue.cgColor, UIColor.red.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = CGRect(x: 0.0, y: 0.0, width: self.view.frame.size.width, height: self.view.frame.size.height)

self.view.layer.insertSublayer(gradient, at: 0)

Comments

इसके साथ आने वाली समस्याओं में से एक यह है कि जब आप एक उप-परत जोड़ते हैं तो यह आपके सभी अन्य वस्तुओं, लेबल, छवि आदि पर बैठ सकती है। इसे दूर करने के लिए एक और दृश्य बनाएं जो हर चीज के नीचे बैठता है और कंटेनर की अपनी बाधाओं को निर्धारित करता है। आप इसमें ढाल चाहते हैं। फिर इस दृश्य पर लागू होने के लिए ढाल सेट करें। इसके बाद सब्‍जेक्‍ट इस लेयर में डाले जाएंगे और किसी और चीज पर नहीं बैठेंगे।

— मीका मोंटोया

Answer 4

बस उपर्युक्त उत्तर को संशोधित करना।

func setGradientBackground() {
    let colorTop =  UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).CGColor
    let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).CGColor

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorTop, colorBottom]
    gradientLayer.locations = [0.0, 1.0]
    gradientLayer.frame = self.view.bounds

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

फिर इस विधि को भीतर बुलाओ viewWillAppear

override func viewWillAppear(_ animated: Bool) {
    setGradientBackground()
    super.viewWillAppear(animated)
}

Comments

यह मौजूदा तत्वों पर एक परत डालता है इसलिए मैं कुछ भी नहीं देख सकता। कोई सुझाव?

— जेम्स जीपी

इसके self.view.layer.addSublayer(gradientLayer)साथ बदलें self.view.layer.insertSublayer(gradientLayer, at: 0), यह परत को "नीचे" सभी अन्य

— WMR

क्या इस ढाल प्रभाव को हटाने का एक तरीका है? निकालें फ़ंक्शन की तरह?

— टायलर रट

बहुत बढ़िया ... !!!!

— यश बेदी

Answer 5

में Swift3 इस प्रयास करें:

 func addGradient(){

    let gradient:CAGradientLayer = CAGradientLayer()
    gradient.frame.size = self.viewThatHoldsGradient.frame.size
    gradient.colors = [UIColor.white.cgColor,UIColor.white.withAlphaComponent(0).cgColor] //Or any colors
    self.viewThatHoldsGradient.layer.addSublayer(gradient)

}

Comments

gradient.startPoint = CGPoint (x: 0.0, y: 1.0) gradient.endPoint = CGPoint (x: 1.0, y: 1.0) विभिन्न ढाल स्थिति के लिए।

— पैन मुल्विक

colorWithAlphaComponent का नाम बदलकर withAlphaComponent किया गया है

— etayluz

Answer 6

मैंने किसी भी दृश्य के लिए एक मूल ढाल लागू करने के लिए एक UIView विस्तार किया

extension UIView {
    func layerGradient() {
        let layer : CAGradientLayer = CAGradientLayer()
        layer.frame.size = self.frame.size
        layer.frame.origin = CGPointMake(0.0,0.0)
        layer.cornerRadius = CGFloat(frame.width / 20)

        let color0 = UIColor(red:250.0/255, green:250.0/255, blue:250.0/255, alpha:0.5).CGColor
        let color1 = UIColor(red:200.0/255, green:200.0/255, blue: 200.0/255, alpha:0.1).CGColor
        let color2 = UIColor(red:150.0/255, green:150.0/255, blue: 150.0/255, alpha:0.1).CGColor
        let color3 = UIColor(red:100.0/255, green:100.0/255, blue: 100.0/255, alpha:0.1).CGColor
        let color4 = UIColor(red:50.0/255, green:50.0/255, blue:50.0/255, alpha:0.1).CGColor
        let color5 = UIColor(red:0.0/255, green:0.0/255, blue:0.0/255, alpha:0.1).CGColor
        let color6 = UIColor(red:150.0/255, green:150.0/255, blue:150.0/255, alpha:0.1).CGColor

        layer.colors = [color0,color1,color2,color3,color4,color5,color6]
        self.layer.insertSublayer(layer, atIndex: 0)
    }
}       

Comments

मुझे गलतफहमी हो सकती है, लेकिन उपयोगकर्ता को रंगों के सरणी को उस फ़ंक्शन में हार्ड कोडिंग के बजाय इसे पास करने देना बेहतर हो सकता है (जब तक कि आप हमेशा एक ही ढाल लागू नहीं करना चाहते)।

CGPointMake(0.0,0.0)साथ बदला जा सकता CGPointZeroसंक्षिप्तता के लिए

— JSmyth

Answer 7

मेरे पास ये एक्सटेंशन हैं:

@IBDesignable class GradientView: UIView {
    @IBInspectable var firstColor: UIColor = UIColor.red
    @IBInspectable var secondColor: UIColor = UIColor.green

    @IBInspectable var vertical: Bool = true

    lazy var gradientLayer: CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [firstColor.cgColor, secondColor.cgColor]
        layer.startPoint = CGPoint.zero
        return layer
    }()

    //MARK: -

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        applyGradient()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        applyGradient()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        applyGradient()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateGradientFrame()
    }

    //MARK: -

    func applyGradient() {
        updateGradientDirection()
        layer.sublayers = [gradientLayer]
    }

    func updateGradientFrame() {
        gradientLayer.frame = bounds
    }

    func updateGradientDirection() {
        gradientLayer.endPoint = vertical ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0)
    }
}

@IBDesignable class ThreeColorsGradientView: UIView {
    @IBInspectable var firstColor: UIColor = UIColor.red
    @IBInspectable var secondColor: UIColor = UIColor.green
    @IBInspectable var thirdColor: UIColor = UIColor.blue

    @IBInspectable var vertical: Bool = true {
        didSet {
            updateGradientDirection()
        }
    }

    lazy var gradientLayer: CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [firstColor.cgColor, secondColor.cgColor, thirdColor.cgColor]
        layer.startPoint = CGPoint.zero
        return layer
    }()

    //MARK: -

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        applyGradient()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        applyGradient()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        applyGradient()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updateGradientFrame()
    }

    //MARK: -

    func applyGradient() {
        updateGradientDirection()
        layer.sublayers = [gradientLayer]
    }

    func updateGradientFrame() {
        gradientLayer.frame = bounds
    }

    func updateGradientDirection() {
        gradientLayer.endPoint = vertical ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0)
    }
}

@IBDesignable class RadialGradientView: UIView {

    @IBInspectable var outsideColor: UIColor = UIColor.red
    @IBInspectable var insideColor: UIColor = UIColor.green

    override func awakeFromNib() {
        super.awakeFromNib()

        applyGradient()
    }

    func applyGradient() {
        let colors = [insideColor.cgColor, outsideColor.cgColor] as CFArray
        let endRadius = sqrt(pow(frame.width/2, 2) + pow(frame.height/2, 2))
        let center = CGPoint(x: bounds.size.width / 2, y: bounds.size.height / 2)
        let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil)
        let context = UIGraphicsGetCurrentContext()

        context?.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: endRadius, options: CGGradientDrawingOptions.drawsBeforeStartLocation)
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        #if TARGET_INTERFACE_BUILDER
            applyGradient()
        #endif
    }
}

उपयोग:

Comments

सबसे अच्छा नहीं ड्रा परत में परत जोड़ने के लिए, बस सेटअप समय पर

— Fattie

मेरे कुलपति दृश्य में इसे जोड़ने से सब कुछ अवरुद्ध हो जाता है। सभी तत्व ग्रेडिएंट के नीचे छिपे हुए हैं। व्हाट्सएप द वे

— अकास डेव

बदलने के self.layer.addSublayer(layer)लिए self.layer.insertSublayer(layer, at: 0)इंटरफ़ेस बिल्डर में सब कुछ obfuscating से ढाल को रोकने के लिए लगता है (कम से कम मेरे एक परीक्षण में)

— S.Walker

Answer 8

यह कोशिश करो, यह मेरे लिए काम कर रहा है,

  var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
  let gradientLayer:CAGradientLayer = CAGradientLayer()
  gradientLayer.frame.size = self.gradientView.frame.size
  gradientLayer.colors = 
  [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor] 
  //Use diffrent colors
  gradientView.layer.addSublayer(gradientLayer)

आप ग्रेडिएंट कलर के शुरुआती और अंत बिंदु जोड़ सकते हैं।

    gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

अधिक विवरण के लिए सर्वश्रेष्ठ उत्तर का संदर्भ लें या आप Apple से CAGradientLayer का अनुसरण कर सकते हैं

उम्मीद है कि यह किसी एक के लिए मदद है।

Comments

निम्नलिखित startPointऔर endPointबाएं से दाएं ग्रेडिएंट के लिए उपयोग करें : gradient.startPoint = CGPoint(x: 0.0, y: 0.5) gradient.endPoint = CGPoint(x: 1.0, y: 0.5)और ऊपर से नीचे तक: gradient.startPoint = CGPoint(x: 0.5, y: 0.0) gradient.endPoint = CGPoint(x: 0.5, y: 1.0)

— निज

Answer 9

UIViewइस कस्टम वर्ग के साथ विस्तार करें ।

---

GradientView.swift

import UIKit

class GradientView: UIView {

    // Default Colors
    var colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor()]

    override func drawRect(rect: CGRect) {

        // Must be set when the rect is drawn
        setGradient(colors[0], color2: colors[1])
    }

    func setGradient(color1: UIColor, color2: UIColor) {

        let context = UIGraphicsGetCurrentContext()
        let gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [color1.CGColor, color2.CGColor], [0, 1])!

        // Draw Path
        let path = UIBezierPath(rect: CGRectMake(0, 0, frame.width, frame.height))
        CGContextSaveGState(context)
        path.addClip()
        CGContextDrawLinearGradient(context, gradient, CGPointMake(frame.width / 2, 0), CGPointMake(frame.width / 2, frame.height), CGGradientDrawingOptions())
        CGContextRestoreGState(context)
    }

    override func layoutSubviews() {

        // Ensure view has a transparent background color (not required)
        backgroundColor = UIColor.clearColor()
    }

}

---

प्रयोग

gradientView.colors = [UIColor.blackColor().colorWithAlphaComponent(0.8), UIColor.clearColor()]

---

परिणाम

Comments

क्या कोई विशेष कारण है जिसे आप नहीं बुला रहे हैं super.drawRect()?

— राफेल

@Bearwithme no। super.drawRect()जोड़ा के साथ ठीक काम करना चाहिए ।

— माइकल

GradientView.swift के शीर्ष पर जोड़ने के लिए बेहतर है: @IBInspectable var topColor: UIColor = UIColor.lightGrayColor() @IBInspectable var bottomColor: UIColor = UIColor.blueColor()फिर आप सेटिंग्स पर देख सकते हैं विशेषता संपादक

— दिमित्री सेनशेंको

Answer 10

यह आसान है

    // MARK: - Gradient
extension CAGradientLayer {
    enum Point {
        case topLeft
        case centerLeft
        case bottomLeft
        case topCenter
        case center
        case bottomCenter
        case topRight
        case centerRight
        case bottomRight
        var point: CGPoint {
            switch self {
            case .topLeft:
                return CGPoint(x: 0, y: 0)
            case .centerLeft:
                return CGPoint(x: 0, y: 0.5)
            case .bottomLeft:
                return CGPoint(x: 0, y: 1.0)
            case .topCenter:
                return CGPoint(x: 0.5, y: 0)
            case .center:
                return CGPoint(x: 0.5, y: 0.5)
            case .bottomCenter:
                return CGPoint(x: 0.5, y: 1.0)
            case .topRight:
                return CGPoint(x: 1.0, y: 0.0)
            case .centerRight:
                return CGPoint(x: 1.0, y: 0.5)
            case .bottomRight:
                return CGPoint(x: 1.0, y: 1.0)
            }
        }
    }
    convenience init(start: Point, end: Point, colors: [CGColor], type: CAGradientLayerType) {
        self.init()
        self.startPoint = start.point
        self.endPoint = end.point
        self.colors = colors
        self.locations = (0..<colors.count).map(NSNumber.init)
        self.type = type
    }
}

इस तरह का उपयोग करें: -

let fistColor = UIColor.white
let lastColor = UIColor.black
let gradient = CAGradientLayer(start: .topLeft, end: .topRight, colors: [fistColor.cgColor, lastColor.cgColor], type: .radial)
gradient.frame = yourView.bounds
yourView.layer.addSublayer(gradient)

Comments

Enum Point के लिए वोट करें

— Tà Truhoada

Answer 11

यह कोड स्विफ्ट 3.0 के साथ काम करेगा

class GradientView: UIView {

    override open class var layerClass: AnyClass {
        get{
            return CAGradientLayer.classForCoder()
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let gradientLayer = self.layer as! CAGradientLayer
        let color1 = UIColor.white.withAlphaComponent(0.1).cgColor as CGColor
        let color2 = UIColor.white.withAlphaComponent(0.9).cgColor as CGColor
        gradientLayer.locations = [0.60, 1.0]
        gradientLayer.colors = [color2, color1]
    }
}

Comments

@ बालाजी क्या आप उपयोग का उदाहरण साझा कर सकते हैं ..? और एक UILabel के साथ उपयोग करने के लिए

— Abirami Bala

उपलेयर को एक UILabel में सम्मिलित करना पाठ को छुपाता है, इसलिए आप जो चाहते हैं उसे प्राप्त करने का सबसे अच्छा तरीका है लेबल और ग्रेडिएंट लेयर को एक UIView में जोड़ना।

— बालाजी मल्लिस्वामी

Answer 12

स्विफ्ट 4

एक दृश्य आउटलेट जोड़ें

@IBOutlet weak var gradientView: UIView!

दृश्य में ढाल जोड़ें

func setGradient() {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradient.locations = [0.0 , 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
    gradient.frame = gradientView.layer.frame
    gradientView.layer.insertSublayer(gradient, at: 0)
}

Comments

अगर gradientView.layer.frame (0,0) पर नहीं है, तो ढाल की परत विस्थापित हो जाती है। मैं gradientView.layer.bounds का उपयोग करने की सलाह दूंगा।

— वेदरनो

Answer 13

यदि आप RGBA के बजाय HEX का उपयोग करना चाहते हैं, तो बस एक नया खाली .swift खींचें और नीचे उल्लिखित कोड जोड़ें:

     import UIKit

    extension UIColor {
        convenience init(rgba: String) {
            var red:   CGFloat = 0.0
            var green: CGFloat = 0.0
            var blue:  CGFloat = 0.0
            var alpha: CGFloat = 1.0

            if rgba.hasPrefix("#") {
                let index   = advance(rgba.startIndex, 1)
                let hex     = rgba.substringFromIndex(index)
                let scanner = NSScanner(string: hex)
                var hexValue: CUnsignedLongLong = 0
                if scanner.scanHexLongLong(&hexValue) {
                    switch (count(hex)) {
                    case 3:
                        red   = CGFloat((hexValue & 0xF00) >> 8)       / 15.0
                        green = CGFloat((hexValue & 0x0F0) >> 4)       / 15.0
                        blue  = CGFloat(hexValue & 0x00F)              / 15.0
                    case 4:
                        red   = CGFloat((hexValue & 0xF000) >> 12)     / 15.0
                        green = CGFloat((hexValue & 0x0F00) >> 8)      / 15.0
                        blue  = CGFloat((hexValue & 0x00F0) >> 4)      / 15.0
                        alpha = CGFloat(hexValue & 0x000F)             / 15.0
                    case 6:
                        red   = CGFloat((hexValue & 0xFF0000) >> 16)   / 255.0
                        green = CGFloat((hexValue & 0x00FF00) >> 8)    / 255.0
                        blue  = CGFloat(hexValue & 0x0000FF)           / 255.0
                    case 8:
                        red   = CGFloat((hexValue & 0xFF000000) >> 24) / 255.0
                        green = CGFloat((hexValue & 0x00FF0000) >> 16) / 255.0
                        blue  = CGFloat((hexValue & 0x0000FF00) >> 8)  / 255.0
                        alpha = CGFloat(hexValue & 0x000000FF)         / 255.0
                    default:
                        print("Invalid RGB string, number of characters after '#' should be either 3, 4, 6 or 8")
                    }
                } else {
                    println("Scan hex error")
                }
            } else {
                print("Invalid RGB string, missing '#' as prefix")
            }
            self.init(red:red, green:green, blue:blue, alpha:alpha)
        }
}

इसी तरह, एक और खाली .swift फ़ाइल खींचें और नीचे दिए गए कोड जोड़ें:

    class Colors {
    let colorTop = UIColor(rgba: "##8968CD").CGColor
    let colorBottom = UIColor(rgba: "#5D478B").CGColor

    let gl: CAGradientLayer

    init() {
        gl = CAGradientLayer()
        gl.colors = [ colorTop, colorBottom]
        gl.locations = [ 0.0, 1.0]
    }
}

उसके बाद, देखने वाले नियंत्रक के तहत, कक्षा को इस तरह से अपने 'रंग' वर्ग को तत्काल:

let colors = Colors()

एक नया फ़ंक्शन जोड़ें:

func refresh() {
        view.backgroundColor = UIColor.clearColor()
        var backgroundLayer = colors.gl
        backgroundLayer.frame = view.frame
        view.layer.insertSublayer(backgroundLayer, atIndex: 0)
    }

उस फ़ंक्शन को देखने के लिए देखें

refresh()

यदि आप आरजीबी की तुलना में HEX का उपयोग करते हैं तो) बहुत आसान है। : डी

Answer 14

स्विफ्ट 3 - केवल बनावट और SKSpriteNode का उपयोग करता है, UIView की आवश्यकता नहीं है

import Foundation
import SpriteKit

class GradientSpriteNode : SKSpriteNode
{
    convenience init(size: CGSize, colors: [UIColor], locations: [CGFloat])
    {
        let texture = GradientSpriteNode.texture(size: size, colors: colors, locations: locations)
        self.init(texture: texture, color:SKColor.clear, size: texture.size())
    }

    private override init(texture: SKTexture!, color: SKColor, size: CGSize) {
        super.init(texture: texture, color: color, size: size)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private static func texture(size: CGSize, colors: [UIColor], locations: [CGFloat]) -> SKTexture
    {
        UIGraphicsBeginImageContext(size)
        let context = UIGraphicsGetCurrentContext()!
        let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors.map{$0.cgColor} as CFArray, locations: locations)!
        context.drawLinearGradient(gradient, start: CGPoint(x: size.width / 2, y: 0), end: CGPoint(x: size.width / 2, y: size.height), options: CGGradientDrawingOptions())
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return SKTexture(image: image!)

    }
}

उपयोग:

let gradient = GradientSpriteNode(
        size: CGSize(width: 100, height: 100),
        colors: [UIColor.red, UIColor.blue],
        locations: [0.0, 1.0])
addChild(gradient)

Comments

स्प्राइटिटेकनोड बनाम कैग्रैडिएन्लेयर का प्रदर्शन क्या है? छवि को प्रस्तुत करना ऐसा लगता है जैसे यह धीमा होगा।

— --ολ17ν.λαβέ

मैं अपने सिर के ऊपर से नहीं जानता, लेकिन आमतौर पर ca ** कक्षाएं स्प्राइट किट वालों की तुलना में बहुत अधिक प्रदर्शनकारी हैं।

— टेक्सूफ़

Answer 15

नीचे दिए गए कोड का उपयोग करें:

extension UIView {
func applyGradient(colours: [UIColor]) -> Void {
 let gradient: CAGradientLayer = CAGradientLayer()
 gradient.frame = self.bounds
 gradient.colors = colours.map { $0.cgColor }
 gradient.startPoint = CGPoint(x : 0.0, y : 0.5)
 gradient.endPoint = CGPoint(x :1.0, y: 0.5)
 self.layer.insertSublayer(gradient, at: 0)
 }
}

इस फ़ंक्शन को कॉल करें जैसे:

  self.mainView.applyGradient(colours: [.green, .blue])

Answer 16

बस दृश्य के फ़्रेम को निर्दिष्ट करें, जहां आप ढाल रंग दिखाना चाहते हैं।

let firstColor =  UIColor(red: 69/255, green: 90/255, blue: 195/255, alpha: 1.0).CGColor

 let secondColor = UIColor(red: 230/255, green: 44/255, blue: 75/255, alpha: 1.0).CGColor

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [ firstColor, secondColor]
    gradientLayer.locations = [ 0.0, 1.0]
    gradientLayer.frame = CGRectMake(0, 0, 375, 64)// You can mention frame here

    self.view.layer.addSublayer(gradientLayer)

Answer 17

यहाँ एक पुन: प्रयोज्य Util वर्ग फ़ाइल में इसे स्थापित करने के लिए एक भिन्नता है

अपने Xcode प्रोजेक्ट में:

1. एक नई स्विफ्ट क्लास बनाएं इसे UI_Util.swift कहें, और इसे निम्नानुसार पॉप्युलेट करें:

   import Foundation
   import UIKit
   
   class UI_Util {
   
       static func setGradientGreenBlue(uiView: UIView) {
   
           let colorTop =  UIColor(red: 15.0/255.0, green: 118.0/255.0, blue: 128.0/255.0, alpha: 1.0).cgColor
           let colorBottom = UIColor(red: 84.0/255.0, green: 187.0/255.0, blue: 187.0/255.0, alpha: 1.0).cgColor
   
           let gradientLayer = CAGradientLayer()
           gradientLayer.colors = [ colorTop, colorBottom]
           gradientLayer.locations = [ 0.0, 1.0]
           gradientLayer.frame = uiView.bounds
   
           uiView.layer.insertSublayer(gradientLayer, at: 0)
       }
   }

---

2. अब आप किसी भी ViewController से फ़ंक्शन को कॉल कर सकते हैं जैसे:

   class AbcViewController: UIViewController {
   
       override func viewDidLoad() {
           super.viewDidLoad()                
           UI_Util.setGradientGreen(uiView: self.view)
       }                

फंक्शन कोड के लिए कटवाल-दीपक के जवाब के लिए धन्यवाद

Answer 18

किसी भी वस्तु (क्षैतिज और ऊर्ध्वाधर) के लिए CAGradientLayer लागू करने के लिए तेजी से

func makeGradientColor(`for` object : AnyObject , startPoint : CGPoint , endPoint : CGPoint) -> CAGradientLayer {
    let gradient: CAGradientLayer = CAGradientLayer()

    gradient.colors = [(UIColor(red: 59.0/255.0, green: 187.0/255.0, blue: 182.0/255.0, alpha: 1.00).cgColor), (UIColor(red: 57.0/255.0, green: 174.0/255.0, blue: 236.0/255.0, alpha: 1.00).cgColor)]
    gradient.locations = [0.0 , 1.0]

    gradient.startPoint = startPoint
    gradient.endPoint = endPoint
    gradient.frame = CGRect(x: 0.0, y: 0.0, width: object.frame.size.width, height: object.frame.size.height)
    return gradient
}

कैसे इस्तेमाल करे

let start : CGPoint = CGPoint(x: 0.0, y: 1.0)
let end : CGPoint = CGPoint(x: 1.0, y: 1.0)
let gradient: CAGradientLayer = self.makeGradientColor(for: vwTop, startPoint: start, endPoint: end)
vwTop.layer.insertSublayer(gradient, at: 0)

let start1 : CGPoint = CGPoint(x: 1.0, y: 1.0)
let end1 : CGPoint = CGPoint(x: 1.0, y: 0.0)
let gradient1: CAGradientLayer = self.makeGradientColor(for: vwTop, startPoint: start1, endPoint: end1)
vwBottom.layer.insertSublayer(gradient1, at: 0)

आप यहां आउटपुट चेक कर सकते हैं

Answer 19

मैं एक दृश्य में एक ढाल जोड़ना चाहता था, और फिर इसे ऑटो-लेआउट का उपयोग करके लंगर डालना चाहता था।

    class GradientView: UIView {

    private let gradient: CAGradientLayer = {
        let layer = CAGradientLayer()
        let topColor: UIColor = UIColor(red:0.98, green:0.96, blue:0.93, alpha:0.5)
        let bottomColor: UIColor = UIColor.white
        layer.colors = [topColor.cgColor, bottomColor.cgColor]
        layer.locations = [0,1]
        return layer
    }()

    init() {
        super.init(frame: .zero)
        gradient.frame = frame
        layer.insertSublayer(gradient, at: 0)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradient.frame = bounds

    }
}

Answer 20

परत में ढाल जोड़ने के लिए, जोड़ें:

let layer = CAGradientLayer()
layer.frame = CGRect(x: 64, y: 64, width: 120, height: 120)
layer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
view.layer.addSublayer(layer)

Comments

कृपया इसके साथ कुछ स्पष्टीकरण भी जोड़ें।

— surajs1n

Answer 21

यहां एक तेजी से विस्तार किया गया है जहां आप मनमाने रंगों की किसी भी राशि को पारित कर सकते हैं। किसी एक को डालने से पहले यह किसी भी पिछले ग्रेडिएंट को हटा देगा और जरूरत पड़ने पर इसे और जोड़-तोड़ के लिए नई सम्मिलित ग्रेडिएंट लेयर को लौटा देगा:

    extension UIView {

    /**
     Given an Array of CGColor, it will:
        - Remove all sublayers of type CAGradientLayer.
        - Create and insert a new CAGradientLayer.

     - Parameters: 
        - colors: An Array of CGColor with the colors for the gradient fill

     - Returns: The newly created gradient CAGradientLayer
     */
    func layerGradient(colors c:[CGColor])->CAGradientLayer {
        self.layer.sublayers = self.layer.sublayers?.filter(){!($0 is CAGradientLayer)}
        let layer : CAGradientLayer = CAGradientLayer()
        layer.frame.size = self.frame.size
        layer.frame.origin = CGPointZero
        layer.colors = c
        self.layer.insertSublayer(layer, atIndex: 0)
        return layer
    }
}

Answer 22

क्लीनर कोड जो आपको कक्षा के किसी भी UIColorउदाहरण से गुजरने देता है GradientLayer:

class GradientLayer {

    let gradientLayer: CAGradientLayer
    let colorTop: CGColor
    let colorBottom: CGColor

    init(colorTop: UIColor, colorBottom: UIColor) {
        self.colorTop = colorTop.CGColor
        self.colorBottom = colorBottom.CGColor
        gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop, colorBottom]
        gradientLayer.locations = [0.0, 1.0]
    }
}

Answer 23

स्विफ्ट 3 पर एक्सटेंशन का उपयोग करना आसान है

extension CALayer {
    func addGradienBorder(colors:[UIColor] = [UIColor.red,UIColor.blue], width:CGFloat = 1) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame =  CGRect(origin: .zero, size: self.bounds.size)
        gradientLayer.startPoint = CGPoint(x:0.0, y:0.5)
        gradientLayer.endPoint = CGPoint(x:1.0, y:0.5)
        gradientLayer.colors = colors.map({$0.cgColor})

        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = width
        shapeLayer.path = UIBezierPath(rect: self.bounds).cgPath
        shapeLayer.fillColor = nil
        shapeLayer.strokeColor = UIColor.black.cgColor
        gradientLayer.mask = shapeLayer

        self.addSublayer(gradientLayer)
    }
}

आपके विचार के लिए उपयोग, उदाहरण

yourView.addGradienBorder(color: UIColor.black, opacity: 0.1, offset: CGSize(width:2 , height: 5), radius: 3, viewCornerRadius: 3.0)

Answer 24

यदि आपके पास संग्रह (मल्टीपल व्यू) है तो ऐसा करें

  func setGradientBackground() {
    let v:UIView
    for v in viewgradian
    //here viewgradian is your view Collection Outlet name
    {
        let layer:CALayer
        var arr = [AnyObject]()
        for layer in v.layer.sublayers!
        {
           arr.append(layer)
        }

        let colorTop = UIColor(red: 216.0/255.0, green: 240.0/255.0, blue: 244.0/255.0, alpha: 1.0).cgColor
        let colorBottom = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [ colorBottom, colorTop]
        gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.frame = v.bounds
        v.layer.insertSublayer(gradientLayer, at: 0)
    }
}

Answer 25

गिरगिट ( https://github.com/viccalexander/Chameleon ) नामक एक पुस्तकालय है, जिसका उपयोग ढाल वाले रंगों के लिए किया जा सकता है। यहां तक ​​कि इसे लागू करने के लिए ढाल की शैली भी है। इस तरह आप इसे स्विफ्ट 4 पॉडफाइल पॉड 'गिरगिटफ्रेमवर्क / स्विफ्ट' में जोड़ सकते हैं: git => ' https://github.com/ViccAlexander/Chameleon.git ': शाखा = 'wip / स्विफ्ट 4'

import ChameleonFramework

let colors:[UIColor] = [
  UIColor.flatPurpleColorDark(), 
  UIColor.flatWhiteColor()
]
view.backgroundColor = GradientColor(.TopToBottom, frame: view.frame, colors: colors)

Answer 26

जवाब के एक उद्देश्य सी संस्करण चाहने वालों के लिए। परीक्षण किया और iOS13 पर काम करता है

// Done here so that constraints have completed and the frame is correct.
- (void) viewDidLayoutSubviews { 
    [super viewDidLayoutSubviews];
    UIColor *colorTop = [UIColor colorWithRed:(CGFloat)192.0/255.0 green: 38.0/255.0 blue: 42.0/255.0 alpha:1.0];
    UIColor *colorBottom = [UIColor colorWithRed: 35.0/255.0 green: 2.0/255.0 blue: 2.0/255.0 alpha: 1.0];
    CAGradientLayer *gl = [CAGradientLayer new];
    [gl setColors:@[(id)[colorTop CGColor], (id)[colorBottom CGColor]]];
    [gl setLocations:@[@0.0f, @1.0f]];
    self.view.backgroundColor = [UIColor clearColor];
    CALayer *backgroundLayer = gl;
    backgroundLayer.frame = self.view.frame;
    [self.view.layer insertSublayer:backgroundLayer atIndex:0];
}

Answer 27

एक बात मैंने देखी कि आप टेक्स्ट को क्लीयर किए बिना एक UILabel में ग्रेडिएंट नहीं जोड़ सकते। UIButton का उपयोग करने और उपयोगकर्ता सहभागिता को अक्षम करने के लिए एक सरल समाधान है।

Answer 28

स्विफ्टयूआई: आप LinearGradientसंरचना को पहले तत्व के रूप में उपयोग कर सकते हैं ZStack। के "नीचे" के रूप में ZStack, यह पृष्ठभूमि के रंग के रूप में काम करेगा। AngularGradientऔर RadialGradientभी उपलब्ध हैं।

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom)
                .edgesIgnoringSafeArea(.all)
            // Put other content here; it will appear on top of the background gradient
        }
    }
}

Answer 29

मैंने रोहित सिसोदिया और एमजीएम उत्तरों को मिलाया

// MARK: - Gradient

public enum CAGradientPoint {
    case topLeft
    case centerLeft
    case bottomLeft
    case topCenter
    case center
    case bottomCenter
    case topRight
    case centerRight
    case bottomRight
    var point: CGPoint {
        switch self {
        case .topLeft:
            return CGPoint(x: 0, y: 0)
        case .centerLeft:
            return CGPoint(x: 0, y: 0.5)
        case .bottomLeft:
            return CGPoint(x: 0, y: 1.0)
        case .topCenter:
            return CGPoint(x: 0.5, y: 0)
        case .center:
            return CGPoint(x: 0.5, y: 0.5)
        case .bottomCenter:
            return CGPoint(x: 0.5, y: 1.0)
        case .topRight:
            return CGPoint(x: 1.0, y: 0.0)
        case .centerRight:
            return CGPoint(x: 1.0, y: 0.5)
        case .bottomRight:
            return CGPoint(x: 1.0, y: 1.0)
        }
    }
}

extension CAGradientLayer {

    convenience init(start: CAGradientPoint, end: CAGradientPoint, colors: [CGColor], type: CAGradientLayerType) {
        self.init()
        self.frame.origin = CGPoint.zero
        self.startPoint = start.point
        self.endPoint = end.point
        self.colors = colors
        self.locations = (0..<colors.count).map(NSNumber.init)
        self.type = type
    }
}

extension UIView {

    func layerGradient(startPoint:CAGradientPoint, endPoint:CAGradientPoint ,colorArray:[CGColor], type:CAGradientLayerType ) {
        let gradient = CAGradientLayer(start: .topLeft, end: .topRight, colors: colorArray, type: type)
        gradient.frame.size = self.frame.size
        self.layer.insertSublayer(gradient, at: 0)
    }
}

उपयोग लिखने के लिए: -

        btnUrdu.layer.cornerRadius = 25
        btnUrdu.layer.masksToBounds = true 
        btnUrdu.layerGradient(startPoint: .centerRight, endPoint: .centerLeft, colorArray: [UIColor.appBlue.cgColor, UIColor.appLightBlue.cgColor], type: .axial)

आउटपुट: