Underlining a certain portion of a UILabel

Question

I need to underline a certain portion of a UILabel as the title suggests. For example: Please click ESPNSoccernet to read the latest Football News. I would like to underline the word ESPNSoccernet. This is because I want it to be clickable and it need to link to the website.

Need some guidance on doing this. If there is another way, do tell me...

Solution 1

for ios 6, you can use AttributedStrings

NSMutableAttributedString *yourString = [[NSMutableAttributedString alloc] initWithString:@"Please click ESPNSoccernet to read the latest Football News."];
[yourString addAttribute:NSUnderlineStyleAttributeName
                        value:[NSNumber numberWithInt:1]
                        range:(NSRange){0,25}];

label.attributedText = [yourString copy];

you can also use a 3rd party UILable library TTTAttributedLabel.

Solution 2

In Xcode:

1. Select the label and choose identity inspector.
2. In text choose Attributed instead of plain.
3. Now Select the portion of text you want to underline.
4. Select font and choose underline in fonts style.

There you go.

Solution 3

Swift 2.0:

1) Make a nsmutablestring with underline attribute and add to sampleLabel's text.

2) Add a tap gesture to sampleLabel and associate a method for further action.

override func viewDidLoad() {
    super.viewDidLoad()

    let newsString: NSMutableAttributedString = NSMutableAttributedString(string: "Tap here to read the latest Football News.")
    newsString.addAttributes([NSUnderlineStyleAttributeName: NSUnderlineStyle.StyleDouble.rawValue], range: NSMakeRange(4, 4))
    sampleLabel.attributedText = newsString.copy() as? NSAttributedString

    let tapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: "tapResponse:")
    tapGesture.numberOfTapsRequired = 1
    sampleLabel.userInteractionEnabled =  true
    sampleLabel.addGestureRecognizer(tapGesture)

}
func tapResponse(recognizer: UITapGestureRecognizer) {
    print("tap")
}

Solution 4

Well, i have done the same thing like this:

Make a custom button with text: ESPNSoccernet, and background clearColor Add a label as a subview with height 1 and some background color to this button, such that "ESPNSoccernet" looks underlined. Put the remaining text in a label adjacent to this button, so that it looks like a whole text.

Hope it helps!

Note: if you r doing only >iOS 6.0, you might wanna check the other answers.

Solution 5

UILabel is only capable of displaying plain text strings (in iOS 6 it can now also display NSAttributedStrings, but this will not work in older iOS versions, so it is best not to rely on this), so you will not be able to do this with a label.

You can look at TTTAttributedLabel for displaying attributed text (so you can add underlines and other formatting), but you will not be able to add hyperlinks with this class.

The options you have for a clickable segment of the string are basically:

1. Use a plain UILabel and overlay a UIButton over the part that you want to be clickable, or

2. Use TTTAttributedLabel to achieve the underline effect, and a UITapGestureRecognizer to detect and handle taps (note that this will capture taps on the entire label, not just the underlined part).

For iOS 6:

UILabel *label = [[UILabel alloc] init];
NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"Tap here to read the latest Football News."];
[string addAttribute:NSUnderlineStyleAttributeName value:@(1) range:NSMakeRange(4, 4)];
label.attributedText = [string copy];

For earlier iOS versions as well as iOS 6:

TTTAttributedLabel *label = [[TTTAttributedLabel alloc] init];
NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"Tap here to read the latest Football News."];
[string addAttribute:NSUnderlineStyleAttributeName value:@(1) range:NSMakeRange(4, 4)];
label.text = [string copy];

Then add a gesture recogniser and implement handleTap::

UITapGestureRecognizer *recogniser = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
[label addGestureRecognizer:recogniser];

- (void)handleTap:(UITapGestureRecognizer *)recogniser {
    // Handle the tap here
}

View more solutions