我想在两行文本的左边放置一个图标,这样在图像和文本开始之间有大约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居中图像和文本?


当前回答

下面是一个如何使用imageEdgeInsets的简单示例 这将创建一个30x30的按钮,可点击区域增大10个像素(50x50)

    var expandHittableAreaAmt : CGFloat = 10
    var buttonWidth : CGFloat = 30
    var button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton
    button.frame = CGRectMake(0, 0, buttonWidth+expandHittableAreaAmt, buttonWidth+expandHittableAreaAmt)
    button.imageEdgeInsets = UIEdgeInsetsMake(expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt)
    button.setImage(UIImage(named: "buttonImage"), forState: .Normal)
    button.addTarget(self, action: "didTouchButton:", forControlEvents:.TouchUpInside)

其他回答

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

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)
        }
    }
}

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)

如果您不想使用按钮配置的原因不同的情况。你可以实现下面的函数。

如果您将图像设置为按钮。你可以随意使用按钮imageView。更改按钮的位置imageView。函数,实现您输入的值作为偏移从您的按钮的前导锚。

private func leftPadding(value: CGFloat, button: UIButton) {
    button.imageView?.translatesAutoresizingMaskIntoConstraints = false
    button.imageView?.leadingAnchor.constraint(equalTo: button.leadingAnchor, constant: value).isActive = true
    button.imageView?.centerYAnchor.constraint(equalTo: button.centerYAnchor).isActive = true
}

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

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

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

根据iOS 15及以上版本:

var config = UIButton.Configuration.plain() // depends on the button you want 
config.image = UIImage(named: "view_all") // set the image 
config.imagePadding = 5 // add the insets for the image 
button.configuration = config // assign the config to the button 

来源: https://developer.apple.com/documentation/uikit/uibutton/configuration