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

【问题标题】：Button with Image and a label on bottom底部带有图像和标签的按钮
【发布时间】：2015-09-26 09:01:05
【问题描述】：

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

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

【问题讨论】：

我不知道从哪里开始我尝试添加一个按钮，但它的文本是垂直居中的，所以我不知道如何在它上面添加图像。我是 swift 新手，所以我对这些对象真的不太熟悉抱歉。
您不知道从哪里开始？请问这是 OSX 的 NSButton 还是 iOS 的 UIButton？您是使用界面构建器还是必须以编程方式执行此操作怎么样？到目前为止，你真的没有尝试过吗？
这是一个 iOS 的 UIButton 抱歉忘了提。我可以添加一个视图对象并将一个图像视图和标签对象放入其中是否合适？
我知道它可以这样工作，但我只想知道它应该如何完成。

标签： ios uibutton uikit interface-builder

【解决方案1】：

清理了@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)
    }
}

【讨论】：

【解决方案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)
        }
    }
}

【讨论】：

好答案。在 Swift 5.5 中工作

【解决方案3】：

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

使用此属性调整按钮标题的有效绘图矩形的大小和重新定位。您可以为四个插图（上、左、下、右）中的每一个指定不同的值。正值会缩小或插入该边缘——将其移近按钮的中心。负值会扩展或扩展该边缘

你可以玩弄这些来获得你想要的布局。

【讨论】：

谢谢！我正在尝试收集视图对象是否也是一个选项？
IMO 如果您需要独立按钮，那么 UIButton 是最佳选择，因为它带有标签和图像，其中包含不同状态的设置。正如我的回答所说，您可以更改它们的位置以适合，但是..如果您想要一组按钮，那么 UICollectionView 将是最好的，但您需要所有的管道来配合它。（单元格，布局，数据源，委托，控制器等）这一切都取决于它的意图。你可以继承 UIView 并从头开始编写代码。有很多选择，有些比其他的更耗时。
你说得对 UICollectionView 比我预期的要麻烦我会查找有关 title 和 imageEdgeInsets 的更多信息并尝试一下谢谢。