使用自动布局约束垂直对齐的图像和文本按钮

Question

我是IOS开发和AutoLayout的新手。 我面临的问题是使用Storyboard在UI按钮内对齐图像和文本。我曾尝试使用TitleEdgeinset和ImageEdge插件来实现它，以便将Title（文本）垂直居中放置在Image下方。但问题是我有3个相似的按钮，它们是垂直堆叠的（StackView），而Text是动态设置的，因为我们有本地化的字符串（包括阿拉伯语rtl）。 图像和文本根据文本长度移动。是否有任何方法可以使所有按钮与图像和文本垂直对齐。此外，如果使用边缘插入，不同的屏幕分辨率当前不工作。感谢您的帮助 。提前谢谢。

Answer 1

几天前，我解决了类似的问题，试试这个

 private func adjustImageAndTitleOffsetsForButton (button: UIButton) {

    let spacing: CGFloat = 6.0

    let imageSize = button.imageView!.frame.size

    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, -(imageSize.height + spacing), 0)

    let titleSize = button.titleLabel!.frame.size

    button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0, 0, -titleSize.width)
}

为每个按钮调用此方法，例如

self.adjustImageAndTitleOffsetsForButton(yourButton)

Answer 2

我修改了Ajay's answer，因为我的图片没有居中：

func centerButtonImageAndTitle(button: UIButton) {
  let spacing: CGFloat = 5
  let titleSize = button.titleLabel!.frame.size
  let imageSize = button.imageView!.frame.size

  button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0)
  button.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -imageSize.width/2, bottom: 0, right: -titleSize.width)
}

Answer 3

这是一个对我有用的解决方案。只需在故事板中将按钮类设置为HorizontallyCenteredButton，然后根据需要设置标题和图像的顶部和底部插图（将图像置于高于标题的位置），按钮将自动调整水平插入，使图像居中以上标题。

class HorizontallyCenteredButton: LocalizedButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.contentHorizontalAlignment = .left
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.centerButtonImageAndTitle()
    }

    func centerButtonImageAndTitle() {
        let size = self.bounds.size
        let titleSize = self.titleLabel!.frame.size
        let imageSize = self.imageView!.frame.size

        self.imageEdgeInsets = UIEdgeInsets(top: self.imageEdgeInsets.top, left: size.width/2 - imageSize.width/2, bottom: self.imageEdgeInsets.bottom, right: 0)
        self.titleEdgeInsets = UIEdgeInsets(top: self.titleEdgeInsets.top, left: -imageSize.width + size.width/2 - titleSize.width/2, bottom: self.titleEdgeInsets.bottom, right: 0)
    }
}

Answer 4

要垂直对齐所有按钮，首先选择按钮，然后单击标题为“对齐”的故事板右下角的按钮，最后在出现的菜单中选择“垂直中心”。这应该可以解决问题。

Answer 5

我创建了一个视图，然后在VStack中放置了图像，文本以及按钮。 确保VStack约束在所有四个方面均为0，以便覆盖按钮：）

Answer 6

这很简单，如果您已经尝试过，请道歉！

您不需要为插图设置任何内容，只需确保3个按钮与水平中心对齐...

选择要对齐的控件，然后单击下方突出显示的按钮（xCode屏幕右下角）并选择Vertical Centers选项以使三者相互对齐，或者选择Container中的水平以将它们放入你的观点中间。