我想在两行文本的左边放置一个图标,这样在图像和文本开始之间有大约2-3像素的空间。控件本身水平居中对齐(通过接口生成器设置)

这个按钮应该是这样的:

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

我试图配置这与contenttedgeinset, 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问题作为参考,但我的价值观有些不对。 UIButton:如何使用imageEdgeInsets和titleEdgeInsets居中图像和文本?


当前回答

在iOS 15+中,你可以使用UIButton。配置:

var configuration = button.configuration
configuration?.imagePadding = 16
configuration?.titlePadding = 10
            
button.configuration = configuration

其他回答

我的垂直定心方法:

extension UIButton {
    
    /// Layout image and title with vertical centering.
    /// - Parameters:
    ///   - size: The button size.
    ///   - imageTopOffset: Top offset for image.
    ///   - spacing: Distance between image and title.
    func verticalAlignmentByCenter(size: CGSize, imageTopOffset: CGFloat, spacing: CGFloat) {
        let contentRect = contentRect(forBounds: CGRect(origin: .zero, size: size))
        let imageRect = imageRect(forContentRect: contentRect)
        let titleRect = titleRect(forContentRect: contentRect)

        let imageTop = imageTopOffset - imageRect.origin.y
        let imageLeft = contentRect.width/2 - imageRect.width/2
        imageEdgeInsets = UIEdgeInsets(top: imageTop, left: imageLeft, bottom: 0, right: 0)

        let titleTop = imageTopOffset + spacing + imageRect.height - titleRect.origin.y
        let titleLeft = titleRect.origin.x - contentRect.width/2 - titleRect.width/2
        titleEdgeInsets = UIEdgeInsets(top: titleTop, left: titleLeft, bottom: 0, right: 0)
    }
    
}

我将根据更新的Xcode 13更新答案。

用于图像和文本对齐。我们不需要使用任何扩展或一行代码。Xcode在属性选项卡中提供了预定义属性,如下图所示。

位置属性有4个图像属性——顶部、底部、前导和尾部

我同意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 + h位置。

@interface UIButton(ImageTitleCentering)

-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;

@end

公元UIButton +位置。

@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];

当然,你可能会想要为此创建一个很好的方法,可能会添加第二个类别方法,这是留给读者的练习。

swift 4.2版本的解决方案如下:

let spacing: CGFloat = 10 // the amount of spacing to appear between image and title
self.button?.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: spacing)
self.button?.titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: 0)

我来这个派对有点晚,但我想我有一些有用的东西要补充。

Kekoa的答案很好,但正如RonLugge所提到的,它会使按钮不再尊重sizeToFit,更重要的是,它会导致按钮在固有大小时剪辑其内容。呵!

不过,首先

简单解释一下我是如何相信imageEdgeInsets和titleEdgeInsets工作的:

imageEdgeInsets的文档有以下内容:

使用此属性可调整按钮图像的有效绘图矩形的大小和位置。您可以为这四个嵌入(顶部、左侧、底部、右侧)中的每一个指定不同的值。正值会缩小或插入这条边——使它更靠近按钮的中心。负值会使这条边扩大或开始。

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

好吧,那又怎样?

我快到了!这是你默认设置的,设置一个图像和一个标题(按钮边框是绿色的,只是为了显示它的位置):

当你想要图像和标题之间有空格,而又不造成两者被压缩时,你需要设置四个不同的insets,图像和标题各两个。这是因为你不想改变这些元素帧的大小,而只是改变它们的位置。当你开始以这种方式思考时,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

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

噢,是的!我忘了,医生警告过我。他们部分地说:

此属性仅用于布局期间定位图像。按钮不使用此属性来确定intrinsicContentSize和sizeThatFits:。

但有一个属性可以提供帮助,那就是contenttedgeinsets。这方面的医生说:

按钮使用这个属性来确定intrinsicContentSize和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)
        }
    }
}