StackView - 中心按钮,图片下方有文字

时间:2017-10-26 15:20:54

标签: ios uibutton autolayout uistackview

我正在使用此课程作为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
    }
}

它工作正常。我的问题是当我开始在UIStackView中使用时。我正在创建类似于UITabBar的东西,所以我有5个按钮彼此相邻。我希望中间按钮位于屏幕的正中心,但它总是在几个像素的旁边。我检查了UIStackView的约束,这没关系。我删除所有按钮从中间一个,然后它在正中间。我为UIStackView尝试了不同的选项(Fill,Centered,Fill Equally等)。什么都没有帮助。有人有任何想法吗?每个按钮都有不同的图标(大小不同),文字也不同(免费,高级等等 - 有时比图标更大,有时更小),这是否相关?

我的StackView示例(红线显示中间位置):

Example of my StackView

1 个答案:

答案 0 :(得分:0)

图像尺寸与此相关。一旦您将所有5张图片设置为完全相同的尺寸,您就不会再遇到此问题了。使用'平均填充'这样做之后你会得到你想要的结果