Underline UILabel text

Question

I have UILabel whose string is being set at runtime. The text in UILabel is centrally aligned. I want to display an underline below the label text. But the line should have X same where the text begins (consider center alignment) and width equal to text width (not label width). For underline I have created a UIView and have set its background color. But I am not able to fix length of underline as I want.

Below is the code I have used:

 UILabel *blabel = [[UILabel alloc] initWithFrame:CGRectMake(XX, 6, 271, 26)];
    blabel.text = [m_BCListArray objectAtIndex:tagcount];
    blabel.textAlignment = UITextAlignmentCenter;
    blabel.backgroundColor = [UIColor clearColor];
    blabel.textColor = [UIColor whiteColor];
    blabel.font = [UIFont systemFontOfSize:14];
    [scrollDemo addSubview:blabel];

    //underline code
    CGSize expectedLabelSize = [[m_BCListArray objectAtIndex:tagcount] sizeWithFont:blabel.font constrainedToSize:blabel.frame.size lineBreakMode:UILineBreakModeWordWrap];
    CGRect newFrame = blabel.frame;
    newFrame.size.height = expectedLabelSize.height;
    blabel.frame = CGRectMake(blabel.frame.origin.x, blabel.frame.origin.y, 271, expectedLabelSize.height);
    blabel.numberOfLines = 1;
    //[blabel sizeToFit];
    int width=blabel.bounds.size.width;
    int height=blabel.bounds.size.height;

    UIView *viewUnderline=[[UIView alloc] init];
    int len = [[m_BCListArray objectAtIndex:tagcount]length];
    viewUnderline.frame=CGRectMake(XX, 26, len, 1);
    viewUnderline.backgroundColor=[UIColor whiteColor];
    [scrollDemo addSubview:viewUnderline];
    [viewUnderline release];

How can I fix the width of line according to text I get?

Using UIWebView u can pass html string and you can have all desired effects you have on webpage.. — rohan-patel, Sep 27 '11 at 07:29
do you want to use UIwebview??if yes then I can post two lines code..Maybe you that code.. — rohan-patel, Sep 27 '11 at 07:31
I think if you use webView then only you can get exact output . — Narayana Rao Routhu, Sep 27 '11 at 07:33
Search for "label" on this site; you'll find at least 3 or 4 that allow for easy label underlining. http://cocoacontrols.com/ — Luke, Sep 27 '11 at 07:52

score 13 · Accepted Answer · answered Sep 27 '11 at 07:44

UILabel *blabel = [[UILabel alloc] initWithFrame:CGRectMake(XX, 6, 271, 26)];
blabel.text = [m_BCListArray objectAtIndex:tagcount];
blabel.textAlignment = UITextAlignmentCenter;
blabel.backgroundColor = [UIColor clearColor];
blabel.textColor = [UIColor whiteColor];
blabel.font = [UIFont systemFontOfSize:14];
[scrollDemo addSubview:blabel];

//underline code
CGSize expectedLabelSize = [[m_BCListArray objectAtIndex:tagcount] sizeWithFont:blabel.font constrainedToSize:blabel.frame.size lineBreakMode:UILineBreakModeWordWrap];

UIView *viewUnderline=[[UIView alloc] init];
viewUnderline.frame=CGRectMake((blabel.frame.size.width - expectedLabelSize.width)/2,    expectedLabelSize.height + (blabel.frame.size.height - expectedLabelSize.height)/2,   expectedLabelSize.width, 1);
viewUnderline.backgroundColor=[UIColor whiteColor];
[scrollDemo addSubview:viewUnderline];
[viewUnderline release];

But this wont support for multiline Label – muthukumar Apr 09 '13 at 09:41 — muthukumar, Apr 09 '13 at 09:41

score 7 · Answer 2 · answered Oct 22 '12 at 23:11

Here's how I did it. Subclass UILabel and draw the line. Make sure you bring in QuartzCore

@interface MyUnderlinedLabel : UILabel
@end

#import <QuartzCore/QuartzCore.h>

@implementation MyUnderlinedLabel

-(void)drawRect:(CGRect)rect
{
    [super drawRect:rect];

    // Get bounds
    CGRect f = self.bounds;
    CGFloat yOff = f.origin.y + f.size.height - 3.0;

    // Calculate text width
    CGSize tWidth = [self.text sizeWithFont:self.font];

    // Draw underline
    CGContextRef con = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(con, self.textColor.CGColor);
    CGContextSetLineWidth(con, 1.0);
    CGContextMoveToPoint(con, f.origin.x, yOff);
    CGContextAddLineToPoint(con, f.origin.x + tWidth.width, yOff);
    CGContextStrokePath(con);
}

@end

score 5 · Answer 3 · answered Oct 16 '12 at 23:28

I just simplified the implementation a bit:

UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 320, 30)];
myLabel=[self setLabelUnderline:myLabel];

-(UILabel *)setLabelUnderline:(UILabel *)label{
    CGSize expectedLabelSize = [label.text sizeWithFont:label.font constrainedToSize:label.frame.size lineBreakMode:label.lineBreakMode];
    UIView *viewUnderline=[[UIView alloc] init];
    CGFloat xOrigin=0;
    switch (label.textAlignment) {
        case NSTextAlignmentCenter:
            xOrigin=(label.frame.size.width - expectedLabelSize.width)/2;
            break;
        case NSTextAlignmentLeft:
            xOrigin=0;
            break;
        case NSTextAlignmentRight:
            xOrigin=label.frame.size.width - expectedLabelSize.width;
            break;
        default:
            break;
    }
    viewUnderline.frame=CGRectMake(xOrigin,
                                   expectedLabelSize.height-1,
                                   expectedLabelSize.width,
                                   1);
    viewUnderline.backgroundColor=label.textColor;
    [label addSubview:viewUnderline];
    [viewUnderline release];
    return label;
}

really simple code snippet.... awesome – Suraj Mirajkar Sep 12 '13 at 05:54 — Suraj Mirajkar, Sep 12 '13 at 05:54

Underline UILabel text

3 Answers3

Linked