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

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

当前回答

快4.倍

extension UIButton {
    func centerTextAndImage(spacing: CGFloat) {
        let insetAmount = spacing / 2
        let writingDirection = UIApplication.shared.userInterfaceLayoutDirection
        let factor: CGFloat = writingDirection == .leftToRight ? 1 : -1

        self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount*factor, bottom: 0, right: insetAmount*factor)
        self.titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount*factor, bottom: 0, right: -insetAmount*factor)
        self.contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)
    }
}

用法:

button.centerTextAndImage(spacing: 10.0)

2017-12-29 11:09:37

其他回答

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

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

2021-11-03 17:00:49

快4.倍

extension UIButton {
    func centerTextAndImage(spacing: CGFloat) {
        let insetAmount = spacing / 2
        let writingDirection = UIApplication.shared.userInterfaceLayoutDirection
        let factor: CGFloat = writingDirection == .leftToRight ? 1 : -1

        self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount*factor, bottom: 0, right: insetAmount*factor)
        self.titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount*factor, bottom: 0, right: -insetAmount*factor)
        self.contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)
    }
}

用法:

button.centerTextAndImage(spacing: 10.0)

2017-12-29 11:09:37

Riley Avron回答的一个小补充，以解释地区变化:

extension UIButton {
    func centerTextAndImage(spacing: CGFloat) {
        let insetAmount = spacing / 2
        let writingDirection = UIApplication.sharedApplication().userInterfaceLayoutDirection
        let factor: CGFloat = writingDirection == .LeftToRight ? 1 : -1

        self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount*factor, bottom: 0, right: insetAmount*factor)
        self.titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount*factor, bottom: 0, right: -insetAmount*factor)
        self.contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)
    }
}

2016-04-03 13:18:07

接口构建器解决方案

事情正在发生变化，现在在XCode 13.1和iOS 15+的尺寸检查器不影响嵌入，而是在属性检查器下有填充和内容嵌入属性，这带来了预期的效果

为了向后兼容，需要在尺寸检查器下做插入，就像@ravron说的那样。在IB中需要做一些组合:

让我们假设图像和标题之间的距离为8pt 添加标题左插图为8页这将从右侧剪辑文本，所以需要平衡添加-8pt右插入标题然后按钮的右插入也需要调整增加右插入8pt 完成了!这个按钮在iOS 14和15中看起来很棒

2022-01-12 11:29:02

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

如果您将图像设置为按钮。你可以随意使用按钮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
}

2022-10-26 14:13:59

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

推荐文章

最新文章

标签