Swift - UIButton with two lines of text

Question

I was wondering if it is possible to create a UIButton with two lines of text. I need each line to have a different font size. The first line will be 17 point and the second will be 11 point. I've tried messing with putting two labels inside of a UIButton, but I can't get them to stay inside the bounds of the button.

I'm attempting to do all of this in the ui builder, and not programmatically.

Thanks

Answer 1

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.

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

Answer 2

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)