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

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从边缘,以第一选择图像,并设置插图,因为你需要,然后选择从边缘的标题和插图设置根据自己的需要.

希望这可以帮助.

Answer 4

您可以使用属性窗口(属性检查器)Edge中的按钮属性轻松直观地实现对齐,您可以更改其值,并根据需要查看下图insetTitleImage

希望能帮助到你.

干杯.

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)
        }
    }
}