创建一个带下划线的UILabel

2018-02-06  本文已影响156人  移动开发_ziank

所谓带下划线的UILabel,其实就是文本加下划线,这里我分为三种情况来讨论:

  1. 文本内容只有一行;则可以在UILabel的下方添加一个新的UIView,作为下划线;

  2. 文本下方有下划线,可以通过使用UILabelattributedText属性来进行设置,实现文本下方有下划线的需求;

  3. 根据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,并使它的值大于下划线和文字距离,否则会导致下划线画在了下面一行的文字上。

上一篇下一篇

猜你喜欢

热点阅读