uiview - UIView 边框中的文本

Question

我目前正在 iOS 中开发一个项目(使用 XCode 和 Swift)。我正在尝试为登录 View 实现以下 UITextFields:

我正在考虑不同的方法来做这件事，但它们看起来都很复杂。如果有人知道一种 super 简单的方法来执行此操作，或者如果已经有可用于创建此 TextView 的 cocoapod，那就太棒了。

以下是我想到的几种方法:

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

如果用户仔细查看此处的“EMAIL”和“PASSWORD”UILabel，可以看出它没有透明背景，而是设置了背景色以遮挡边框UITextField。

我不想这样做，而是想真正停止绘制边框，这让我想到了第二种可能的实现方法。

1. 使用核心图形手动绘制 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)
}

这是最初 Storyboard的样子。我使用了一个文本字段，然后在该文本字段上方放置了一个标签。

注意:我已经使用标签的宽度进行了一些计算。

模拟器中的结果是