带有图像和底部标签的按钮

Question

我想制作一个底部有图标和标签的按钮，如下所示：

最好的方法是什么？是否可以将图像视图对象和标签拖到按钮中？

Answer 1

UIButton 有两个您可能会感兴趣的属性。它们是 titleEdgeInsets 和 imageEdgeInsets.

Use this property to resize and reposition the effective drawing rectangle for the button title. You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge

您可以使用这些来获得您想要的布局。

Answer 2

通过代码你可以这样做Swift 4.2兼容代码在这里，你只需要调用函数

  public extension UIButton
  {

    func alignTextBelow(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 3

清理了@Shahzaib Maqbool 的回答。我最初遇到了一些崩溃，通过移除强制展开来修复这些崩溃。测试于 Swift 5.

extension UIButton {
    func alignTextBelow(spacing: CGFloat = 6.0) {
        guard let image = self.imageView?.image else {
            return
        }

        guard let titleLabel = self.titleLabel else {
            return
        }

        guard let titleText = titleLabel.text else {
            return
        }

        let titleSize = titleText.size(withAttributes: [
            NSAttributedString.Key.font: titleLabel.font
        ])

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0)
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0, bottom: 0, right: -titleSize.width)
    }
}

带有图像和底部标签的按钮

Button with Image and a label on bottom

interface-builder

uibutton

uikit

ios