Estoy trabajando en la creación de en busca de lujo UIbuttons mediante la adición de gradiente lineal para el botón. Sin embargo no estoy seguro de que en el índice al que tengo que añadir el gradiente. El código que tengo en la actualidad coloca el gradiente de la imagen/texto.

¿Cómo puedo insertar una subcapa a un UIButton bajo el texto/imagen de la subcapa? Es importante para mí mantener el texto y la imagen de un botón visible!

+(void)addLinearGradientToView:(UIView*)view TopColor:(UIColor*)topColor BottomColor:(UIColor*)bottomColor
{
    for(CALayer* layer in view.layer.sublayers)
    {
        if ([layer isKindOfClass:[CAGradientLayer class]])
        {
            [layer removeFromSuperlayer];
        }
    }
    CAGradientLayer* gradientLayer = [CAGradientLayer layer];

    gradientLayer.startPoint = CGPointMake(0.5, 0);
    gradientLayer.endPoint = CGPointMake(0.5,1);
    gradientLayer.frame = view.bounds;
    gradientLayer.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];
    //   [view.layer addSublayer:gradientLayer];
    if(view.layer.sublayers.count>0)
    {
        [view.layer insertSublayer:gradientLayer atIndex:view.layer.sublayers.count-2];
    }else {
        [view.layer addSublayer:gradientLayer];
    }
}
He escrito algunos ejemplos de código para hacer este tipo de cosas: github.com/kristopherjohnson/gradientbuttons

OriginalEl autor Alex Stone | 2012-05-14

4 Comentarios

  1. 46

    Añadir a la capa de tu botón personalizado:

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = customButton.layer.bounds;
    
    gradientLayer.colors = [NSArray arrayWithObjects:
                            (id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
                            (id)[UIColor colorWithWhite:0.4f alpha:0.5f].CGColor,
                            nil];
    
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0.0f],
                               [NSNumber numberWithFloat:1.0f],
                               nil];
    
    gradientLayer.cornerRadius = customButton.layer.cornerRadius;
    [customButton.layer addSublayer:gradientLayer];

    donde customButton es su costumbre UIButton.

    esta solución no está funcionando al 100%. Los botones de conseguir un degradado, pero que se desborda en la parte inferior de las esquinas. Ver: dropbox.com/s/mguy6owuayjgxvc/…, ¿Cómo puede ser solucionado?
    Se parece a un botón o su recipiente en un punto de vista es que falta el clipsToBounds = YES propiedad se establece. Esto clip el desbordamiento de ustedes están experimentando.
    [gradientLayer.masksToBounds = SÍ]; <– hacer que
    Lo sentimos, de responder a un hilo viejo – yo tenía el mismo problema que murze y accidentalmente había puesto mi código en el viewDidLoad() método, por lo que el botón de límites no había sido correctamente configurado todavía. Me mudé a viewDidAppear() y funciona correctamente.

    OriginalEl autor scord

  2. 9

    Para lo que usted está tratando de lograr, siempre inserto en el índice 0.

    Escribí un artículo sobre este tipo de cosas, recientemente, que puede encontrar interesante.

    Gracias! Mi texto faltaba después de agregar la capa de degradado, pero sólo en iOS 6, iOS 7 todavía mostraba el texto. Después de cambiar a Insertar ahora funciona para ambos.

    OriginalEl autor Mark Granoff

  3. 0

    Aquí está el código para lograr esto

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = <#View Variable Name#>.bounds;
    gradient.colors = [NSArray arrayWithObjects:(id)([UIColor colorWithRed:0.337 green:0.596 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.757 green:0.459 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.310 green:0.835 blue:1.000 alpha:1.000].CGColor),nil];
    gradient.startPoint = CGPointMake(0.5,0.0);
    gradient.endPoint = CGPointMake(0.5,1.0);
    [<#View Variable name#>.layer insertSublayer:gradient atIndex:0];

    Llegué a esta herramienta que facilita la selección de los colores y de forma automática la salida el código para el degradado. Muy útil usar todos los días
    itunes.apple.com/gb/app/gradient-creator/id1031070259?mt=12

    OriginalEl autor ggf85

  4. 0

    Swift 4

    @IBOutlet weak var gButton: UIButton!
    
    override func viewDidLoad() {
    
        super.viewDidLoad()
    
        let topGradientColor = UIColor.red
        let bottomGradientColor = UIColor.yellow
    
        let gradientLayer = CAGradientLayer()
    
        gradientLayer.frame = gButton.bounds
    
        gradientLayer.colors = [topGradientColor.cgColor, bottomGradientColor.cgColor]
    
        //Vertical
        //gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        //gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
    
        //Horizontal
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    
        gButton.layer.insertSublayer(gradientLayer, at: 0)
    }

    OriginalEl autor Gagandeep Gambhir

Dejar respuesta

Please enter your comment!
Please enter your name here