2

Necesito poner al UIView un degradado axial como fondo de pantalla. Aquí un ejemplo

introducir la descripción de la imagen aquí

Estoy intentando con una extensión de UIVIEW

func addGradient(colors: [UIColor], locations: [NSNumber]? = nil, startPoint: CGPoint, endPoint : CGPoint) {
    let gradient: CAGradientLayer = CAGradientLayer()        
    gradient.frame = self.bounds
    gradient.name = "gradientLayer"
    gradient.colors = colors.map { $0.cgColor }
    gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradient.endPoint = CGPoint(x: 1.0, y: 1.1)
    gradient.locations = [1, 1]

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

y le empleo de esta forma

 self.backgroundLoginView.addGradient(
           colors: [Utils.Color.CELESTE, Utils.Color.COLOR_E8E8E8],
           startPoint: CGPoint.init(x: 1, y: 1),
           endPoint: CGPoint.init(x: 1, y: 1)
 )

Quedando así:

introducir la descripción de la imagen aquí

Pruebo la respuesta utilizando

@IBDesignable class DesignableView: UIView {
     @IBInspectable var gradientColor1: UIColor = UIColor.white {
        didSet{
            self.setGradient()
          }
     }

     @IBInspectable var gradientColor2: UIColor = UIColor.white {
         didSet{
             self.setGradient()
           }
     }

     @IBInspectable var gradientStartPoint: CGPoint = .zero {
         didSet{
             self.setGradient()
     }
}

@IBInspectable var gradientEndPoint: CGPoint = CGPoint(x: 0, y: 1) {
    didSet{
        self.setGradient()
    }
}

private func setGradient()
{
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [self.gradientColor1.cgColor, self.gradientColor2.cgColor]
    gradientLayer.startPoint = self.gradientStartPoint
    gradientLayer.endPoint = self.gradientEndPoint
    gradientLayer.frame = self.bounds
    if let topLayer = self.layer.sublayers?.first, topLayer is CAGradientLayer
    {
        topLayer.removeFromSuperlayer()
    }
    self.layer.addSublayer(gradientLayer)
}

En el .xib se ve bien

introducir la descripción de la imagen aquí

Aunque en el emulador se ve así :

2
  • Hay @BrunoSosaFastTag algunas soluciones en stackoverflow -de inglés- para el comportamiento expuesto en la pregunta, asimismo siento decir que por un tema de tiempo no las he podido probar en mi iMac. No obstante muchas de ellas coinciden en efectuar una función y/o clase de sobre escritura: override incluso algunas proponen no emplear los puntos start y end, dado que el target es usar gradiente en toda la pantalla. En mi opinión sería analizar e intentar los códigos en el Xcode que se describen en: Commented el 19 mar. 2019 a las 13:08
  • 1
    ¿Por qué la gradiente no cubre el ancho del view? inglés y Swift: Fondo de Gradiente para el UIView inglés para ir descartando opciones y sobre todo encontrar la solución a lo expuesto en la pregunta. Commented el 19 mar. 2019 a las 13:08

2 respuestas 2

0

No es una pregunta muy clara, pero a lo que comprendo necesitas esto:

https://hackernoon.com/color-it-with-gradients-ios-a4b374c3c79f

Aunque esta en ingles tiene pasos muy fáciles de seguir. Suerte!

3
  • Estoy siguiendo exctamente lo mismo y el resultado es un degradees que no completa la pantalla como indica de ejemplo de arriba Commented el 12 mar. 2019 a las 12:24
  • En el link que pasé viene un proyecto de prueba, intenta descargarlo y ver la diferencia con tu código, o subelo a un repo de Git para verlo y poder ayudarte con el
    – David Leal
    Commented el 12 mar. 2019 a las 22:16
  • 1
    El código fuente específicamente en esta ruta contiene el xcuserdata, esto crea muchos problemas mientras se realiza el pulling al branch de otros desarrolladores, por tanto es seguro ignorarlo o borrarlo, porque contiene básicamente configuraciones personales como: breakpoint, layout para interface de usuario, archivos abiertos, configuración de sanpshots, etc. fuente: ¿Es seguro ignorar xcuserdata? inglés Commented el 19 mar. 2019 a las 13:21
0

Puedes probar con este código. saludos atte.

import UIKit

class ViewController: UIViewController {

let primaryColor = UIColor(red: 210/255, green: 109/255, blue: 180/255, alpha: 1)
let secondaryColor = UIColor(red: 52/255, green: 148/255, blue: 230/255, alpha: 1)

override func viewDidLoad() {
    super.viewDidLoad()

    view.addGradient(topColor: primaryColor, bottomColor: secondaryColor)
}

}

extension UIView {

func addGradient(topColor: UIColor, bottomColor: UIColor) {
    let gradient = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = [topColor.cgColor,bottomColor.cgColor]
    gradient.locations = [0.0, 1.0]
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 0, y: 1)
    self.layer.insertSublayer(gradient, at: 0)
}

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.