UIView 边框中的文本

Text in UIView Border

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

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

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

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

如果用户仔细观察此处的 "EMAIL" 和 "PASSWORD" UILabel,可以看出它没有透明背景,并且具有设置的背景颜色为了遮挡 UITextField 的边框。

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

  1. 使用核心图形手动绘制UITextField的边框,这必须是动态的,因为可以有不同长度的字符串(“登录”是5个字符,"Password"是8个)。这种方法似乎复杂,因为处理 CoreGraphics 可能很烦人。

我无法想出任何其他实现方法,但如果有更简单的解决方案,我将不胜感激。

试试这个扩展。我试过了,效果很好。

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

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

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

模拟器中的结果是

我不认为用圆角半径可以做到这一点。我能想到的唯一方法是进入 CoreGraphics,这通常比它值得的工作更多。看看here

我认为一种方法是绘制单独的边框:

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