無邊框的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中。