UIButton not expanded with assigned text

Question

I have a UIButton on the screen. There are no width constraints on the UIButton. I like my UIButton to be expanded to the assigned text. But here is the result:

Here is the implementation:

self.translatedPhraseButton.setTitle(self.selectedPhrase.translatedPhrase, for: .normal)
self.translatedPhraseButton.sizeToFit()
self.translatedPhraseButton.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: 5.0, bottom: 0.0, right: 5.0)
self.translatedPhraseButton.layer.cornerRadius = 10.0
self.translatedPhraseButton.layer.masksToBounds = true
self.translatedPhraseButton.backgroundColor = UIColor(fromHexString: "2aace3")

get the string size and reset the frame. Please see http://stackoverflow.com/questions/4135032/ios-uibutton-resize-according-to-text-length — Teja Nandamuri, Aug 26 '16 at 19:52
I don't think that will be needed since UIButton uses intrinsic content size so it should resize itself based on the content. — john doe, Aug 26 '16 at 19:53
No, the button will not resize , either you should reset the frame or cal the sizeToFit method! Looks like intrinsicContentSize works only for system type buttons. — Teja Nandamuri, Aug 26 '16 at 19:56
Even if I call sizeToFit after titleEdgeInsets it does not resize. This is really weird :( — john doe, Aug 26 '16 at 19:58

score 5 · Answer 1 · answered Aug 27 '16 at 03:09

5

So, I finally resolved my issue by using a single line of code:

 self.translatedPhraseButton.contentEdgeInsets = UIEdgeInsets(top: 0.0, left: 15.0, bottom: 0.0, right: 15.0)

answered Aug 27 '16 at 03:09

john doe

9,220
23
91
167

This would not work if you had an image on the button and you need to set title edge insets instead of content edge insets. In such case, you could add negative values to titleEdgeInsets and add contentEdgeInsets as a workaround. See https://stackoverflow.com/a/28287773/4053939 – Rouger Nov 04 '21 at 11:47

score 2 · Answer 2 · answered Aug 26 '16 at 20:10

Try creating a temporary label, then setting the button's size to that label's.

let label = UILabel()
label.text = button.titleLabel?.text
label.font = button.titleLabel?.font
label.sizeToFit()

yourButton.frame.size = label.frame.size

Also, you can adjust the button's titleLabel to shrink the text to have it fit:

button.titleLabel?.adjustsFontSizeToFitWidth = true
button.titleLabel?.minimumScaleFactor = 0.5

score 2 · Answer 3 · answered Aug 26 '16 at 20:19

Problem:

The reason why the text gets truncated is because of the following line:

self.translatedPhraseButton.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: 5.0, bottom: 0.0, right: 5.0)

You have added 10.0 padding to the title label, which causes the text to truncate.

Solution:

I have used Swift 3 (It wouldn't be hard to change it to Swift 2 if you need)

Button:

class RoundedCornerButton : UIButton {

    override func draw(_ rect: CGRect) {

        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: [.topLeft, .topRight, .bottomLeft, .bottomRight],
                                cornerRadii: CGSize(width: 10, height: 10))

        UIColor.red.setFill()

        path.fill()
    }

    override var intrinsicContentSize: CGSize {

        let originalSize = super.intrinsicContentSize

        let size = CGSize(width: originalSize.width + 10, height: originalSize.height)

        return size
    }
}

Invoking:

let translatedPhraseButton = RoundedCornerButton()
translatedPhraseButton.setTitle("haskjhdjk", for: .normal)

view.addSubview(translatedPhraseButton)

translatedPhraseButton.translatesAutoresizingMaskIntoConstraints = false

translatedPhraseButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
translatedPhraseButton.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

Thanks! I guess the follow up question will be how do I add extra padding to the left and right of the UIButton. — john doe, Aug 26 '16 at 20:33
As shown in my answer, Just create a custom UIButton class and override the `intrinsicContentSize` and 10 to the the original width. That way the button width gets wider by 10 (there by providing the padding you wanted). — user1046037, Aug 26 '16 at 20:36
I was able to achieve the result with self.translatedPhraseButton.contentEdgeInsets = UIEdgeInsets(top: 0.0, left: 15.0, bottom: 0.0, right: 15.0) — john doe, Aug 26 '16 at 20:43

UIButton not expanded with assigned text

3 Answers3

Problem:

Solution:

Button:

Invoking: