美文网首页
创建一个带下划线的UILabel

创建一个带下划线的UILabel

作者: 移动开发_ziank | 来源:发表于2018-02-06 10:43 被阅读156次

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

    相关文章

      网友评论

          本文标题:创建一个带下划线的UILabel

          本文链接:https://www.haomeiwen.com/subject/hgowzxtx.html