无边框的Swift文本框

Question

我是swift的新手。您的帮助将非常感激。

我的应用程序中有两个文本框。我如何创建与下面的图片中给出的相同的UI。

我想在屏幕截图中给出的边框下方只有一个边框来创建文本区域。

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

Answer 1

@IBOutlet var textField: UITextField! { 
    didSet { 
    let border = CALayer() 
    let width: CGFloat = 1 // this manipulates the border's width 
    border.borderColor = UIColor.darkGray.cgColor 
    border.frame = CGRect(x: 0, y: textField.frame.size.height - width, 
     width: textField.frame.size.width, height: textField.frame.size.height) 

    border.borderWidth = width 
    textField.layer.addSublayer(border) 
    textField.layer.masksToBounds = true 
    } 
} 

Answer 2

创建的UITextField的一个子类，所以你可以不用必须重新实现绘图代码重复使用多个视图此组件。通过@IBDesignable和@IBInspectable公开各种属性，您可以控制故事板中的颜色和厚度。另外 - 通过覆盖layoutSubviews实现“重绘”，这样如果您使用自动布局并且存在方向或基于约束的动画，边框将会调整。这一切都表示 - 实际上你的子类看起来是这样的：

import UIKit 

class Field: UITextField { 

    private let border = CAShapeLayer() 

    @IBInspectable var color: UIColor = UIColor.blue { 
     didSet { 
      border.strokeColor = color.cgColor 
     } 
    } 

    @IBInspectable var thickness: CGFloat = 1.0 { 
     didSet { 
      border.lineWidth = thickness 
     } 
    } 

    override func draw(_ rect: CGRect) { 
     self.borderStyle = .none 
     let from = CGPoint(x: 0, y: rect.height) 
     let here = CGPoint(x: rect.width, y: rect.height) 
     let path = borderPath(start: from, end: here).cgPath 
     border.path = path 
     border.strokeColor = color.cgColor 
     border.lineWidth = thickness 
     border.fillColor = nil 
     layer.addSublayer(border) 
    } 

    override func layoutSubviews() { 
     super.layoutSubviews() 
     let from = CGPoint(x: 0, y: bounds.height) 
     let here = CGPoint(x: bounds.width, y: bounds.height) 
     border.path = borderPath(start: from, end: here).cgPath 
    } 

    private func borderPath(start: CGPoint, end: CGPoint) -> UIBezierPath { 
     let path = UIBezierPath() 
     path.move(to: start) 
     path.addLine(to: end) 
     return path 
    } 
} 

然后，当你添加一个文本字段，以便您的故事板 - 更新中的身份检查该类使用这个子类，Field - 然后在属性检查器，可以设置颜色和厚度。

Answer 3

中的UITextField呼叫在底部添加边框以下功能：

func setTextFieldBorder(_ dimension: CGRect) -> CALayer { 
    let border = CALayer() 
    let width = CGFloat(2.0) 
    border.borderColor = UIColor.darkGray.cgColor 
    border.frame = CGRect(x: 0, y: dimension.size.height - width, width: dimension.size.width, height: dimension.size.height) 

    border.borderWidth = width 
    return border 

} 

如何设置的UITextField的边界在文本框下面的示例代码为：

txtDemo.layer.addSublayer(setTextFieldBorder(txtDemo.frame)) 
txtDemo.layer.masksToBounds = true 

哪里txtDemo是的UITextField的IBOutlet中。