iphone - 使用 imageEdgeInsets 和 titleEdgeInsets 对齐 UIButton 上的文本和图像

Question

我想在两行文本的左侧放置一个图标，使图像和文本开头之间有大约 2-3 个像素的空间。控件本身水平居中对齐(通过 Interface Builder 设置)

这个按钮会像这样:

|                  |
|[Image] Add To    |
|        Favorites |

我尝试使用 contentEdgeInset、imageEdgeInsets 和 titleEdgeInsets 配置它，但无济于事。我知道负值会扩大边缘，而正值会缩小边缘以使其更靠近中心。

我试过:

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];

但这不能正确显示。我一直在调整这些值，但是从左边的插入值说 -5 到 -10 似乎并没有以预期的方式移动它。 -10 会将文本一直向左移动，所以我希望 -5 将它从左侧向中间移动，但事实并非如此。

插入背后的逻辑是什么？我不熟悉图片展示位置和相关术语。

我使用这个 SO 问题作为引用，但我的值(value)观有些不对。 UIButton: how to center an image and a text using imageEdgeInsets and titleEdgeInsets?

Answer 1

我来晚了一点，但我想我有一些有用的东西要补充。

Kekoa 的回答很好，但正如 RonLugge 所提到的，它可以使按钮不再遵守 sizeToFit，或者更重要的是，可以导致按钮在其固有大小时裁剪其内容。哎呀!

不过，首先，

简要说明我认为 imageEdgeInsets 和 titleEdgeInsets 的工作原理:

docs for imageEdgeInsets有以下部分要说:

Use this property to resize and reposition the effective drawing rectangle for the button image. 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.

我相信这个文档是在假设按钮没有标题，只有一张图片的情况下编写的。以这种方式思考更有意义，并且表现得像 UIEdgeInsets 通常做的那样。基本上，图像的框架(或标题，带有 titleEdgeInsets)向内移动用于正插入，向外移动用于负插入。

好吧，那又怎样？

我来了!这是默认设置，设置图像和标题(按钮边框为绿色只是为了显示它所在的位置):

如果您希望图像和标题之间有间距，而又不会导致任何一个被压碎，您需要设置四个不同的插图，图像和标题各两个。那是因为您不想更改这些元素框架的大小，而只想更改它们的位置。当您开始以这种方式思考时，对 Kekoa 优秀类别的必要更改变得清晰:

@implementation UIButton(ImageTitleCentering)

- (void)centerButtonAndImageWithSpacing:(CGFloat)spacing {
    CGFloat insetAmount = spacing / 2.0;
    self.imageEdgeInsets = UIEdgeInsetsMake(0, -insetAmount, 0, insetAmount);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, -insetAmount);
}

@end

但是等等，你说，当我这样做时，我得到了这个:

哦对了!我忘了，the docs警告我这件事。他们说，部分地:

This property is used only for positioning the image during layout. The button does not use this property to determine intrinsicContentSize and sizeThatFits:.

但是 有一个属性可以提供帮助，那就是 contentEdgeInsets。 The docs对于那个说，部分:

The button uses this property to determine intrinsicContentSize and sizeThatFits:.

听起来不错。因此，让我们再次调整类别:

@implementation UIButton(ImageTitleCentering)

- (void)centerButtonAndImageWithSpacing:(CGFloat)spacing {
    CGFloat insetAmount = spacing / 2.0;
    self.imageEdgeInsets = UIEdgeInsetsMake(0, -insetAmount, 0, insetAmount);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, -insetAmount);
    self.contentEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, insetAmount);
}

@end

你得到了什么？

对我来说看起来像是赢家。

---

在 Swift 中工作，根本不想做任何思考？这是 Swift 扩展的最终版本:

extension UIButton {

    func centerTextAndImage(spacing: CGFloat) {
        let insetAmount = spacing / 2
        let isRTL = UIView.userInterfaceLayoutDirection(for: semanticContentAttribute) == .rightToLeft
        if isRTL {
           imageEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: -insetAmount)
           titleEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: insetAmount)
           contentEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: -insetAmount)
        } else {
           imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount, bottom: 0, right: insetAmount)
           titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: -insetAmount)
           contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)
        }
    }
}