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 it is a hyperlink and for the button click event to call the mail composer view. At present, I am not able to show the button text underlined.

I thought of placing a label above the button and adjusting the label property to get the underlined text but that did not work.

Is there a different way to get the appearance and behavior I want?

Minna

Here is how to do same in storyboard (XCode 6). https://mcmap.net/q/156353/-underlining-text-in-uibutton – Kudu

Answer 1

Another alternative is to set an image for the button. Create an image that displays the appropriate text and the button will display that instead of text.

I agree with Zack that underlining text is redundant and violates the interface grammar. You underline text for links in the first place to indicate that they have behavior like buttons. If the text is already in a button, there is no need to underline it to indicate it behaves like a button because the user already expects an action in response to clicking it.

Camail

And if you have translations, @TechZen, you have to prepare image for each language? – Rezzani

Answer 2

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)
    }
}

Mathews

Answer 3

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

Lea

Answer 4

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;
}

Dugas

Answer 5

Since iOS 6.0 you can use NSAttributedString with UIButton.

//create an underlined attributed string
NSAttributedString *titleString = [[NSAttributedString alloc] initWithString:@"Title" attributes:@{NSUnderlineStyleAttributeName : @(NSUnderlineStyleSingle | NSUnderlinePatternSolid)}];

//use the setAttributedTitle method
[yourButton setAttributedTitle:titleString forState:UIControlStateNormal];

Propeller

Answer 6

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!

Output

Answer 7

Thanks to @Robert Chen's answer , Update to swift 4.1

let btn = UIButton(type: .system)
btn.frame = CGRect(x: 100, y: 100, width: 100, height: 100)

let attrs = NSAttributedString(string: "➟ More",
               attributes:
[NSAttributedStringKey.foregroundColor: UIColor(red:0.20, green:1.00, blue:1.00, alpha:1.0),
 NSAttributedStringKey.font: UIFont.systemFont(ofSize: 19.0),
 NSAttributedStringKey.underlineColor: UIColor(red:0.20, green:1.00, blue:1.00, alpha:1.0),
 NSAttributedStringKey.underlineStyle: NSUnderlineStyle.styleSingle.rawValue])

btn.setAttributedTitle(attrs, for: .normal)

Benitobenjamen

Answer 8

So what if you want to provide a link to a website within a block of text? The user would need some visual indication the text is a link and will take them somewhere.

The blue underlined hyperlinked look is the expected norm but understand this is the PC way. So what is the iPhone way?

I have in the past used a custom button with no background etc and blue text, although not underlined it does allow tappable text.

Would be interested to know what others do....

Nevlin

Answer 9

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

Livonia

Simple is underline = YES. How is that simple? – Cockup