创建一个带下划线的UILabel

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容