Jak zastosować gradient do widoku tła aplikacji iOS Swift

186

Próbuję zastosować gradient jako kolor tła Widoku (główny widok scenorysu). Kod działa, ale nic się nie zmienia. Używam xCode Beta 2 i Swift.

Oto kod:

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

następnie w kontrolerze widoku:

  let colors = Colors()

  func refresh() {
        view.backgroundColor = UIColor.clearColor()
        var backgroundLayer = colors.gl
        backgroundLayer.frame = view.frame
        view.layer.insertSublayer(backgroundLayer, atIndex: 0)
      }
    }
  }
justingordon
źródło
1
Opublikowałem komponent, który ułatwia, możesz go używać za pomocą strąków kakaowych, sugeruję, ponieważ jest bardzo prosty i możesz go ustawić za pomocą konstruktora interfejsów na XCode. Zobacz więcej github.com/heuristisk/hkGraddiant
Anderson Santos Gusmão

Odpowiedzi:

161

Kolory, które udostępniasz gradientowi, muszą być typu CGColor. Więc ustaw tablicę CGColorna gl.colors.

Prawidłowy kod to:

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]
    }
}
Yatheesha BL
źródło
17
to był klucz: gl.frame = view.bounds;
justingordon
2
Otrzymuję ten błąd fatal error: array element cannot be bridged to Objective-Cpodczas przypisywania do .colorswłaściwości. Co może być z tym nie tak?
Tricertops,
3
Naprawiłem to. W Swift jest to błąd, wystarczy zapisać tablicę w zmiennej o wyraźnym typie, [AnyObject]a następnie przypisać ją do .colorswłaściwości.
Tricertops,
1
let c: Array <AnyObject> = [colorTop, colorBottom]
JP_
7
dla szybkiego 1.0 składnia byłabylet c: [AnyObject] = [colorTop, colorBottom]
Chris
193

Xcode 11 • Swift 5.1


Możesz zaprojektować własny widok gradientu w następujący sposób:

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

}

wprowadź opis zdjęcia tutaj

Leo Dabus
źródło
1
nie zapomnij zaimportować UIKit
djdance
Czy możesz wyjaśnić ten wiersz: zastąp klasę var layerClass: AnyClass {return CAGradientLayer.self}
Mostafa Mohamed Raafat
jaka może być maksymalna liczba lokalizacji / pozycji / ograniczników gradientu? wygląda na więcej niż pewną liczbę, iOS nie wyświetla gradientu. Strona jest pusta
Arun Prasad
1
@AsadAmodi Dziękuję
Leo Dabus
80

A jeśli chcesz zmienić kierunek gradientu, musisz użyć startPoint i endPoint.

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)
gasho
źródło
4
Jednym z problemów, z którymi możesz się z tym spotkać, jest to, że po dodaniu podwarstwy może on usiąść nad wszystkimi innymi przedmiotami, etykietami, obrazem itp. Aby temu zaradzić, stwórz kolejny widok, który znajduje się pod wszystkim i ustaw ograniczenia dla kontenera chcesz mieć gradient. Następnie ustaw gradient, który zostanie zastosowany w tym widoku. Widoki podrzędne zostaną następnie wstawione do tej warstwy i nie będą umieszczane nad niczym innym.
Micah Montoya
74

Wystarczy zmodyfikować powyższą odpowiedź.

wprowadź opis zdjęcia tutaj

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

Następnie wywołaj tę metodę w ciągu viewWillAppear

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

wprowadź opis zdjęcia tutaj

katwal-Dipak
źródło
1
To nakłada warstwę na istniejące elementy, więc nic nie widzę. Jakieś sugestie?
JamesG
19
wymienić self.view.layer.addSublayer(gradientLayer)z self.view.layer.insertSublayer(gradientLayer, at: 0)tego będzie umieścić warstwę „poniżej” wszystkich innych
WMR
Czy istnieje sposób na usunięcie tego efektu gradientu? Jak funkcja usuwania?
Tyler Rutt
Awesomee ... !!!!
Yash Bedi
22

W Swift3 spróbuj tego:

 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)

}
Mohammad Zaid Pathan
źródło
5
gradient.startPoint = CGPoint (x: 0,0, y: 1,0) gradient.endPoint = CGPoint (x: 1,0, y: 1,0) dla różnych pozycji gradientu.
Pan Mluvčí
colorWithAlphaComponent został przemianowany na withAlphaComponent
etayluz
20

Zrobiłem rozszerzenie UIView, aby zastosować podstawowy gradient do dowolnego widoku

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)
    }
}       
MGM
źródło
7
Mogę być nieporozumieniem, ale lepiej byłoby pozwolić użytkownikowi przekazać tablicę kolorów do tych funkcji zamiast na stałe je zakodować (chyba że zawsze chcesz zastosować ten sam gradient).
3
CGPointMake(0.0,0.0)można go zastąpić CGPointZerozwięzłością
JSmyth 10.04.2016
17

Mam te rozszerzenia:

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

Stosowanie:

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

ChikabuZ
źródło
najlepiej nie dodawać warstwy w drawRect, tylko w czasie konfiguracji
Fattie
1
dodanie tego do mojego widoku VC blokuje wszystko. Wszystkie elementy są ukryte pod gradientem. Co się
dzieje
1
Zmiana self.layer.addSublayer(layer)celu self.layer.insertSublayer(layer, at: 0)wydaje się zapobiegać gradient od kasował wszystko w konstruktora interfejsu (przynajmniej w moim jednym teście)
S.Walker
15

Spróbuj tego, działa dla mnie,

  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)

wprowadź opis zdjęcia tutaj

Możesz dodać punkt początkowy i końcowy koloru gradientu.

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

wprowadź opis zdjęcia tutaj

Aby uzyskać bardziej szczegółowy opis, patrz Najlepsza odpowiedź lub możesz śledzić CAGradientLayer od Apple

Mam nadzieję, że jest to pomoc dla kogoś.

Jaywant Khedkar
źródło
Użyj następującego startPointi endPointdla gradientu od lewej do prawej: gradient.startPoint = CGPoint(x: 0.0, y: 0.5) gradient.endPoint = CGPoint(x: 1.0, y: 0.5)i dla góry do dołu: gradient.startPoint = CGPoint(x: 0.5, y: 0.0) gradient.endPoint = CGPoint(x: 0.5, y: 1.0)
Nij
9

To jest łatwe

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

Użyj w ten sposób: -

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)
Rohit Sisodia
źródło
Głosuj na enum Point
Tà Truhoada
8

Rozszerz UIViewdzięki tej niestandardowej klasie.


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

}

Stosowanie

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


Wynik

wprowadź opis zdjęcia tutaj

Michael
źródło
Czy jest jakiś konkretny powód, dla którego nie dzwonisz super.drawRect()?
RaffAl
@Bearwithme no. Powinien działać dobrze z super.drawRect()dodanym.
Michael
Lepiej dodać do początku GradientView.swift: @IBInspectable var topColor: UIColor = UIColor.lightGrayColor() @IBInspectable var bottomColor: UIColor = UIColor.blueColor()Następnie możesz zobaczyć w ustawieniach Edytor atrybutów
Dmitry Senashenko
5

Ten kod będzie działał z Swift 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]
    }
}
Balaji Malliswamy
źródło
@Blahji Czy możesz podać przykład użycia ..? I do użycia z UILabel
Abirami Bala
Wstawienie podwarstwy do UILabel ukrywa tekst, więc najlepszym sposobem na uzyskanie tego, co chcesz, jest dodanie etykiety i warstwy gradientu do UIView.
Balaji Malliswamy,
5

Szybki 4

Dodaj ujście widokowe

@IBOutlet weak var gradientView: UIView!

Dodaj gradient do widoku

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)
}
Vivek Jayakumar
źródło
1
Jeśli gradientView.layer.frame nie ma wartości (0,0), warstwa gradientu zostanie przesunięta. Poleciłbym użyć gradientView.layer.bounds.
vedrano,
3

jeśli chcesz użyć HEX zamiast RGBA, po prostu przeciągnij nowy pusty .swift i dodaj poniższy kod:

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

podobnie przeciągnij kolejny pusty plik .swift i dodaj poniższy kod:

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

potem w widoku kontrolera, w ramach klasy utwórz instancję swojej klasy „Kolor” w następujący sposób:

let colors = Colors()

dodaj nową funkcję:

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

określ tę funkcję w viewDidLoad:

refresh()

gotowe :)) Używanie HEX jest zbyt łatwe w porównaniu do RGBA. :RE

Karta
źródło
3

Swift 3 - używa tylko tekstur i SKSpriteNode, nie wymaga 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!)

    }
}

Stosowanie:

let gradient = GradientSpriteNode(
        size: CGSize(width: 100, height: 100),
        colors: [UIColor.red, UIColor.blue],
        locations: [0.0, 1.0])
addChild(gradient)
texuf
źródło
Jaka jest wydajność spritekitnode w porównaniu do cagradientlayer? konieczność renderowania obrazu wydaje się być wolniejsza.
μολὼν.λαβέ
Nie wiem od samego początku, ale zwykle klasy ** są znacznie bardziej wydajne niż te z zestawu sprite.
texuf
2

Użyj poniższego kodu:

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

wywołaj tę funkcję jak:

  self.mainView.applyGradient(colours: [.green, .blue])
Pankaj Jangid
źródło
1

Po prostu określ ramkę widoku, w której chcesz pokazać kolor gradientu.

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)
Dupinder Kaur
źródło
1

Oto wariant konfiguracji tego w pliku klasy Util wielokrotnego użytku

W twoim projekcie Xcode:

  1. Utwórz nową klasę Swift, nazwij ją UI_Util.swift i wypełnij ją w następujący sposób:

    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. Teraz możesz wywołać tę funkcję z dowolnego ViewController w taki sposób:

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

Dzięki odpowiedzi katwal-Dipak na kod funkcji

Gene Bo
źródło
1

Aby szybko zastosować CAGradientLayer do dowolnego obiektu (poziomego i pionowego)

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
}

Jak używać

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)

Tutaj możesz sprawdzić dane wyjściowe

Hardik Thakkar
źródło
1

Chciałem dodać gradient do widoku, a następnie zakotwiczyć go za pomocą automatycznego układu.

    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

    }
}
r3dm4n
źródło
1

Aby dodać gradient do warstwy, dodaj:

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)
Alexandr Arsenyuk
źródło
Dodaj do tego również jakieś wyjaśnienie.
surajs1n
0

Oto szybkie rozszerzenie, w którym możesz przekazać dowolną liczbę dowolnych kolorów. Usunie wszystkie wcześniejsze gradienty przed wstawieniem jednego i zwróci nowo wstawioną warstwę gradientu do dalszej manipulacji w razie potrzeby:

    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
    }
}
Juan Carlos Ospina Gonzalez
źródło
0

Kod czyszczenia, który pozwala przekazać dowolne UIColorwystąpienie GradientLayerklasy:

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]
    }
}
Cesare
źródło
0

Łatwe w użyciu rozszerzenie w swift 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)
    }
}

użyj do swojego widoku, przykład

yourView.addGradienBorder(color: UIColor.black, opacity: 0.1, offset: CGSize(width:2 , height: 5), radius: 3, viewCornerRadius: 3.0)
Tarik
źródło
0

Jeśli masz widok Kolekcja (widok wielokrotny), zrób to

  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)
    }
}
iTALIYA
źródło
0

Istnieje biblioteka o nazwie Chameleon ( https://github.com/viccalexander/Chameleon ), której można używać do kolorów gradientu. Ma nawet style gradientu do zaimplementowania. Oto jak możesz go dodać w swift 4 podfile pod 'ChameleonFramework / Swift',: git => ' https://github.com/ViccAlexander/Chameleon.git ',: branch => 'wip / swift4'

import ChameleonFramework

let colors:[UIColor] = [
  UIColor.flatPurpleColorDark(), 
  UIColor.flatWhiteColor()
]
view.backgroundColor = GradientColor(.TopToBottom, frame: view.frame, colors: colors)
Tytuł Newt
źródło
0

Dla tych, którzy chcą otrzymać wersję celu C odpowiedzi. Testowany i działa na 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];
}
Seoras
źródło
0

Zauważyłem tylko, że nie można dodać gradientu do UILabel bez wyczyszczenia tekstu. Jednym prostym obejściem jest użycie przycisku UIB i wyłączenie interakcji użytkownika.

Henz
źródło
0

SwiftUI: Możesz użyć LinearGradientstruct jako pierwszego elementu w ZStack. Jako „spód” ZStackbędzie służył jako kolor tła. AngularGradienti RadialGradientsą również dostępne.

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
        }
    }
}
skmalm
źródło
0

I miesza się z Rohit Sisodia i MGM odpowiedzi

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

Aby użyć zapisu: -

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

Wynik:

Wynik

Varun Naharia
źródło