UIButton 底部阴影答案

【问题标题】：UIButton bottom shadowUIButton 底部阴影
【发布时间】：2015-01-20 11:42:25
【问题描述】：

我有一个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;

你能告诉我如何达到同样的效果吗？提前致谢。

【问题讨论】：

你看过了吗：stackoverflow.com/questions/9336187/…
我想你也想将shadowRadius 设置为 0。
另外，maskToBounds 默认为NO。

标签： ios objective-c uibutton

【解决方案1】：

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

目标-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;

斯威夫特：

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

结果：

【讨论】：

它可以工作，但如果您在自定义键盘中使用此代码，辅助触摸会滞后。
不知道你是如何让它工作的，或者你发布答案后是否发生了变化。当我测试这个时，我没有看到圆角半径。只有当我将 layer.masksToBounds 或 clipsToBounds 设置为 true 时，我才会看到角半径，然后看不到阴影。在 Xcode 8、Swift 3、iOS 10 中测试。
确保不设置globe.clipsToBounds = true。
'CGSizeMake' 在 Swift 中不可用
CGSize(宽度: 0.0, 高度: 2.0)

【解决方案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
    }

}

!! 仅当您不需要同时使用圆角半径和阴影时。否则看this。

【讨论】：

【解决方案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;

【讨论】：

【解决方案4】：

我创建了IBInspectable 扩展程序，可以帮助您。

您可以直接从storyboard分配

斯威夫特 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
            }
        }
    }
}

【讨论】：

这是给uiview的，他要的是uibutton
@BenSmith Button 是 UIView 的子类。
编辑 - 正确分配对不起我的错
你可以分配它。
@PinkeshGjr 你的扩展很棒，但为了避免与 UILabel 的命名冲突，你应该更改 shadowOffset 和 shadowColor 的名称

【解决方案5】：

您可以尝试使用以下代码：（对不起，我只知道 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)

【讨论】：

【解决方案6】：

查看底部阴影迅捷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

【讨论】：

像一个魅力一样工作，将它添加到一个接受如下参数的函数中：func addShadow(toMy View : UIView){ // above code }

【解决方案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()

【讨论】：

【解决方案8】：

CornerRadius 和阴影不能在同一图层上很好地混合。因此，您必须将“被逼入绝境”的 UIButton 嵌入到 UIView 中。阴影将应用于此 UIView。

下面的代码，作为一个例子，产生它下面的图像：

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

}

【讨论】：

【解决方案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
    }

【讨论】：

【解决方案10】：

为具有圆角半径的按钮添加阴影：

final class CustomButton: UIButton {

    private var shadowLayer: CAShapeLayer!

    override func layoutSubviews() {
        super.layoutSubviews()

        if shadowLayer == nil {
            shadowLayer = CAShapeLayer()
            shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 33).cgPath
            if self.backgroundColor != nil {
                shadowLayer.fillColor = self.backgroundColor?.cgColor
            }
            else{
                shadowLayer.fillColor = UIColor.white.cgColor
            }
            shadowLayer.shadowColor = UIColor.gray.cgColor
            shadowLayer.shadowPath = shadowLayer.path
            shadowLayer.shadowOffset = CGSize(width: 0.0, height: 3.0)
            shadowLayer.shadowOpacity = 0.4
            shadowLayer.shadowRadius = 2

            layer.insertSublayer(shadowLayer, at: 0)

        }

    }

}

【讨论】：

【解决方案11】：

你可以试试这段代码：

    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

【讨论】：

【解决方案12】：

extension UIButton
{
    func setButtonCornerRadiusOnly(getValue:CGFloat)
    {
        self.layer.cornerRadius = getValue
        self.clipsToBounds = true
    }
    
    func setButtonBorderColorAndHeight(getHeight:CGFloat,getColor:UIColor)
    {
        self.layer.borderColor = getColor.cgColor
        self.layer.borderWidth = getHeight
    }
    
    func setBtnWithShadow()
    {
        self.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 1.5
        self.layer.cornerRadius = self.frame.size.height/2
        self.layer.masksToBounds =  false
    }
}

【讨论】：