আইওএস সুইফট অ্যাপের ব্যাকগ্রাউন্ড ভিউতে গ্রেডিয়েন্ট কীভাবে প্রয়োগ করবেন

Question

আমি একটি ভিউ (একটি স্টোরিবোর্ডের মূল দৃশ্য) এর পটভূমির রঙ হিসাবে গ্রেডিয়েন্ট প্রয়োগ করার চেষ্টা করছি। কোডটি চলে তবে কিছুই পরিবর্তন হয় না। আমি এক্সকোড বিটা 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। এতে কী ভুল হতে পারে?

— Tricertops

আমি এটা ঠিক করেছি। এটি সুইফটে একটি বাগ, কেবল সুস্পষ্ট প্রকারের সাথে অ্যারেটি ভেরিয়েবলের মধ্যে সঞ্চয় করুন [AnyObject]এবং তারপরে এটি .colorsসম্পত্তিতে বরাদ্দ করুন ।

— Tricertops

আসুন সি: অ্যারে <আনিঅবজেক্ট> = [রঙ টপ, রঙবটম]

— জেপি_

সুইফ্ট 1.0 এর জন্য বাক্য let c: [AnyObject] = [colorTop, colorBottom]

— ক্রিস

Answer 2

এক্সকোড 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

আপনি কি দয়া করে এই লাইনটি ব্যাখ্যা করতে পারেন: ক্লাস ভের স্তর স্তরকে ওভাররাইড করুন ক্লাস: যে কোনও ক্লাস {ফিরে CAGradientLayer.self}

— মোস্তফা মোহাম্মদ রাফাত

বিকাশকারী.অ্যাপল.

— com/ ডকুমেন্টেশন / ইউইকিট / ইউভিউ /…

সর্বাধিক সংখ্যক অবস্থান / অবস্থান / গ্রেডিয়েন্টস স্টপগুলি প্রযোজ্য হতে পারে? এটি নির্দিষ্ট সংখ্যার চেয়ে বেশি মনে হয়, আইওএস গ্রেডিয়েন্টটি সরবরাহ করে না। পৃষ্ঠাটি খালি

— অরুণ প্রসাদ

@ আসাদআমোদি আপনাকে ধন্যবাদ

— লিও ডাবাস

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

আপনি যে সমস্যার মুখোমুখি হতে পারেন তার মধ্যে একটি হ'ল আপনি যখন সাবলেয়ার যুক্ত করেন তখন এটি আপনার সমস্ত আইটেম, লেবেল, চিত্র ইত্যাদি উপর বসতে পারে এটি এড়াতে অন্য একটি দৃষ্টিভঙ্গি তৈরি করে যা সমস্ত কিছুর নীচে বসে তার ধারককে কনটেইনারটির মতো করে দেয় আপনি গ্রেডিয়েন্টটি চান want তারপরে এই ভিউতে গ্রেডিয়েন্টটি প্রয়োগ করতে সেট করুন। মতামতগুলি এই স্তরটিতে layerোকানো হবে এবং অন্য কোনও কিছুর উপরে বসে থাকবে না।

— মিকাহ মন্টোয়া

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

গ্রেডিয়েন্ট.স্টার্টপয়েন্ট = সিজিপিয়েন্ট (x: 0.0, y: 1.0) গ্রেডিয়েন্ট.endPoint = সিজিপিয়েন্ট (x: 1.0, y: 1.0) বিভিন্ন গ্রেডিয়েন্ট পজিশনের জন্য।

— পান মালুভা

colorWithAlphaComp घटक এর নাম পরিবর্তন করা হয়েছে আলফা কম্পোনেন্টের সাথে

— এটাইলুজ

Answer 6

যে কোনও ভিউতে বেসিক গ্রেডিয়েন্ট প্রয়োগ করতে আমি একটি ইউআইভিউ এক্সটেনশন করেছি

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

— ব্রেভিটির

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

সেরা drawRect মধ্যে স্তর যোগ না, শুধু সেটআপ সময়ে

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

আরও বিশদ বিবরণের জন্য সেরা উত্তরটি দেখুন বা আপনি অ্যাপল থেকে সিএগ্র্যাডিয়েন্টলায়ার অনুসরণ করতে পারেন

আশা এটি কারওর জন্য সহায়তা।

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)

— Nij

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

— রাফএল

পুনঃটুইট super.drawRect()যুক্ত সঙ্গে সূক্ষ্ম কাজ করা উচিত ।

— মাইকেল

গ্রেডিয়েন্টভিউ.সুইফ্টের শীর্ষে যুক্ত করা আরও ভাল: @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

— এনাম

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

@ ব্লাজি আপনি কি ব্যবহারের উদাহরণ ভাগ করতে পারেন ..? এবং একটি ইউআইএলবেল

— আবিরামি বালা

কোনও ইউআইএলবেলে সাবলেয়ার সন্নিবেশ করা পাঠ্যটি আড়াল করে, তাই আপনি যা চান তা পাওয়ার সেরা উপায় হ'ল ইউআইভিউতে লেবেল এবং গ্রেডিয়েন্ট স্তর যুক্ত করা।

— বালাজি মল্লস্বামী

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

গ্রেডিয়েন্টভিউ.লেয়ার.ফ্রেমটি (0,0) এ না থাকলে গ্রেডিয়েন্ট স্তরটি স্থানচ্যুত হয়। আমি গ্রেডিয়েন্টভিউ.লেয়ার.বাউন্ডগুলি ব্যবহার করার পরামর্শ দেব।

— বেদরানো

Answer 13

আপনি যদি আরজিবিএর পরিবর্তে এইচএক্স ব্যবহার করতে চান তবে কেবল একটি নতুন খালি .সুইફ્ટটি টেনে আনুন এবং নীচে উল্লিখিত কোড যুক্ত করুন:

     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 - কেবল টেক্সচার এবং এসকেএসপ্রাইটনোড ব্যবহার করে, ইউআইভিউয়ের প্রয়োজন হয় না

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

স্প্রেডিটাইটনড বনাম ক্যাগ্রেডিয়েন্ট্লেয়ারের পারফরম্যান্স কী? চিত্রটি রেন্ডার করে মনে হচ্ছে এটি ধীর হবে।

— λαβέ.λαβέ

আমি আমার মাথার শীর্ষটি জানি না, তবে সাধারণত সিএ ** ক্লাসগুলি স্প্রাইট কিট শ্রেণীর চেয়ে অনেক বেশি পারফরম্যান্ট হয়।

— টেক্সফুফ

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

পুনরায় ব্যবহারযোগ্য ব্যবহারের ক্লাস ফাইলে এটি সেট আপ করার জন্য এখানে একটি বৈকল্পিকতা রয়েছে

আপনার এক্সকোড প্রকল্পে:

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. এখন আপনি যে কোনও ভিউকন্ট্রোলার থেকে ফাংশনটি কল করতে পারেন:

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

ফাংশন কোডের জন্য কাঠওয়াল-দিপকের জবাবের জন্য ধন্যবাদ

Answer 18

কোনও অবজেক্টে সিগ্রাডিয়েন্টলায়ার প্রয়োগ করার জন্য দ্রুত (অনুভূমিক এবং উল্লম্ব)

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 ) নামে একটি গ্রন্থাগার রয়েছে যা গ্রেডিয়েন্ট রঙের জন্য ব্যবহার করতে পারে। এটি বাস্তবায়নের জন্য গ্রেডিয়েন্টের শৈলীও রয়েছে। আপনি এটি সুইফট ৪ টি পডফিল পোড 'চামেলিওন ফ্রেমওয়ার্ক / সুইফ্ট' এ যুক্ত করতে পারেন:: গিট => ' https://github.com/ViccAlexender/Chameleon.git ',: শাখা => 'wip / swift4'

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

একটি জিনিস আমি লক্ষ্য করেছি যে আপনি পাঠ্যটি সাফ না করে কোনও ইউআইএলবেলে গ্রেডিয়েন্ট যুক্ত করতে পারবেন না। একটি সাধারণ কাজ হ'ল একটি ইউআইবাটন ব্যবহার এবং ব্যবহারকারীর মিথস্ক্রিয়া অক্ষম করা।

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)

আউটপুট: