使用swift 2仅使用顶部和底部边框的文本字段

Question

我有一个忘记密码的页面。它只有一个文本字段，要求用户填写他们的电子邮件地址。 Designer仅设计了带有顶部和底部边框的文本字段。我尝试从这里UITextField Only Top And Bottom Border回答，但在结果中它只显示文本字段的底部边框。

就像在图像中我想为顶部和底部创建一个灰色边框

Answer 1

要删除具有视图的战斗，您可以使用包含TextField的静态单元格创建tableView。 Voila完成了...顶部和底部边框免费提供，你将使用标准的苹果东西:)

如果您真的想要绘制图层而不是按照链接问题上的步骤绘制：

CALayer *topBorder = [CALayer layer];
topBorder.frame = CGRectMake(0, 0, self.frame.size.width, 1);
topBorder.backgroundColor = [UIColor blackColor].CGColor;
[myTextField.layer addSublayer:topBorder];

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0, self.frame.size.height - 1, self.frame.size.width, 1);
bottomBorder.backgroundColor = [UIColor blackColor].CGColor;
[myTextField.layer addSublayer:bottomBorder];

在Swift中：

let topBorder = CALayer()
topBorder.frame = CGRectMake(0, 0, bounds.size.width, 1)
topBorder.backgroundColor = UIColor.grayColor()
textField.layer.addSublayer(topBorder)

let bottomBorder = CALayer()
bottomBorder.frame = CGRectMake(0, bounds.size.height-1, bounds.size.width, 1)
bottomBorder.backgroundColor = UIColor.grayColor()
textField.layer.addSublayer(bottomBorder)

Answer 2

感谢@El Captain对@Bjorn Ro的宝贵评论和很好的回答，即使它是在Objective-c我认为。我对这个问题的回答是（我正在使用swift 2 Xcode 7）

覆盖swift文件中的函数viewDidLayoutSubviews（）。而代码也是如此

override func viewDidLayoutSubviews() {
// Creates the bottom border
        let borderBottom = CALayer()
        let borderWidth = CGFloat(2.0)
        borderBottom.borderColor = UIColor.grayColor().CGColor
        borderBottom.frame = CGRect(x: 0, y: forgotPasswordEmailText.frame.height - 1.0, width: forgotPasswordEmailText.frame.width , height: forgotPasswordEmailText.frame.height - 1.0)
        borderBottom.borderWidth = borderWidth
        forgotPasswordEmailText.layer.addSublayer(borderBottom)
        forgotPasswordEmailText.layer.masksToBounds = true

// Creates the Top border
        let borderTop = CALayer()
        borderTop.borderColor = UIColor.grayColor().CGColor
        borderTop.frame = CGRect(x: 0, y: 0, width: forgotPasswordEmailText.frame.width, height: 1)
        borderTop.borderWidth = borderWidth
        forgotPasswordEmailText.layer.addSublayer(borderTop)
        forgotPasswordEmailText.layer.masksToBounds = true

    }

forgotPasswordEmailText是用于输入电子邮件的文本字段

最终输出看起来像这样......带有灰色边框（iPhone 4s模拟器的屏幕截图）

Answer 3

到目前为止发布的程序化解决方案的好建议。但我想我会分享一个Interface Builder解决方案....

1）在视图控制器中创建视图集合

 @IBOutlet private var borderViews: [UIView]?

2）在界面构建器1px中创建2个UIViews高约束到文本字段周围的所需位置

3）将界面构建器中的2个视图连接到borderViews IBOutlet

4）使用setValue forKeyPath自定义两个视图的外观...例如，成功时您可能希望边框变为绿色

 setValue(UIColor.green, forKeyPath: "borderViews.backgroundColor")

Answer 4

在Swift 3中使用扩展：

1. 创建Swift文件

   import UIKit
   
   extension UITextField {
   
       func setBottomBorder() {
           self.borderStyle = .none
           self.layer.backgroundColor = UIColor.white.cgColor
           self.layer.masksToBounds = false
           self.layer.shadowColor = UIColor.gray.cgColor
           self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
           self.layer.shadowOpacity = 1.0
           self.layer.shadowRadius = 0.0
       }
   }

2. 随时随地打电话： PasswordField.setBottomBorder();

Answer 5

这是一个很好的，简单的Swift 4实现，可以处理调整视图的大小:)

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    viewToShadow.backgroundColor = .white
    viewToShadow.layer.masksToBounds = false

    viewToShadow.layer.sublayers?
        .filter { layer -> Bool in
            return layer.backgroundColor == UIColor.almostBlack.alpha(0.5).cgColor
        }
        .forEach { layer in
            layer.removeFromSuperlayer()
    }

    [CGRect(x: 0.0, y: 0.0, width: viewToShadow.bounds.width, height: 0.5),
     CGRect(x: 0.0, y: viewToShadow.bounds.height, width: viewToShadow.bounds.width, height: 0.5)]
        .forEach { frame in
            let layer = CALayer()
            layer.frame = frame
            layer.backgroundColor = UIColor.almostBlack.alpha(0.5).cgColor
            viewToShadow.layer.addSublayer(layer)
    }
}

Answer 6

使用方便的扩展

extension UITextField {
    func addTopBorder(){
        let bottomLine = CALayer()
        bottomLine.frame = CGRect.init(x: 0, y: 0, width: self.frame.size.width, height: 1)
        bottomLine.backgroundColor = UIColor.white.cgColor
        self.borderStyle = UITextField.BorderStyle.none
        self.layer.addSublayer(bottomLine)

    }

    func addBottomBorder(){
        let bottomLine = CALayer()
        bottomLine.frame = CGRect.init(x: 0, y: self.frame.size.height - 1, width: self.frame.size.width, height: 1)
        bottomLine.backgroundColor = UIColor.white.cgColor

        self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "-", attributes: [NSAttributedString.Key.foregroundColor : #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)])
        self.borderStyle = UITextField.BorderStyle.none
        self.layer.addSublayer(bottomLine)

    }
}

像这样在你的控制器中使用它

yourTextfield.addTopBorder()
yourTextfield.addBottomBorder()

并且不要忘记在主线程上使用它

  DispatchQueue.main.async {
            self.yourTextfield.addTopBorder()
           self.yourTextfield.addBottomBorder()
        }