2014-11-22 43 views
29

我有一個UIButton這是非常類似於標準的iOS鍵盤字母按鈕。UIButton bottom shadow

我不知道如何創建一個僅用於底層的陰影,就像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; 

能否請你告訴我如何達到同樣的效果。提前致謝。

+0

你有沒有看: http://stackoverflow.com/questions/9336187/ios-create-one-sideded-dropshadow – Yaser 2014-11-22 20:51:15

+0

我想你也想設置'shadowRadius' 0 – Aaron 2014-11-28 17:59:55

+0

另外'maskToBounds'在默認情況下是「NO」。 – Aaron 2014-11-28 18:06:39

回答

48

可以混合使用cornerRadius和陰影屬性。我測試了它在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"), forState: .Normal) 
globeButton.backgroundColor = UIColor(red: 171, green: 178, blue: 186, alpha: 1.0) 
// Shadow and Radius 
globeButton.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).CGColor 
globeButton.layer.shadowOffset = CGSizeMake(0.0, 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

+0

它的工作原理,但如果您在自定義鍵盤中使用此代碼,輔助觸摸將滯後。 – TomSawyer 2015-10-07 17:31:41

+0

不知道你是如何得到這個工作的,或者自從發佈你的答案以來發生了什麼變化。當我測試這個時,我看不到角落半徑。只有當我將layer.masksToBounds或clipsToBounds設置爲true時,纔會看到角落半徑,然後看不到陰影。在Xcode 8,Swift 3,iOS 10中測試過。 – 2017-05-16 17:34:21

+0

@MarkMoeykens嗯,我在iOS 10.2上嘗試了Xcode 8.2上相同的確切代碼,它正在工作。你確定你沒有錯過什麼嗎? – ricardopereira 2017-05-18 06:25:59

9

您可以使用此代碼嘗試: (對不起,我只知道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) 
18

同時務必設置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; 
2

CornerRadius和shado不要在同一層上混合好。所以你必須在UIView中嵌入你的「被限制」的UIButton。該陰影將應用於此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 
     } 
    } 

} 
8

在迅速2.0代碼添加陰影的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() 
16

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

!!僅當您不需要同時處理拐角半徑和陰影時。否則,請觀看this