如何为UIButton添加投影?


76

我想向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);

核心动画指南developer.apple.com/mac/library/documentation/cocoa/conceptual/…表示:iPhone OS注意:作为性能考虑,iPhone OS不支持shadowColor,shadowOffset,shadowOpacity和shadowRadius属性。ang
d_CFO 2010年

从iOS 3.2开始,现在支持此属性。问候,
昆汀2010年

Answers:


100

在这个问题中只有一个微小的错误会导致阴影不显示: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>


61

如果您正在使用,这是一个简单的解决方案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;

刚开始工作,就认为值得发布。希望对您有所帮助!


1
非常优雅的解决方案!谢谢!
Vitaliy Gozhenko 2013年

1
工作完美...即使我不导入“ <QuartzCore / QuartzCore.h>”,它对我的​​工作..关于我不认识的其他人。
g212gs 2014年

如果您这样做,将在自定义键盘中使您的辅助触摸滞后
TomSawyer

39

这是一个子类,它不仅创建阴影,而且在您按下按钮时会使其动画。

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

3

您可以创建一个子类并在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
    }
}


 }

2

您可以继承UIButton并覆盖drawRect:方法,并手动添加阴影。要做的工作还很多,您现在应该了解有关石英2d的一些知识,但是结果正是您想要的。否则,您可以只添加一个图像,但是我更喜欢将UIButton子类化,因为它在按钮大小方面非常灵活,更通用。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.