Swift - UIButton with two lines of text Swift - UIButton with two lines of text swift swift

Swift - UIButton with two lines of text


There are two questions.

I was wondering if it is possible to create a UIButton with two lines of text

This is possible through using the storyboard or programmatically.

Storyboard:

Change the 'Line Break Mode' to Character Wrap or Word Wrap and use Alt/Option + Enter key to enter a new line in the UIButton's Title field.

enter image description here

Programmatically:

override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)        btnTwoLine?.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping;}

I need each line to have a different font size 1

The worst case is, you can use a custom UIButton class and add two labels within it.

The better way is, make use of NSMutableAttributedString. Note that,this can be achieved through only programmatically.

Swift 5:

@IBOutlet weak var btnTwoLine: UIButton?override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated)    //applying the line break mode    textResponseButton?.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping;    let buttonText: NSString = "hello\nthere"    //getting the range to separate the button title strings    let newlineRange: NSRange = buttonText.range(of: "\n")    //getting both substrings    var substring1 = ""    var substring2 = ""    if(newlineRange.location != NSNotFound) {        substring1 = buttonText.substring(to: newlineRange.location)        substring2 = buttonText.substring(from: newlineRange.location)    }    //assigning diffrent fonts to both substrings    let font1: UIFont = UIFont(name: "Arial", size: 17.0)!    let attributes1 = [NSMutableAttributedString.Key.font: font1]    let attrString1 = NSMutableAttributedString(string: substring1, attributes: attributes1)    let font2: UIFont = UIFont(name: "Arial", size: 11.0)!    let attributes2 = [NSMutableAttributedString.Key.font: font2]    let attrString2 = NSMutableAttributedString(string: substring2, attributes: attributes2)    //appending both attributed strings    attrString1.append(attrString2)    //assigning the resultant attributed strings to the button    textResponseButton?.setAttributedTitle(attrString1, for: [])}

Older Swift

@IBOutlet weak var btnTwoLine: UIButton?override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)        //applying the line break mode        btnTwoLine?.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping;        var buttonText: NSString = "hello\nthere"        //getting the range to separate the button title strings        var newlineRange: NSRange = buttonText.rangeOfString("\n")        //getting both substrings        var substring1: NSString = ""        var substring2: NSString = ""        if(newlineRange.location != NSNotFound) {            substring1 = buttonText.substringToIndex(newlineRange.location)            substring2 = buttonText.substringFromIndex(newlineRange.location)        }        //assigning diffrent fonts to both substrings        let font:UIFont? = UIFont(name: "Arial", size: 17.0)        let attrString = NSMutableAttributedString(            string: substring1 as String,            attributes: NSDictionary(                object: font!,                forKey: NSFontAttributeName) as [NSObject : AnyObject])        let font1:UIFont? = UIFont(name: "Arial", size: 11.0)        let attrString1 = NSMutableAttributedString(            string: substring2 as String,            attributes: NSDictionary(                object: font1!,                forKey: NSFontAttributeName) as [NSObject : AnyObject])        //appending both attributed strings        attrString.appendAttributedString(attrString1)        //assigning the resultant attributed strings to the button        btnTwoLine?.setAttributedTitle(attrString, forState: UIControlState.Normal)    }

Output

enter image description here


I was looking for nearly the same topic, except that I don't need two different font sizes. In case someone is looking for a simple solution:

    let button = UIButton()    button.titleLabel?.numberOfLines = 0    button.titleLabel?.lineBreakMode = .byWordWrapping    button.setTitle("Foo\nBar", for: .normal)    button.titleLabel?.textAlignment = .center    button.sizeToFit()    button.addTarget(self, action: #selector(rightBarButtonTapped), for: .allEvents)    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)


I have notice an issue in most of the solutions which is while making line break mode to "Character Wrap" the second line will be left aligned to the first line

To make all the lines centered.just change the title From Plain to Attributed and then you can make each line centered

attributed centered title