如何给一个UIButton添加阴影效果？

Question

我想给一个UIButton添加一个下拉阴影。我尝试使用self.layer.shadow*属性。这些属性在UIView中有效，但在UIButton中表现不同。如果有任何指针可以绘制下拉阴影，我将不胜感激。谢谢！

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

- Chris Frost

---

核心动画指南，http://developer.apple.com/mac/library/documentation/cocoa/conceptual/CoreAnimation_guide/Articles/LayerVisProps.html，表示：iPhone OS注意事项：出于性能考虑，iPhone OS不支持shadowColor、shadowOffset、shadowOpacity和shadowRadius属性。真遗憾。 - d_CFO

这些属性从 iOS 3.2 开始得到支持。谢谢。 - Quentin

没有什么能帮到我，只有这个链接。 - Borzh

Answer 1

这个问题只有一个小错误导致阴影没有显示：masksToBounds:YES也会遮盖住阴影！以下是正确的代码：

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

不幸的是，这意味着我们不能同时遮盖内容并拥有阴影，除非使用技巧。

记得要 #import <QuartzCore/QuartzCore.h>。

- fzwo

Answer 2

如果你使用的是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;

- msgambel

---

非常优雅的解决方案！谢谢！ - Vitalii Gozhenko

可以完美运行...即使我没有导入"<QuartzCore/QuartzCore.h>"。这对我来说是有效的...至于其他人，我不清楚。 - g212gs

如果您这样做，会导致辅助触控在自定义键盘中出现延迟。 - TomSawyer

Answer 3

这是一个子类，不仅可以创建下拉阴影，而且当您按下它时，按钮也会向下动画。

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

- avance

Answer 4

您可以创建一个子类并在Xcode中配置其值。

以下是一个示例：

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


 }

- Abdul Yasin

Answer 5

您可以通过子类化UIButton并重写drawRect:方法并手动添加一个阴影。这需要更多的工作，并且您应该了解一些关于quartz 2d的知识，但结果正是您想要的。 否则，您可以只添加一个图像，但我更喜欢子类化UIButton，因为它在按钮的大小方面非常灵活，更加通用。

- burki