1

I have a problem in my navigation where my buttons are not displayed correctly. I want 2 rows of 3 buttons each. Each button has an image and a label. The label should be centered and below the image. But that's the tricky thing i can't seem to get working correctly because every time I start the emulator the first button looks okay and all the others are displayed correctly in therms of the image but not the label. I tried to mess with the size of the buttons but noting seems to be working.

I also tried to use the code from that question on stackoverflow but i didn't work out correctly. because the image wasn't displayed at all but the sizing was correct. Furthermore the label was only shown on the first button.

screenshot of navigation

I'm using a IBDesignable to extend the UIButton class which I'm assigning to the Buttons

import UIKit

@IBDesignable
class VerticalButton: UIButton {

    @IBInspectable public var padding: CGFloat = 20.0 {
        didSet {
            setNeedsLayout()
        }
    }

    override var intrinsicContentSize: CGSize {
        let maxSize = CGSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude)

        if let titleSize = titleLabel?.sizeThatFits(maxSize), let imageSize = imageView?.sizeThatFits(maxSize) {
            let width = ceil(max(imageSize.width, titleSize.width))
            let height = ceil(imageSize.height + titleSize.height + padding)

            return CGSize(width: width, height: height)
        }

        return super.intrinsicContentSize
    }

    override func layoutSubviews() {
        if let image = imageView?.image, let title = titleLabel?.attributedText {
            let imageSize = image.size
            let titleSize = title.size()

            titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -imageSize.width, bottom: -(imageSize.height + padding), right: 0.0)
            imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + padding), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }

        super.layoutSubviews()
    }

}

I'm guessing I made an error while calculating in the intrinsicContentSizeof the button. I also double checked if the class was assigned to all the relevant button and that each button had a label. Beside that I also checked that there were no insets set via the interface builder.

So far I had no luck in finding a solution hence my question. I appreciate your help. If you need more information please don't hesitate to reach out. I will be happy to provide it.

Thanks

Bexx
  • 47
  • 1
  • 10
  • Are your images all the same size? Your code appears to work fine for me in a quick test: https://imgur.com/a/gNbYlwM ... (2 sets of 3 buttons in horizontal stack views - I used the same images for the second row, with different labels). – DonMag Oct 24 '19 at 14:46
  • @DonMagi will check it. did u use a stack view or any constraints on the buttons? – Bexx Oct 24 '19 at 15:03
  • Just two horizontal stack views embedded in a vertical stack view. Here's the source to the Storyboard source (you'll need to update the image names): https://pastebin.com/q0Htxbvs – DonMag Oct 24 '19 at 15:11

1 Answers1

0

Thanks to @DonMag help I've found out that the issue was not with the code instead with the size of the images.

Bexx
  • 47
  • 1
  • 10