Come aggiungere un'ombra esterna a un UIButton?

Question

Vorrei aggiungere un'ombra esterna a un UIButton. Ho provato ad usare le proprietà self.layer.shadow *. Queste proprietà funzionano in UIView, ma si comportano diversamente in UIButton. Lo apprezzerei davvero se potessi ottenere qualche suggerimento per disegnare l'ombra esterna. Grazie!

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

È possibile sottoclasse UIButton e sovrascrivere il metodo drawRect: e aggiungere manualmente un'ombra esterna. Questo è molto più lavoro e ora dovresti fare alcune cose su Quartz 2d, ma il risultato è esattamente quello che vuoi. Altrimenti potresti semplicemente aggiungere un'immagine, ma preferisco sottoclasse UIButton, perché è molto flessibile per quanto riguarda le dimensioni del pulsante, è più generale.

Answer 2

C'è solo un piccolo errore nella domanda che fa sì che l'ombra non venga visualizzata: masksToBounds:YES maschera anche l'ombra! Ecco il codice corretto:

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

Sfortunatamente, questo significa che non siamo in grado di mascherare il contenuto e hanno un ombra allo stesso tempo, senza trucchi.

Ricordarsi di #import <QuartzCore/QuartzCore.h>.

Answer 3

Ecco una sottoclasse che non solo crea l'ombra esterna, ma il pulsante si anima quando lo si preme.

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

Ecco una soluzione facile se si utilizza 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; 

appena preso a lavorare, e pensato che valeva la pena di distacco. Spero possa aiutare!

Answer 5

È possibile creare una sottoclasse e configurare i propri valori in Xcode

Di seguito è riportato un esempio:

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


}