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


185

मैं एक दृश्य के पृष्ठभूमि रंग (एक स्टोरीबोर्ड का मुख्य दृश्य) के रूप में एक ढाल लगाने की कोशिश कर रहा हूं। कोड चलता है, लेकिन कुछ भी नहीं बदलता है। मैं 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)
      }
    }
  }

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

जवाबों:


159

आपके द्वारा ढाल के लिए प्रदान किए जाने वाले रंग प्रकार के होने चाहिए 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]
    }
}

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

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

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

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

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

191

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()
    }

}

यहां छवि विवरण दर्ज करें


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

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


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

1
@AsadAmodi धन्यवाद
लियो डबस

80

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

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)

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

74

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

यहां छवि विवरण दर्ज करें

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)
}

यहां छवि विवरण दर्ज करें


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

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

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

बहुत बढ़िया ... !!!!
यश बेदी

22

में 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)

}

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

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

20

मैंने किसी भी दृश्य के लिए एक मूल ढाल लागू करने के लिए एक 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)
    }
}       

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

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

17

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

@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
    }
}

उपयोग:

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें


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

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

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

15

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

  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 का अनुसरण कर सकते हैं

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


निम्नलिखित 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)
निज

8

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()]


परिणाम

यहां छवि विवरण दर्ज करें


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

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

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

8

यह आसान है

    // 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)

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

5

यह कोड स्विफ्ट 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]
    }
}

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

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

5

स्विफ्ट 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)
}

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

3

यदि आप 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 का उपयोग करते हैं तो) बहुत आसान है। : डी


3

स्विफ्ट 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)

स्प्राइटिटेकनोड बनाम कैग्रैडिएन्लेयर का प्रदर्शन क्या है? छवि को प्रस्तुत करना ऐसा लगता है जैसे यह धीमा होगा।
--ολ17ν.λαβέ

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

2

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

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])

1

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

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)

1

यहाँ एक पुन: प्रयोज्य 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)
        }
    }

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

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

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


1

किसी भी वस्तु (क्षैतिज और ऊर्ध्वाधर) के लिए 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)

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


1

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

    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

    }
}

1

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

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)

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

0

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

    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
    }
}

0

क्लीनर कोड जो आपको कक्षा के किसी भी 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]
    }
}

0

स्विफ्ट 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)

0

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

  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)
    }
}

0

गिरगिट ( 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)

0

जवाब के एक उद्देश्य सी संस्करण चाहने वालों के लिए। परीक्षण किया और 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];
}

0

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


0

स्विफ्टयूआई: आप 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
        }
    }
}

0

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

// 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)

आउटपुट:

उत्पादन

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.