How to display Underlined Text in a Button on iOS?

Question

I want to display the mail ID in my view such that clicking the mail ID should open the mail composer view.

I want to display the button text as underlined to show i

Answer 1

Adding a screenshot for @Haider's answer.

Note: Only the text you highlight gets underlined, so you can underline just a specific range if you want.

I ended up underlining it in code anyway, just because I couldn't get Bold to work in conjunction with Underline for some reason. Could have been because of the font I was using, who knows.

@IBOutlet weak var underlineButton: UIButton! {
    didSet {
        let attrs = [
            NSFontAttributeName : UIFont(name: "MyCustomFont-Bold", size: 19.0)!,
            NSUnderlineStyleAttributeName: NSUnderlineStyle.StyleSingle.rawValue,
            NSForegroundColorAttributeName : UIColor.orangeColor()
        ]
        let attrString = NSMutableAttributedString(string: "Button text", attributes:attrs)
        underlineButton.setAttributedTitle(attrString, forState: .Normal)
    }
}

Answer 2

To do it in interface builder

1. Click on button/label
2. In Attributes inspector, change Title/Text to Attributed from plain
3. Select the text which you want to show.
4. Right click on it Goto Font->Underline

Answer 3

Or you can create an extension to UIButton (Swift 5):

extension UIButton {
    func underline() {
        if let textUnwrapped = self.titleLabel?.text {
            let underlineAttribute = [NSAttributedString.Key.underlineStyle: NSUnderlineStyle.single.rawValue]
            let underlineAttributedString = NSAttributedString(string: textUnwrapped, attributes: underlineAttribute)
            self.setAttributedTitle(underlineAttributedString, for: .normal)
        }
    }
}

Answer 4

To do what you want, you would need to use CGContextStrokePath() to draw the underline on the UILabel's CGLayer.

That being said, I would challenge you to reconsider your design choice. Making the button text appear to be a hyperlink would make sense a Windows desktop application (e.g. using a LinkLabel). However, the iPhone OS has a different set of user interface conventions owing to its smaller screen and the need for larger targets to accommodate touch input.

The "Cocoa Touch" approach to this problem would be to display a list of mail id's using a UITableView. Provide each row with an appropriate accessory button. For example, you could use either a UITableViewCellAccessoryDetailDisclosureButton, or an UIButton with buttonType of UIButtonTypeContactAdd). The accessory button event handler would then bring up the mail composer.

Good luck, and happy coding!

Answer 5

Swift 3.2

if let title = button.titleLabel?.text, title != "" {

    let attributeString = NSMutableAttributedString(string: title)

    attributeString.addAttribute(NSAttributedStringKey.underlineStyle, value: 1, range: NSMakeRange(0, title.count))

    button.titleLabel?.attributedText = attributeString
}

Objective C

NSString *tem = self.myButton.titleLabel.text;

if (tem != nil && ![tem isEqualToString:@""]) {
    NSMutableAttributedString *temString=[[NSMutableAttributedString alloc]initWithString:tem];
    [temString addAttribute:NSUnderlineStyleAttributeName
                      value:[NSNumber numberWithInt:1]
                      range:(NSRange){0,[temString length]}];

    self.myButton.titleLabel.attributedText = temString;
}

Answer 6

simple, using a webview and plug in a block of html to display any text that iphone cannot do but html can.