UIButton titleLabel has padding - Ios swift

x_z
March 4, 2022
171 views
3 votes
3 Answers

UIButton title label has top and bottom padding, I want to remove padding.
Set UIButton content mode did not work.

Here is my code

    lazy var button: UIButton = {
        let button = UIButton(type: .custom)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(ThemeColor.red, for: .normal)
        button.setTitle("Push", for: .normal)
        button.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)
        button.backgroundColor = .blue
        button.contentHorizontalAlignment = .fill
        button.contentVerticalAlignment = .fill
        button.contentMode = .scaleAspectFill
        return button
    }()

and it looks like

How can I remove the padding space!

Answers

As Matt pointed out, you can fix this by adjusting the button’s contentEdgeInsets

However, one thing I noticed, if you set the contentEdgeInsets to 0 all around:

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

You still get the the vertical padding for some reason.

I remember seeing an answer which I cannot find now where it suggested to set an extremely small edge inset and this should work:

lazy var button: UIButton = {
    let button = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitleColor(.red, for: .normal)
    button.setTitle("Push", for: .normal)
    button.backgroundColor = .blue
    button.contentHorizontalAlignment = .fill
    button.contentVerticalAlignment = .fill
    button.contentMode = .scaleAspectFill
    button.contentEdgeInsets = UIEdgeInsets(top: .leastNormalMagnitude,
                                            left: .leastNormalMagnitude,
                                            bottom: .leastNormalMagnitude,
                                            right: .leastNormalMagnitude)
    return button
}()

You can use the button’s configuration to get more precise control over its appearance like so:

lazy var myButton: UIButton = {
    let newButton = UIButton()

    newButton.translatesAutoresizingMaskIntoConstraints = false
    newButton.contentMode = .scaleAspectFill
    newButton.addTarget(self, action: #selector(buttonDidTap), for: .touchUpInside)

    // 'configurationUpdateHandler' property can be used to set appearance depending on its state
    newButton.configurationUpdateHandler = { button in 
        switch button.state { // here i'll just use default so it's the same over all states
        default:
            button.configuration?.title = "Push"
            button.configuration?.baseBackgroundColor = .blue

            // remove padding here
            button.configuration?.contentInsets.top = 0
            button.configuration?.contentInsets.bottom = 0
        }
    }
    
    return newButton
}()

Of course you don’t need to use updateHandler, you can just access the configuration directly and just set it there

button.configuration?.contentInsets.top = 0
button.configuration?.contentInsets.bottom = 0

See if this solves the problem…

You can use UIButton.Configuration and then set its contentInsets to .zero

lazy var button: UIButton = {
    let button = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    var configuration = UIButton.Configuration.plain()
    configuration.background.backgroundColor = .blue
    configuration.background.cornerRadius = 0
    configuration.baseForegroundColor = .red
    configuration.title = "Push"
    configuration.contentInsets = .zero
    button.configuration = configuration
    return button
}()

Please signup or login to give your own answer.

Click here to cancel reply.

UIButton titleLabel has padding – Ios swift

Answers