UIButton 底部阴影

我有一个 UIButton，这是非常类似的标准 iOS 键盘字母按钮。

我不知道如何创建一个阴影只有底层喜欢 iOS 已经做了。

enter image description here

我使用下面的代码，但是我在所有的侧面都看到了阴影，而不仅仅是底部:

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

你能告诉我怎样才能达到同样的效果吗。

111457 次浏览
小开

您可以尝试使用以下代码: (对不起，我只知道迅捷，不是 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)
小开

还要确保将 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;
小开

角半径和阴影不能很好地混合在同一层。所以你将不得不把你的“被逼入绝境”的 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
}
}


}
小开
最佳答案

你可以混合角半径和阴影属性。我在 iOS8上测试过。

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

结果:

UIButton + iOS Keyboard style

小开

在 Swift 2.0中，在类声明之前用代码添加 shadow uiview (uibuton) ，或者在 Swift 文件函数中添加:

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
}


}

在 viewdload 中添加这段代码

button.addShadowView()
小开

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
}


}

button without rounded corners with shadow

只有在你不需要同时使用角点半径和阴影的情况下，否则观看 这个。

小开

将此方法放入 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
}
小开

查看底部阴影 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
小开

我已经创建了 IBInspectable扩展，将帮助您。

您可以直接从 storyboard分配

enter image description here

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

向角半径的按钮添加阴影:

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)


}


}


}
小开

您可以尝试使用以下代码:

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

提交答案