创建一个带下划线的UILabel
2018-02-06 本文已影响156人
移动开发_ziank
所谓带下划线的UILabel
,其实就是文本加下划线,这里我分为三种情况来讨论:
-
文本内容只有一行;则可以在
UILabel
的下方添加一个新的UIView
,作为下划线; -
文本下方有下划线,可以通过使用
UILabel
的attributedText
属性来进行设置,实现文本下方有下划线的需求; -
根据
三种情况的区别UILabel
的行数,需要每一行都拥有全行的下划线,也就是类属于填空题的情况,这种情况也是我这里重点讲述的情况;
前两种情况没有什么可说的,直接上代码:
let label = UILabel(frame: CGRect(x: 50, y: 100, width: 200, height: 20))
label.textColor = UIColor.black
label.text = "下划线文本测试1"
self.view.addSubview(label)
let lineView = UIView(frame: CGRect(x: 50, y: 120, width: 200, height: 1))
lineView.backgroundColor = UIColor.black
self.view.addSubview(lineView)
let label2 = UILabel(frame: CGRect(x: 50, y: 150, width: 200, height: 70))
label2.textColor = UIColor.black
label2.numberOfLines = 0
let text = "下划线文本测试2 需要多行文本才能够看出区别来的"
label2.attributedText = NSAttributedString(string: text, attributes: [NSAttributedStringKey.underlineStyle : 1])
self.view.addSubview(label2)
第三种情况的话,我是构造了UILabel
的子类,在draw(_:)
中进行处理。
override func draw(_ rect: CGRect) {
// 正常绘制文本内容
super.draw(rect)
let context = UIGraphicsGetCurrentContext()
// 设置下划线宽度和颜色
context?.setLineWidth(1)
context?.setStrokeColor(UIColor.black.cgColor)
// 获取字体高度,这里不等于字体的size
let fontHeight = "A".heightWithConstrainedWidth(width: SCREEN_WIDTH, font: font)
// 下划线不可以画到UILabel之外,所以要设置最大高度
let maxHeight:CGFloat = rect.height
// 两个下划线之间的高度差
let stepHeight = fontHeight + lineSpacing
// 第一条下划线的位置:顶部留白 + 字体高度 + 10(下划线和文字距离)
var pointY:CGFloat = topInset + fontHeight + 10
// 画线
while pointY < maxHeight {
context?.move(to: CGPoint(x: 0, y: pointY))
context?.addLine(to: CGPoint(x: rect.width, y: pointY))
pointY += stepHeight
}
context?.strokePath()
}
需要注意的就是,在使用这种方法设置下划线的时候,一定要设置lineSpacing
,并使它的值大于下划线和文字距离,否则会导致下划线画在了下面一行的文字上。