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

Question

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

像图片一样，我想为顶部和底部创建一个灰色边框

Answer 1

要删除带有视图的战斗，您可以创建一个带有包含 TextField 的静态单元格的 tableView。瞧，完成...顶部和底部边框免费提供，您将使用标准的苹果材料:)

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

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

迄今为止发布的关于程序化解决方案的好建议。但我想我会分享一个 Interfacebuilder 解决方案....

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

 @IBOutlet private var borderViews: [UIView]?

2) 在界面生成器中创建 2 个 UIViews 1px 高，限制在您希望它们在文本字段周围的位置

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()
        }