CODEWITHSUNDEEP
iosobjective-cuibuttonautolayoutpadding
zgjie
zgjie

Reputation: 2260

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?

Upvotes: 26

Views: 17110

Answers (7)

SoftDesigner
SoftDesigner

Reputation: 5853

A modern way for iOS 15+

let button = UIButton()
button.configuration = {
    var config = UIButton.Configuration.plain()
    config.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
    return config
}()

Upvotes: 1

Konstantin Nikolskii
Konstantin Nikolskii

Reputation: 1265

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.

Upvotes: 8

Daniel Hu
Daniel Hu

Reputation: 460

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

Upvotes: 1

slushy
slushy

Reputation: 12385

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

Upvotes: 11

mwahlig
mwahlig

Reputation: 176

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

Upvotes: 11

John Gibb
John Gibb

Reputation: 10773

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.

Upvotes: 52

yuf
yuf

Reputation: 3092

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

Upvotes: -1

Related Questions