将UIButton上的文本和图像与imageEdgeInsets和titleEdgeInsets对齐 [英] Aligning text and image on UIButton with imageEdgeInsets and titleEdgeInsets

问题描述

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

I would like to place an icon left of the two lines of text such that there's about 2-3 pixels of space between the image and the start of text. The control itself is Center aligned horizontally (set through Interface Builder)

该按钮类似于以下内容：

The button would resemble something like this:

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

我正在尝试使用contentEdgeInset，imageEdgeInsets和titleEdgeInsets配置此功能无济于事。我知道负值会扩大优势，而正值会缩小它以使其更接近中心。

I'm trying to configure this with contentEdgeInset, imageEdgeInsets and titleEdgeInsets to no avail. I understand that a negative value expands the edge while a positive value shrinks it to move it closer to the center.

我试过：

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

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

but this doesn't display it correctly. I've been tweaking the values but going from say -5 to -10 on the left inset value doesn't appear to move it in expected manner. -10 will scoot the text all the way to the left so I expected -5 to scoot it half way from the left side but it doesn't.

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

What's the logic behind insets? I'm not familiar with image placements and related terminology.

我使用这个SO问题作为参考，但我的价值观不正确。
UIButton：如何使用imageEdgeInsets和titleEdgeInsets来居中图像和文本？

I used this SO question as a reference but something about my values isn't right. UIButton: how to center an image and a text using imageEdgeInsets and titleEdgeInsets?

推荐答案

我同意<$ c上的文档$ c> imageEdgeInsets 和 titleEdgeInsets 应该会更好，但我想出了如何在不诉诸试错的情况下获得正确的定位。

I agree the documentation on imageEdgeInsets and titleEdgeInsets should be better, but I figured out how to get the correct positioning without resorting to trial and error.

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

The general idea is here at this question, but that was if you wanted both text and image centered. We don't want the image and text to be centered individually, we want the image and the text to be centered together as a single entity. This is in fact what UIButton already does so we simply need to adjust the spacing.

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的一个类别，所以它很容易使用：

I also turned this into a category for UIButton so it will be easy to use:

UIButton + Position.h

@interface UIButton(ImageTitleCentering)

-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;

@end

UIButton + Position.m

@implementation UIButton(ImageTitleCentering)

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

@end

所以我现在只需要do是：

So now all I have to do is:

[button centerButtonAndImageWithSpacing:10];

我每次都得到我需要的东西。不再需要手动处理边缘插入。

And I get what I need every time. No more messing with the edge insets manually.

编辑：交换图像和文本

在评论中回应@Javal

In response to @Javal in comments

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

Using this same mechanism, we can swap the image and the text. To accomplish the swap, simply use a negative spacing but also include the width of the text and the image. This will require frames to be known and layout performed already.

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

当然你可能想为此做一个很好的方法，可能会添加第二种方法，这是留给读者的练习。

Of course you will probably want to make a nice method for this, potentially adding a second category method, this is left as an exercise to the reader.

这篇关于将UIButton上的文本和图像与imageEdgeInsets和titleEdgeInsets对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！