iphone - guidelines - menu ios

¿Cómo agregar una sombra paralela a un UIButton?

Question

Me gustaría agregar una sombra paralela a un UIButton. Intenté usar las propiedades self.layer.shadow *. Esas propiedades funcionan en UIView, pero se comportan de manera diferente en UIButton. Realmente apreciaría si pudiera obtener algún puntero para dibujar la sombra paralela. ¡Gracias!

self.layer.cornerRadius = 8.0f;
self.layer.masksToBounds = YES;
self.layer.borderWidth = 1.0f;

self.layer.shadowColor = [UIColor greenColor].CGColor;
self.layer.shadowOpacity = 0.8;
self.layer.shadowRadius = 12;
self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f);

Answer 1

Aquí hay una solución fácil si está usando un UIButton :

#import <QuartzCore/QuartzCore.h>

button.imageView.layer.cornerRadius = 7.0f;
button.layer.shadowRadius = 3.0f;
button.layer.shadowColor = [UIColor blackColor].CGColor;
button.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
button.layer.shadowOpacity = 0.5f;
button.layer.masksToBounds = NO;

Acabo de hacerlo funcionar, y pensé que valía la pena publicarlo. ¡Espero que ayude!

Answer 2

Aquí hay una subclase que no solo crea la sombra paralela, sino que el botón se anima cuando presiona sobre ella.

//
//  ShadowButton.h

#import <Foundation/Foundation.h>

@interface ShadowButton : UIButton {
}

@end

//
//  ShadowButton.m

#import "ShadowButton.h"
#import <QuartzCore/QuartzCore.h>

@implementation ShadowButton

-(void)setupView{

    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.5;
    self.layer.shadowRadius = 1;
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);

}

-(id)initWithFrame:(CGRect)frame{
    if((self = [super initWithFrame:frame])){
        [self setupView];
    }

    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder{
    if((self = [super initWithCoder:aDecoder])){
        [self setupView];
    }

    return self;
}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    self.contentEdgeInsets = UIEdgeInsetsMake(1.0,1.0,-1.0,-1.0);
    self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
    self.layer.shadowOpacity = 0.8;

    [super touchesBegan:touches withEvent:event];

}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    self.contentEdgeInsets = UIEdgeInsetsMake(0.0,0.0,0.0,0.0);
    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
    self.layer.shadowOpacity = 0.5;

    [super touchesEnded:touches withEvent:event];

}

@end

Answer 3

Puede crear una subclase y configurar sus valores en Xcode

A continuación hay un ejemplo:

import UIKit
import QuartzCore

@IBDesignable
class CustomButton: UIButton {

@IBInspectable var cornerRadius: CGFloat = 0 {
    didSet {
        layer.cornerRadius = cornerRadius
    }
}

@IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
}

@IBInspectable var borderColor: UIColor = UIColor.grayColor() {
    didSet {
        layer.borderColor = borderColor.CGColor
    }
}

@IBInspectable var shadowColor: UIColor = UIColor.grayColor() {
    didSet {
        layer.shadowColor = shadowColor.CGColor
    }
}

@IBInspectable var shadowOpacity: Float = 1.0 {
    didSet {
        layer.shadowOpacity = shadowOpacity
    }
}

@IBInspectable var shadowRadius: CGFloat = 1.0 {
    didSet {
        layer.shadowRadius = shadowRadius
    }
}

@IBInspectable var masksToBounds: Bool = true {
    didSet {
        layer.masksToBounds = masksToBounds
    }
}

@IBInspectable var shadowOffset: CGSize = CGSizeMake(12.0, 12.0) {
    didSet {
        layer.shadowOffset = shadowOffset
    }
}


 }

Answer 4

Puede subclonar UIButton y sobrescribir el método drawRect: y agregar manualmente una sombra paralela. Eso es mucho más trabajo y ahora debería hacer algunas cosas sobre el cuarzo 2d, pero el resultado es exactamente lo que quiere. De lo contrario, podría simplemente agregar una imagen, pero prefiero subclase UIButton, porque es muy flexible en cuanto al tamaño del botón, es más general.

Answer 5

Solo hay un pequeño error en la pregunta que hace que la sombra no se muestre: masksToBounds:YES también enmascara la sombra! Aquí está el código correcto:

self.layer.cornerRadius = 8.0f;
self.layer.masksToBounds = NO;
self.layer.borderWidth = 1.0f;

self.layer.shadowColor = [UIColor greenColor].CGColor;
self.layer.shadowOpacity = 0.8;
self.layer.shadowRadius = 12;
self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f);

Desafortunadamente, esto significa que no podemos enmascarar el contenido y tener una sombra al mismo tiempo sin trucos.

Recuerde #import <QuartzCore/QuartzCore.h> .