如何使用圆角在UITextField上添加阴影?

时间:2017-10-04 10:35:19

标签: ios swift uitextfield

我希望在UITextField上实现一个带有圆角的阴影,如下图所示:enter image description here

我的代码如下:

    override func viewDidLoad() {
       super.viewDidLoad()
       textField.layer.cornerRadius =             textField.frame.size.height / 2
       textField.layer.borderWidth = 1.0
       textField.layer.borderColor = UIColor(white: 0.5, alpha: 0.3).cgColor
       textField.layer.shadowOpacity = 1
       textField.layer.shadowRadius = 4.0
       textField.layer.shadowColor = UIColor.black.cgColor
    }

但是,我认为缺少某些东西......

输出: enter image description here

提前感谢!

4 个答案:

答案 0 :(得分:3)

尝试使用以下代码在roundRect textfield上实现阴影效果。

    //Basic texfield Setup 
    textField.borderStyle = .none
    textField.backgroundColor = UIColor.groupTableViewBackground // Use anycolor that give you a 2d look.

    //To apply corner radius
    textField.layer.cornerRadius = textField.frame.size.height / 2

    //To apply border
    textField.layer.borderWidth = 0.25
    textField.layer.borderColor = UIColor.white.cgColor

    //To apply Shadow
    textField.layer.shadowOpacity = 1
    textField.layer.shadowRadius = 3.0
    textField.layer.shadowOffset = CGSize.zero // Use any CGSize
    textField.layer.shadowColor = UIColor.gray.cgColor

    //To apply padding
    let paddingView : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: textField.frame.height))
    textField.leftView = paddingView
    textField.leftViewMode = UITextFieldViewMode.always

注意:由于某种原因,textField.borderStyle = .none即使在viewWillLayoutSubviews()viewDidLayoutSubviews()中设置代码也无法生效。所以,我建议您通过storyBoard设置borderStyle textfield Attributes inspector

enter image description here

来自真实设备的输出:

enter image description here

实现投影效果(与其他 SO 帖子一样)

   textField.layer.borderColor = UIColor.black.withAlphaComponent(0.25).cgColor
   textField.layer.shadowOffset = CGSize(width: 0, height: 3)
   textField.layer.shadowColor = UIColor.black.cgColor //Any dark color

<强>输出:

enter image description here

答案 1 :(得分:1)

试试这个:

textField.layer.masksToBounds = false
textField.layer.shadowRadius = 4.0
textField.layer.shadowColor = UIColor.black.cgColor
textField.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
textField.layer.shadowOpacity = 1.0

答案 2 :(得分:1)

您可以添加此扩展程序,然后使用方法&#34; addShadow&#34;为你添加阴影Textfield,label,textview等...

extension UIView {    
func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
                   shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
                   shadowOpacity: Float = 0.4,
                   shadowRadius: CGFloat = 3.0) {
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
        layer.masksToBounds = false
    }
}

答案 3 :(得分:0)

使用以下代码

    textfield.layer.cornerRadius = textfield.frame.size.height/2
    textfield.clipsToBounds = false
    textfield.layer.shadowOpacity=0.4
    textfield.layer.shadowOffset = CGSize(width: 0, height: 0)

<强>输出:

enter image description here