uiview - UIView 边框中的文本

Question

我目前正在开发一个 iOS 项目（使用 XCode 和 Swift）。我正在尝试为登录视图实现以下 UITextFields：

我在想不同的方法来做这件事，它们看起来都很复杂。如果有人知道一种超级简单的方法来做到这一点，或者如果已经有一个可用于创建这个 TextView 的 cocoapod，那就太棒了。

以下是我正在考虑的几种方法：

1. 只需制作一个带有边框的 UITextField 并放置一个背景与父视图的背景匹配的 UILabel，屏蔽掉“登录”和“密码”会出现的部分。这将隐藏这些部分的边界并解决问题。这种方法的问题在于背景是渐变、图案还是图像。这可以在以下图像中看到：

如果用户仔细查看此处的“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

我相信这样做的一种方法是绘制单独的边界：

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

Answer 3

我认为不可能用拐角半径来做到这一点。我能想象的唯一方法是进入CoreGraphics，这通常比它的价值更多。看看这里