ios - pelo - ¿Hay alguna forma de crear un degradado de color de fondo en el constructor de interfaz?

degradado significado

Question

Para mi aplicación, uso TableView y uso de UITableViewCells personalizadas.

Personalicé mis células a través del constructor de interfaz, no programáticamente. ¿Hay alguna manera de hacer que el color de fondo de mi celda personalizada sea un degradado en el constructor de interfaz?

Gracias.

Answer 1

Basado en la respuesta de etayluz, modifiqué un poco el código al tomar en cuenta la propiedad layerClass de una UIView , por lo que no necesita una capa separada como subcapa.

Creo que es mucho más limpio y también funciona con actualizaciones en vivo en Interface Builder.

@IBDesignable final class GradientView: UIView {

    @IBInspectable var startColor: UIColor = UIColor.red
    @IBInspectable var endColor: UIColor = UIColor.blue

    override class var layerClass: AnyClass {
        get {
            return CAGradientLayer.self
        }
    }

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

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

    private func setupGradient() {
        let gradient = self.layer as! CAGradientLayer
        gradient.colors = [startColor.cgColor, endColor.cgColor]
    }

}

Answer 2

Esto funciona para Swift 3.0: (Actualizado para Swift 4.0)

@IBDesignable
final class GradientView: UIView {
    @IBInspectable var startColor: UIColor = UIColor.clear
    @IBInspectable var endColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.frame = CGRect(x: CGFloat(0),
                                y: CGFloat(0),
                                width: superview!.frame.size.width,
                                height: superview!.frame.size.height)
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.zPosition = -1
        layer.addSublayer(gradient)
    }
}

Answer 3

No sé si hay una opción de degradado, pero podría agregar un UIImageView a la celda personalizada y agregar una imagen con un degradado.

Answer 4

No, no puedes. Puede usar UISegmentedControl con un segmento en las versiones anteriores de sdk y xCode: http://chris-software.com/index.php/2009/05/13/creating-a-nice-glass-buttons/ Pero ahora no puede hacer menos de dos segmentos en un UISegmentedControl. E incluso así, no podría cambiar los colores predeterminados de los botones sin codificación.

Answer 5

Para dibujar un degradado, deberá subclasificar y anular el drawRect mediante programación:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents
                             (colorSpace,
                              (const CGFloat[8]){1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f},
                              (const CGFloat[2]){0.0f,1.0f},
                              2);

    CGContextDrawLinearGradient(context,
                                gradient,
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMinY(self.bounds)),
                                CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMaxY(self.bounds)),
                                0);

    CGColorSpaceRelease(colorSpace);
    CGContextRestoreGState(context);
}

La forma más fácil , que mantiene sus celdas en el constructor de interfaz, es probablemente subclasificar una UIView para que dibuje un degradado en su drawRect y colocarlo en su celda detrás de las otras subvistas:

GradientView *gradientView = [[GradientView alloc] init];
gradientView.frame = cell.bounds;
[cell addSubview:gradientView];
[cell sendSubviewToBack:gradientView];

Sin embargo, la mejor manera de hacerlo es probablemente no usar el constructor de interfaz para esto y hacer una subclase de UITableViewCell. Para la personalización avanzada, los constructores de interfaces tienden a complicar más las cosas en mi experiencia. Sin embargo, eso depende de las preferencias personales.

Answer 6

Sí, esto es posible: crea una imagen en degradado con 1 X pix de altura. Establezca esto en backgroundColor para la celda.

cell.backgroundColor =  [UIColor colorWithPatternImage:[UIImage imageNamed:@"gradImage.png"]];

** Puede establecer el color del degradado con el código, pero su tiempo de proceso. Si llenas mejor entonces busca eso.

Answer 7

La respuesta por etayluz funciona bien, pero agregué un par de cambios:

1. Tamaño de degradado definido por los propios límites de capa, no la supervista.

2. Quite la capa de degradado en cada dibujo, para que no siga dibujando y agregando una nueva capa cuando sea necesario volver a dibujar (por ejemplo, llamando a .setNeedsDisplay() al girar).

   @IBDesignable final class MFGradientView: UIView {
   
       @IBInspectable var startColor: UIColor = UIColor.clear
       @IBInspectable var endColor: UIColor = UIColor.clear
   
       override func draw(_ rect: CGRect) {
          layer.sublayers?.first?.removeFromSuperlayer()
   
          let gradient: CAGradientLayer = CAGradientLayer()
          gradient.frame = CGRect(origin: CGPoint.zero, size: self.bounds.size)
          gradient.colors = [startColor.cgColor, endColor.cgColor]
          layer.insertSublayer(gradient, at: 0)
       }
   } 

Answer 8

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = yourView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)    [[UIColor whiteColor] CGColor], nil];
[yourView.layer insertSublayer:gradient atIndex:0];