【问题标题】:How to add shadow on UITextField with round Corners?如何在带有圆角的 UITextField 上添加阴影?
【发布时间】:2017-10-04 10:35:18
【问题描述】:

我想在UITextField 上实现一个带有圆角的阴影,如下图所示:

我的代码如下:

    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
    }

但是,我觉得少了点什么……

输出:

提前致谢!

【问题讨论】:

  • 这会添加一个边框,而不是阴影。
  • yaa.. 但是如何添加阴影??@the4kman
  • @UdayBabariya 添加这一行 self.textfiledDemo.borderStyle = .none

标签: ios swift uitextfield


【解决方案1】:

尝试下面的代码在roundRect文本域上实现阴影效果。

    //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文本字段Attributes inspector设置borderStyle。

来自真实设备的输出:

要实现投影效果:(与其他 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

输出:

【讨论】:

    【解决方案2】:

    您可以添加此扩展,然后使用“addShadow”方法为您的Textfield、标签、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】:

      使用下面的代码

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

      输出:

      【讨论】:

      • 它显示文本字段的外线...检查我的输出。
      • @UdayBabariya 删除边框宽度和颜色并使用文本字段白色,文本字段后面的视图为白色,以便您可以清楚地检查。
      【解决方案4】:

      试试这个:

      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
      

      【讨论】:

        猜你喜欢
        • 2018-05-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-06-12
        • 1970-01-01
        相关资源
        最近更新 更多