UIButton底部阴影

Question

我有一个UIButton，它与标准的iOS键盘字母按钮非常相似。

我不确定如何只为底部图层创建阴影，就像iOS所做的那样。

我使用下面的代码，但我看到的阴影是在所有边缘，而不仅仅是底部：

CALayer *buttonLayer = [[CALayer alloc] init];
buttonLayer.shadowColor = [UIColor grayColor].CGColor;
buttonLayer.shadowOffset = CGSizeMake(0.f,1.f);
buttonLayer.masksToBounds = NO;
buttonLayer.shadowOpacity = 1.f;

我该怎样达到相同的效果呢？

- Neelesh

---

你看过这个网站吗： https://dev59.com/8WDVa4cB1Zd3GeqPepF4 - Yaser

我认为你也想将shadowRadius设置为0。 - Aaron

此外，默认情况下 maskToBounds 为 NO。 - Aaron

Answer 1

您可以混合使用cornerRadius和shadow属性。我在iOS 8上进行了测试。

Objective-C:

[self.globeButton setImage:[UIImage imageNamed:@"Globe"] forState:UIControlStateNormal];
self.globeButton.backgroundColor = [UIColor colorWithRed:171 green:178 blue:186 alpha:1.0f];
// Shadow and Radius
self.globeButton.layer.shadowColor = [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.25f] CGColor];
self.globeButton.layer.shadowOffset = CGSizeMake(0, 2.0f);
self.globeButton.layer.shadowOpacity = 1.0f;
self.globeButton.layer.shadowRadius = 0.0f;
self.globeButton.layer.masksToBounds = NO;
self.globeButton.layer.cornerRadius = 4.0f;

Swift：

globeButton.setImage(UIImage(named: "Globe"), for: .normal)
globeButton.backgroundColor = UIColor(red: 171/255, green: 178/255, blue: 186/255, alpha: 1.0)
// Shadow Color and Radius
globeButton.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
globeButton.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
globeButton.layer.shadowOpacity = 1.0
globeButton.layer.shadowRadius = 0.0
globeButton.layer.masksToBounds = false
globeButton.layer.cornerRadius = 4.0

结果：

- ricardopereira

---

它可以工作，但如果您在自定义键盘中使用此代码，则辅助触控会出现延迟。 - TomSawyer

@MarkMoeykens 嗯，我在Xcode 8.2和iOS 10.2上尝试了完全相同的代码，它是可以工作的。你确定你没有漏掉什么吗？ - ricardopereira

请确保不要设置globe.clipsToBounds = true。 - Quang Nguyen

"CGSizeMake" 在 Swift 中不可用。 - Umit Kaya

CGSize（宽度：0.0，高度：2.0） - Yogesh Patel

Answer 2

SWIFT 3

import UIKit

class ButtonWithShadow: UIButton {

    override func draw(_ rect: CGRect) {
        updateLayerProperties()
    }

    func updateLayerProperties() {
        self.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
        self.layer.shadowOffset = CGSize(width: 0, height: 3)
        self.layer.shadowOpacity = 1.0
        self.layer.shadowRadius = 10.0
        self.layer.masksToBounds = false
    }

}

!! 仅当您不需要同时拥有圆角和阴影时使用。否则请查看此链接。

- Nike Kov

Answer 3

请确保还将shadowRadius设置为0：

假设有一个名为button的UIButton属性，将其支持层属性设置如下：

self.button.layer.shadowColor = [UIColor grayColor].CGColor;
self.button.layer.shadowOffset = CGSizeMake(0, 1.0);
self.button.layer.shadowOpacity = 1.0;
self.button.layer.shadowRadius = 0.0;

- Aaron

Answer 4

我已经创建了一个IBInspectable扩展，可以帮助您。

您可以直接从storyboard分配。

Swift 5

//MARK:- IBInspectable
extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }

    @IBInspectable
    var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.masksToBounds = false
            layer.shadowRadius = newValue
        }
    }

    @IBInspectable
    var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.masksToBounds = false
            layer.shadowOpacity = newValue
        }
    }

    @IBInspectable
    var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.masksToBounds = false
            layer.shadowOffset = newValue
        }
    }

    @IBInspectable
    var shadowColor: UIColor? {
        get {
            if let color = layer.shadowColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.shadowColor = color.cgColor
            } else {
                layer.shadowColor = nil
            }
        }
    }
}

- PinkeshGjr

---

这是关于编程的内容，需要将其从英语翻译成中文。请仅返回已翻译的文本：“这是关于UI视图的内容，他正在寻找UI按钮。” - Ben Smith

@BenSmith，Button 是 UIView 的子类。 - PinkeshGjr

编辑 - 把它正确地分配，抱歉我的失误。 - Ben Smith

你可以对它进行赋值。 - PinkeshGjr

@PinkeshGjr，你的扩展很棒，但为了避免与UILabel命名冲突，你应该更改shadowOffset和shadowColor的名称。 - Zeev Vax

Answer 5

查看底部阴影 Swift 4.2

viewTop.layer.shadowOffset = CGSize(width: 0, height: 1)
viewTop.layer.shadowColor = UIColor.lightGray.cgColor
viewTop.layer.shadowOpacity = 1
viewTop.layer.shadowRadius = 5
viewTop.layer.masksToBounds = false

- Srinivasan_iOS

---

非常好用，将其添加到一个带有参数的函数中，例如：func addShadow(toMy View : UIView){ // 上面的代码 }。 - Yash Bedi

Answer 6

你可以尝试使用以下代码： （抱歉，我只懂Swift，不知道Obj C。这段代码将在按钮底部添加阴影。

)

button.layer.masksToBounds = false
button.layer.shadowColor = UIColor(rgb: 0x000000, alpha: 1.0).CGColor
button.layer.shadowOpacity = 1.0
button.layer.shadowRadius = 0
button.layer.shadowOffset = CGSizeMake(0, 1.0)

- TomSawyer

Answer 7

在Swift 2.0中，可以在类声明之前或者在Swift文件函数中使用以下代码为UIView（UIButton）添加阴影：

extension UIView {

    func addShadowView(width:CGFloat=0.2, height:CGFloat=0.2, Opacidade:Float=0.7, maskToBounds:Bool=false, radius:CGFloat=0.5){
         self.layer.shadowColor = UIColor.blackColor().CGColor
         self.layer.shadowOffset = CGSize(width: width, height: height)
         self.layer.shadowRadius = radius
         self.layer.shadowOpacity = Opacidade
         self.layer.masksToBounds = maskToBounds
    }

}

在viewDidLoad方法中添加以下代码。

button.addShadowView()

- Pablo Ruan

Answer 8

圆角和阴影在同一层上的效果不佳。因此，您需要将“要圆角”的UIButton嵌入到UIView中。阴影将应用于此UIView。

以下代码是一个示例，生成其下面的图像：

import UIKit

class CustomButton: UIButton {

    required init(coder decoder: NSCoder) {
        super.init(coder: decoder)

        backgroundColor = UIColor.whiteColor()
    }

    override func drawRect(rect: CGRect) {
        updateLayerProperties()
    }

    func updateLayerProperties() {
        layer.masksToBounds = true
        layer.cornerRadius = 12.0

        //superview is your optional embedding UIView
        if let superview = superview {
            superview.backgroundColor = UIColor.clearColor()
            superview.layer.shadowColor = UIColor.darkGrayColor().CGColor
            superview.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 12.0).CGPath
            superview.layer.shadowOffset = CGSize(width: 2.0, height: 2.0)
            superview.layer.shadowOpacity = 1.0
            superview.layer.shadowRadius = 2
            superview.layer.masksToBounds = true
            superview.clipsToBounds = false
        }
    }

}

- Shardul

Answer 9

将此方法放入您的UIView扩展中，并尝试使用偏移量值。

func drawShadow(shadowColor: UIColor = UIColor.black, opacity: Float =
0.3, offset: CGSize, radius: CGFloat = 5, shouldRasterize : Bool = false) {
        self.layer.shadowColor = shadowColor.cgColor
        self.layer.shadowOpacity = opacity
        self.layer.shadowOffset = offset
        self.layer.shadowRadius = radius
        self.layer.shouldRasterize = shouldRasterize
    }

- Sajal Gupta

Answer 10

您可以尝试使用这段代码：

    LoveButtonOutlet.layer.backgroundColor = UIColor.white.cgColor
    LoveButtonOutlet.layer.cornerRadius = 10
    LoveButtonOutlet.layer.borderWidth = 2
    LoveButtonOutlet.layer.borderColor = UIColor.black.cgColor
    LoveButtonOutlet.layer.shadowOffset = CGSize(width: 0, height: 1)
    LoveButtonOutlet.layer.shadowColor = UIColor.darkGray.cgColor
    LoveButtonOutlet.layer.shadowOpacity = 1
    LoveButtonOutlet.layer.shadowRadius = 5
    LoveButtonOutlet.layer.masksToBounds = false

- Shahriar Hossain