UIView邊框中的文字

Question

我目前正在iOS中使用一個項目（使用XCode和Swift）。 我正在嘗試為登錄視圖實現以下UITextField：

我正在考慮采取不同的方式來做這件事，他們看起來都很復雜。 如果有人知道一個超級簡單的方法，或者已經有一個cocoapod可以用來創建這個TextView，那將是驚人的。

以下是我想做的幾種方法：

1. 只需創建一個帶邊框的UITextField，然后放置一個背景與父視圖背景相匹配的UILabel，阻止顯示“Login”和“Password”的部分。 這會隱藏這些部分的邊界並解決問題。 這種方法的問題在於背景是漸變，圖案還是圖像。 這可以在以下圖像中看到：

如果用戶仔細查看“EMAIL”和“PASSWORD”UILabels，可以看到它沒有透明背景，並且它具有設置的背景顏色以阻擋UITextField的邊框。

而不是這樣做，我想實際上停止繪制邊界，這使我有了第二種可能的實施方法。

2. 使用核心圖形手動繪制UITextField的邊框，這必須是動態的，因為可以有不同的長度字符串（“登錄”是5個字符，“密碼”是8）。這種方法似乎很復雜，因為處理CoreGraphics可以是煩人。

我無法想出任何其他方法來實現這一點，但如果有一個不那么繁瑣的解決方案，我會很感激。

Answer 1

試試這個擴展。 我試過這個並且工作得很好。

extension UITextField {

  func leftBorder() {
    let leftBorder = CALayer()
    leftBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    leftBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(leftBorder)
  }

  func rightBorder() {
    let rightBorder = CALayer()
    rightBorder.frame = CGRect(x: CGFloat(self.frame.size.width - 1), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    rightBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(rightBorder)
  }

  func bottomBorder() {
    let bottomBorder = CALayer()
    bottomBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(self.frame.size.height - 1), width: CGFloat(self.frame.size.width), height: CGFloat(1.0))
    bottomBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(bottomBorder)
  }

  func topBorder1() {
    let topBorder = CALayer()
    topBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(25.0), height: CGFloat(1.0))
    topBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder)
  }

  func topBorder2(position: CGFloat) {
    let width = CGFloat(self.frame.size.width - position)
    let topBorder2 = CALayer()
    topBorder2.frame = CGRect(x: position, y: CGFloat(0), width: width, height: CGFloat(1.0))
    topBorder2.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder2)
  }

}

在viewDidLayoutSubviews方法中調用這些擴展方法，如下所示。

override func viewDidLayoutSubviews() {
    loginTextField.leftBorder()
    loginTextField.rightBorder()
    loginTextField.bottomBorder()
    loginTextField.topBorder1()
    let position = CGFloat(25 + loginLabel.frame.size.width + 10)
    loginTextField.topBorder2(position: position)
}

這就是最初的故事板的樣子。 我使用了一個文本字段，然后在該文本字段上方放置了一個標簽。

注意：我使用了標簽的寬度進行了一些計算。

而模擬器的結果是

Answer 2

我不認為可以用角半徑做到這一點。 我可以想象這樣做的唯一方法是進入CoreGraphics ，這通常比它的價值更多。 看看這里

Answer 3

我相信這樣做的一種方法是繪制單個邊框：

extension UITextField {
    func border(position: CGFloat) {
    let leftBorder = CALayer()
    leftBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    leftBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(leftBorder)
    let rightBorder = CALayer()
    rightBorder.frame = CGRect(x: CGFloat(self.frame.size.width - 1), y: CGFloat(0.0), width: CGFloat(1.0), height: CGFloat(self.frame.size.height))
    rightBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(rightBorder)
    let bottomBorder = CALayer()
    bottomBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(self.frame.size.height - 1), width: CGFloat(self.frame.size.width), height: CGFloat(1.0))
    bottomBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(bottomBorder)
    let topBorder = CALayer()
    topBorder.frame = CGRect(x: CGFloat(0.0), y: CGFloat(0.0), width: CGFloat(25.0), height: CGFloat(1.0))
    topBorder.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder)
    let width = CGFloat(self.frame.size.width - position)
    let topBorder2 = CALayer()
    topBorder2.frame = CGRect(x: position, y: CGFloat(0), width: width, height: CGFloat(1.0))
    topBorder2.backgroundColor = UIColor.black.cgColor
    self.layer.addSublayer(topBorder2)
}