[英]UIButton bottom shadow
I have a UIButton
which is very similar to the standard iOS keyboard alphabet button.我有一个
UIButton
,它与标准的 iOS 键盘字母按钮非常相似。
I am not sure how to create a shadow only for the bottom layer like how iOS have done.我不确定如何像 iOS 那样只为底层创建阴影。
I use the below code, but I see a shadow on all the side, not just the bottom:我使用下面的代码,但我看到所有侧面都有阴影,而不仅仅是底部:
CALayer *buttonLayer = [[CALayer alloc] init];
buttonLayer.shadowColor = [UIColor grayColor].CGColor;
buttonLayer.shadowOffset = CGSizeMake(0.f,1.f);
buttonLayer.masksToBounds = NO;
buttonLayer.shadowOpacity = 1.f;
Can you please tell me how to achieve the same effect.你能告诉我如何达到同样的效果吗? Thanks in advance.
提前致谢。
You can mix the cornerRadius and shadow properties.您可以混合cornerRadius 和shadow 属性。 I tested it on iOS 8.
我在 iOS 8 上测试过。
Objective-C:目标-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
Result:结果:
SWIFT 3斯威夫特 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
}
}
!! !! Only if you do not need corner radius and shadow simultaneously.
仅当您不需要同时使用圆角半径和阴影时。 Otherwise watch this .
否则看这个。
Be sure to also set shadowRadius
to 0:确保还将
shadowRadius
设置为 0:
Given a UIButton
property named button
set its backing layer properties like this:给定一个名为
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;
I have created IBInspectable
extension that will help you.我创建了
IBInspectable
扩展来帮助你。
You can directly assign from storyboard
您可以直接从
storyboard
分配
Swift 5斯威夫特 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
}
}
}
}
You can try with this code: (sorry, i only know swift, not obj c. this code will add bottom shadow on your button.您可以尝试使用此代码:(抱歉,我只知道 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)
View bottom shadow swift 4.2查看底部阴影 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
in swift 2.0 add shadow uiview (uibutton) with code before class declaration or in swift file functions:在 swift 2.0 中,在类声明之前或在 swift 文件函数中添加带有代码的 shadow 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
}
}
in viewdidload add this code在 viewdidload 添加此代码
button.addShadowView()
CornerRadius and shadow don't mix well on the same layer. CornerRadius 和 shadow 在同一层上不能很好地混合。 So you will have to embed your "to be cornered" UIButton inside an UIView.
因此,您必须将“被逼入绝境”的 UIButton 嵌入到 UIView 中。 The shadow will be applied on this UIView.
阴影将应用于此 UIView。
The following code, given as an example, produces the image below it:作为示例给出的以下代码生成其下方的图像:
import UIKit导入 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
}
}
}
Put this method into your UIView extension and play with offset value将此方法放入您的 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
}
To add shadow to a button with corner radius:为具有圆角半径的按钮添加阴影:
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)
}
}
}
You can try with this code:您可以尝试使用以下代码:
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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.