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

小编典典

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

all

我想在两行文本的左侧放置一个图标，使图像和文本开头之间有大约 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
将它从左侧移动到一半，但事实并非如此。

插图背后的逻辑是什么？我不熟悉图像放置和相关术语。

阅读 96

2022-05-07

共1个答案

小编典典

我同意文档imageEdgeInsets并且titleEdgeInsets应该更好，但我想出了如何在不诉诸试验和错误的情况下获得正确的定位。

一般的想法是在这个问题上，但那是如果你想要文本和图像都居中。我们不希望图像和文本单独居中，我们希望图像和文本作为一个实体一起居中。这实际上是
UIButton 已经做的，所以我们只需要调整间距。

CGFloat spacing = 10; // the amount of spacing to appear between image and title
tabBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
tabBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);

我还把它变成了 UIButton 的一个类别，所以它很容易使用：

UIButton+Position.h

@interface UIButton(ImageTitleCentering)

-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;

@end

UIButton+位置.m

@implementation UIButton(ImageTitleCentering)

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

@end

所以现在我要做的就是：

[button centerButtonAndImageWithSpacing:10];

我每次都能得到我需要的东西。不再手动弄乱边缘插图。

编辑：交换图像和文本

在评论中回复@Javal

使用相同的机制，我们可以交换图像和文本。要完成交换，只需使用负间距，但还要包括文本和图像的宽度。这将需要已知框架并且已经执行布局。

[self.view layoutIfNeeded];
CGFloat flippedSpacing = -(desiredSpacing + button.currentImage.size.width + button.titleLabel.frame.size.width);
[button centerButtonAndImageWithSpacing:flippedSpacing];

当然，您可能想要为此创建一个不错的方法，可能会添加第二类方法，这留给读者作为练习。

2022-05-07