ios - 如何制作多行、带下划线的 UITextView/UITextField？

Question

我想要一个带有横格纸外观的多行文本输入字段，其中每个输入行在文本将跨越 View 宽度的下方都有一个下划线。

例如:

这就是我想要做的设计。行数可能会改变。

我考虑过:

• 使用 UITextView 并放置带衬里的背景。
• 使用 TextField 并为每个 textField 添加下划线。

这些对我来说都不是理智的，所以我正在寻找可以让我指出正确方向的其他想法。

Answer 1

您可以使用 CoreGraphics 绘制线条:

class UnderlinedTextView: UITextView {
  var lineHeight: CGFloat = 13.8

  override var font: UIFont? {
    didSet {
      if let newFont = font {
        lineHeight = newFont.lineHeight
      }
    }
  }

  override func draw(_ rect: CGRect) {
    let ctx = UIGraphicsGetCurrentContext()
    ctx?.setStrokeColor(UIColor.black.cgColor)
    let numberOfLines = Int(rect.height / lineHeight)
    let topInset = textContainerInset.top

    for i in 1...numberOfLines {
      let y = topInset + CGFloat(i) * lineHeight

      let line = CGMutablePath()
      line.move(to: CGPoint(x: 0.0, y: y))
      line.addLine(to: CGPoint(x: rect.width, y: y))
      ctx?.addPath(line)
    }

    ctx?.strokePath()

    super.draw(rect)
  }
}