Comment ajouter une ombre portée à un bouton UIB ?

Question

Je voudrais ajouter une ombre portée à un bouton UIB. J'ai essayé d'utiliser les propriétés self.layer.shadow*. Ces propriétés fonctionnent dans UIView, mais elles se comportent différemment dans UIButton. J'apprécierais vraiment si je pouvais obtenir des pointeurs pour dessiner l'ombre portée. Merci !

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

Il n'y a qu'une petite erreur dans la question qui fait que l'ombre ne s'affiche pas : masksToBounds:YES masque aussi l'ombre ! Voici le code correct :

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

Malheureusement, cela signifie que nous ne pouvons pas masquer le contenu et avoir une ombre en même temps sans astuces.

N'oubliez pas de #import <QuartzCore/QuartzCore.h> .

Answer 2

Voici une solution simple si vous utilisez une 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;

Je viens de le faire fonctionner, et j'ai pensé que ça valait la peine de le poster. J'espère que ça vous aidera !

Answer 3

Voici une sous-classe qui crée non seulement l'ombre portée, mais qui anime le bouton vers le bas lorsque vous appuyez dessus.

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

Vous pouvez créer une sous-classe et configurer ses valeurs dans Xcode

Voici un exemple :

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.gray {
    didSet {
        layer.borderColor = borderColor.cgColor
    }
}

@IBInspectable var shadowColor: UIColor = UIColor.gray {
    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 = CGSize(width: 12, height: 12) {
    didSet {
        layer.shadowOffset = shadowOffset
    }
}

 }

Answer 5

Vous pouvez sous-classer UIButton, écraser la méthode drawRect : et ajouter manuellement une ombre portée. C'est beaucoup plus de travail et vous devez savoir quelques trucs sur le quartz 2d, mais le résultat est exactement ce que vous voulez. Sinon, vous pourriez simplement ajouter une image, mais je préfère sous-classer UIButton, parce que c'est très flexible en ce qui concerne la taille du bouton, c'est plus général.