'How to remove the top and bottom padding of UIButton, when create it using auto layout?

When create UIButton with auto layout, the intrinsicContentSize always contain different top/bottom padding according to different text font size. I try to set contentEdgeInsets, but it not really works for top/bottom padding.

How to fix the padding to 0 or any constant value?

iosobjective-cuibuttonautolayoutpadding


Solution 1:[1]

After some experimentation, it appears that if you try and set contentEdgeInsets to all zeros, the default insets are used. However, if you set them to nearly zero, it works:

button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0.01, bottom: 0.01, right: 0)

It also appears that the values get floor'd, so you won't actually get fractional padding.

Solution 2:[2]

Updated for Swift 5

If you are wanting the button to size to its titleLabel's contents, I found that the only way to do so is by subclassing UIButton and overriding intrinsicContentSize. Hope this works for you!

class CustomButton: UIButton {
    override var intrinsicContentSize: CGSize {
        return titleLabel?.intrinsicContentSize ?? super.intrinsicContentSize
    }
}

If you need to use titleEdgeInsets, you can update your UIButton subclass like this:

class CustomButton: UIButton {
    override var titleEdgeInsets: UIEdgeInsets {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }

    override var intrinsicContentSize: CGSize {
        var sizeWithInsets = titleLabel?.intrinsicContentSize ?? super.intrinsicContentSize
        sizeWithInsets.width += titleEdgeInsets.left + titleEdgeInsets.right
        sizeWithInsets.height += titleEdgeInsets.top + titleEdgeInsets.bottom
        return sizeWithInsets
    }
}

Solution 3:[3]

CGFloat has a leastNormalMagnitude value that works nicely for this unfortunate UIKit hack.

someButton.titleEdgeInsets = UIEdgeInsets(top: .leastNormalMagnitude, left: .leastNormalMagnitude, bottom: .leastNormalMagnitude, right: .leastNormalMagnitude)
someButton.contentEdgeInsets = UIEdgeInsets(top: .leastNormalMagnitude, left: .leastNormalMagnitude, bottom: .leastNormalMagnitude, right: .leastNormalMagnitude)

Zeroing out title-edge insets alone will only zero out the leading and trailing insets. Therefore, we have to also zero out content-edge insets to zero out the top and bottom.

And for convenience:

extension UIEdgeInsets {
    init(repeating value: CGFloat) {
        self.init(top: value, left: value, bottom: value, right: value)
    }

    static let leastNormalMagnitude = UIEdgeInsets(repeating: CGFloat.leastNormalMagnitude)
}

someButton.titleEdgeInsets = .leastNormalMagnitude
someButton.contentEdgeInsets = .leastNormalMagnitude

Solution 4:[4]

Not sure if it's because of the deprecation of contentEdgeInsets and titleEdgeInsets in iOS 15, but neither setting . contentEdgeInsets nor .titleEdgeInsets did the trick for me on iOS 15.2. Please comment below if you are facing the same issue on iOS 15+.

Eventually I ended up setting button.titleLabel constraints manually to remove paddings.

// first disable auto generated constraints
button.titleLabel?.translatesAutoresizingMaskIntoConstraints = false

// then pin titleLabel to the button
NSLayoutConstraint.activate([
            button.titleLabel!.leadingAnchor.constraint(equalTo: button.leadingAnchor),
            button.titleLabel!.trailingAnchor.constraint(equalTo: button.trailingAnchor),
            button.titleLabel!.topAnchor.constraint(equalTo: button.topAnchor),
            button.titleLabel!.bottomAnchor.constraint(equalTo: button.bottomAnchor)
        ])

Solution 5:[5]

I had issue with extra padding around button's title in iOS 15, so I've solved the problem with following code:

if #available(iOS 15.0, *) {
    detailsButton.configuration?.contentInsets = .zero

    // you could also keep padding that is more appropriate in your case
    detailsButton.configuration?.contentInsets = .init(top: 0, leading: 10,
                                                       bottom: 0, trailing: 0)
}

Also you could set style of UIButton in Attributes Inspector to Default. It'll make button's look same as it was before iOS 15

The article that helped me to get it right.

Solution 6:[6]

See if this works. Create the vertical constraints to the UIButton's titleLabel instead of the button itself.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3
Solution 4 Daniel Hu
Solution 5
Solution 6 yuf

Related Questions