StackView-图像下方文字居中的按钮

Question

I am using this class for center text below icon for UIButton :

@IBDesignable
class TopIconButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        let kTextTopPadding:CGFloat = 3.0;

        var titleLabelFrame = self.titleLabel!.frame;


        let labelSize = titleLabel!.sizeThatFits(CGSize(width: self.contentRect(forBounds: self.bounds).width, height: CGFloat.greatestFiniteMagnitude))

        var imageFrame = self.imageView!.frame;

        let fitBoxSize = CGSize(width: max(imageFrame.size.width, labelSize.width), height: labelSize.height + kTextTopPadding + imageFrame.size.height)

        let fitBoxRect = self.bounds.insetBy(dx: (self.bounds.size.width - fitBoxSize.width)/2, dy: (self.bounds.size.height - fitBoxSize.height) / 2)

        imageFrame.origin.y = fitBoxRect.origin.y
        imageFrame.origin.x = fitBoxRect.midX - (imageFrame.size.width/2)
        self.imageView!.frame = imageFrame;

        // Adjust the label size to fit the text, and move it below the image

        titleLabelFrame.size.width = labelSize.width
        titleLabelFrame.size.height = labelSize.height
        titleLabelFrame.origin.x = (self.frame.size.width / 2) - (labelSize.width / 2)
        titleLabelFrame.origin.y = fitBoxRect.origin.y + imageFrame.size.height + kTextTopPadding
        self.titleLabel!.frame = titleLabelFrame
        self.titleLabel!.textAlignment = .center
    }
}

It's working fine. My problem is when I start using in UIStackView . I am creating something similar to UITabBar so I have 5 buttons next to each other. I want to middle button be in exact center of screen but it's always several pixels to side. I check my constraints for UIStackView and it's okay. I remove all buttons exect middle one and then it's in exact middle. I tried different options for UIStackView (Fill, Centered, Fill Equally, etc.). Nothing helps. Do anyone has any idea? Each button has different icon (with different size) and texts are different too (free, premium, etc. - sometimes bigger then icon sometimes smaller), is this relevant?

Example of my StackView (red line shows where is middle):

Answer 1

The image size is going to be relevant here. Once you get all 5 images to be the same exact size you won't experience this issue anymore. Using 'fill equally' after doing that and you will get the result you want