Question

我可以设置按钮的图像和文字。但它是水平对齐的。我希望图像和文本在按钮内垂直对齐。即图像下面的文字

如何使用故事板进行这些更改？

我想要的是：

我现在得到的是：

Answer 1

如果您正在寻找像这样的输出

1）选择按钮并转到故事板中的属性检查器，以获得按钮大小为50 * 50的结果

2）现在设置按钮的标题输入

Answer 2

我已经写了一个扩展程序，为您完成这项工作， Swift 4 兼容。

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

spacing是图像和文字之间的距离。

Answer 3

是的，你可以从故事板上做到，而无需编写任何逻辑。

1）选择按钮并转到故事板中的Attribute Inspector。

2）将图像指定给按钮。（不要使用背景图片）

3）将标题文本设置为该按钮。

4）现在您需要设置edge和Inset，因此首先从边缘选择图像并根据需要设置Inset，然后根据需要从边缘选择标题并设置插入。

希望这有帮助。

Answer 4

您可以使用属性窗口（属性检查器）中按钮的Edge属性轻松直观地实现对齐，您可以更改inset的{{1}}值}}和Title根据您的需要，请参见下面的图片

希望它有所帮助。

干杯。

Answer 5

Swift 4.2兼容代码在这里，您只需要调用此函数

  public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}

Answer 6

您无法直接在UIButton中更改布局，但您可以尝试在UIButton上使用这些属性：

UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);

如果它没有帮助，我建议从UIResponder继承并制作你自己的组件，并根据需要自己做布局。

Answer 7

精致的人

func alignTextUnderImage(spacing: CGFloat = 6.0) {
    guard let image = imageView?.image, let label = titleLabel,
      let string = label.text else { return }

      titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
      let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
      imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
  }

Answer 8

谢谢@rbiard。开发多语言移动应用程序和使用UISemanticContentAttribute（从右到左，从左到右）时的另一种解决方法。这应该起作用：

func alignTextBelow(spacing: CGFloat = 10.0) {

    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0.0, right: 0)
    }
}

故事板定位文本在按钮内的图像下方

8 个答案: