将按钮图像与UIButton的右边缘对齐

Question

有很多关于根据标题文本对齐按钮图像的讨论，但我找不到任何关于将图像仅对齐到按钮右侧的内容。

这没有任何效果：

button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 50);

如何使按钮中的图像右对齐？可以在Storyboard中完成吗？

- soleil

---

可能是重复的问题：iPhone UIButton - image position - Fonix

如果您的目标是iOS 9，您可以像这样进行操作。 - Fonix

这不是重复的。我不关心标题文本。我只想让图像与按钮框架右对齐。 - soleil

@Fonix 我需要支持iOS 8。 - soleil

Answer 1

语义化：强制在视图上从右到左对我有用

- Gilad Brunfman

---

谢谢，兄弟！这对我来说非常好用！ - Ravi

如果您支持辅助功能，请不要使用此选项，因为它会破坏VoiceOver在屏幕上发出的元素顺序。 - Sihad Begovic

Answer 2

我发现一个巧妙的方法 更新按钮中UIImageView的限制

试一试吧

button.imageView?.trailingAnchor.constraint(equalTo: button.trailingAnchor, constant: -8.0).isActive = true
button.imageView?.centerYAnchor.constraint(equalTo: button.centerYAnchor, constant: 0.0).isActive = true

但不要忘记添加这个以使约束生效

button.translatesAutoresizingMaskIntoConstraints = false
button.imageView?.translatesAutoresizingMaskIntoConstraints = false

- Simon K. Gerges

---

尝试检查UIButton的imageView是否已经有约束条件，但没有找到。如果您希望imageView固定在按钮的某一侧而不依赖于标题，则这是最后的选择。 - Glenn Posadas

不错的想法，Simon。 - Marios

Answer 3

有几种不同的选项可以实现它。

使用semanticContentAttribute

button.semanticContentAttribute = .forceRightToLeft

您可以从界面（Storyboard）布局中设置语义属性。

或者使用包含UIButton和UIImage的UIView，如此快照所示。

• 将图像设置在UIView的右侧并禁用用户交互，因此用户操作/点击将传递给按钮。
• 在UIView中添加大小与UIView相同的按钮，具有透明背景颜色并覆盖图像。
• 按照此快照所示设置按钮的内容偏移量。

这将使按钮操作、属性和根据您的要求自定义图像位置和大小变得更加容易处理。试试这个。

- Krunal

---

有没有一种方法来定义填充以补充“semanticContentAttribute”属性？根据我的按钮中的文本，图像可能会触摸文本，也可能离它很远。 - agirault

Answer 4

Storyboard故事板:

属性选项卡 > 确保您的内容边缘选项卡已选择为 'image':

然后您更改'Left'属性而不是右侧属性，这是您在编程中所做的。换句话说，您将其从左侧填充n。

UIEdgeInsetsMake = TOP | LEFT | BOTTOM | RIGHT

程序化地：

button.imageEdgeInsets = UIEdgeInsetsMake(0, 100, 0, 0);

注意：根据图像所在的位置，您可能还需要调整标题的插入位置。

- soulshined

---

谢谢您的建议。这将使图像从左侧缩进。换句话说，当所有4个值都为0时，图像左对齐。如果我增加“左”插入值，图像将远离左边缘。这并没有帮助，因为我需要将图像固定在右边缘，以便无论按钮拉伸多宽，它都保持右对齐。 - soleil

@soleil 对的。据我所知，这不能通过系统按钮完成，但是我真的不知道。我只是用它作为你尝试过的示例之一。你是对的，对于各种宽度来说并不是一个好的解决方法，但对于静态宽度来说还是可以的。 - soulshined

其实，@soleil 只需要将左插入设置为 self.button.frame.size.width - widthOfImage 或其他类似的值即可。 - soulshined

@soleil 不，不用理会。这只是一厢情愿的想法。那种方法可能只适用于左对齐的内容。你的内容很可能像其他人一样居中对齐。 - soulshined

@soleil。是的，请尝试这样做。我要去睡觉了，但请尝试在Storyboard中将内容对齐到左侧，然后将左侧插入设置为上面提到的那个。听起来没问题。 - soulshined

Answer 5

尝试以下代码：

btn.contentHorizontalAlignment = .right

- Dhaval H. Nena

---

OP正在询问如何使图像在文本之后显示，这就是他们所说的将图像与按钮的右侧对齐。这只会将图像和文本向右对齐，但它并没有达到OP想要的效果。如果您查看其他答案，您就会理解他们试图做什么。 - derickito

Answer 6

在 Swift 中实现清晰的方式

button.semanticContentAttribute = .forceRightToLeft

希望这可以帮到您。

- Md. Ibrahim Hassan

Answer 7

简易方法

使用扩展程序将图像设置在右侧，并自定义偏移量。

   extension UIButton {
    func addRightImage(image: UIImage, offset: CGFloat) {
        self.setImage(image, for: .normal)
        self.imageView?.translatesAutoresizingMaskIntoConstraints = false
        self.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
        self.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -offset).isActive = true
    }
}

- Musa almatri

---

代码原封不动地运行不起来，我需要添加 self.imageView?.contentMode = .right 来防止图片被拉伸。 - rmp

Answer 8

使其成为默认的语义，即未指定或强制从左到右

在 button.imageEdgeInsets 中将其设置为

UIEdgeInsets(top: 0, left: self.view.frame.size.width - (图像尺寸 + 对齐空间), bottom: 0, right: 0)

这将确保不管视图大小如何，它始终会将图像对齐到按钮的右侧

- Tharzeez

---

强制从右到左，并且通过对齐空间，我指的是一些常量，比如10.0，这样它就不会紧贴视图的左上角。 - Tharzeez

简单易懂。 - mehdok

Answer 9

它对我有效:

self.acceptButton.setImage(UIImage(named: image), for: UIControl.State.normal)
self.acceptButton.semanticContentAttribute = .forceRightToLeft
self.acceptButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 9, bottom: 0, right: 0)

- Eduardo Parada

Answer 10

在iOS 15.0中，您可以简单地使用新的配置API来指定图像位置, 在这种情况下： 靠右。如果您需要支持早期版本，另一种方法是将NSTextAttachment（自iOS 7.0以来可用）附加到NSMutableAttributedString中，并将其用作按钮的标题。

在其他回答中建议使用语义内容属性并将其强制设置为从右到左是一个不好的想法。该API不适用于此用例，可能会产生意想不到的后果。在这种情况下，它破坏了可访问性，特别是使用VoiceOver进行导航。原因是如果您向右滑动以获取屏幕上的下一个元素，并且该元素被强制设置为从右到左，则VoiceOver也会反转，如果您再次向右滑动，则会跳转到上一个元素而不是下一个元素。如果您再次向右滑动，则又回到了从右到左的元素。用户陷入了焦点陷阱中，这可能非常令人困惑。

因此，代码可能如下所示：

if #available(iOS 15.0, *) {
    var configuration = UIButton.Configuration.plain()
    let image = UIImage(systemName: "applelogo")
    configuration.image = image
    configuration.imagePadding = 8.0
    configuration.imagePlacement = .trailing
    button.configuration = configuration
    button.setTitle("Apple", for: .normal)
} else {
    let buttonTitle = "Apple"
    let titleAttributedString = NSMutableAttributedString(string: buttonTitle + " ")
    let textAttachment = NSTextAttachment(image: UIImage(systemName: "applelogo")!)
    let textAttachmentAttributedString = NSAttributedString(attachment: textAttachment)
    titleAttributedString.append(textAttachmentAttributedString)
    button.setAttributedTitle(titleAttributedString, for: .normal)
    // When using NSTextAttachment, configure an accessibility label manually either
    // replacing it for something meaningful or removing the attachment from it
    // (whatever makes sense), otherwise, VoiceOver will announce the name of the
    // SF symbol or "Atachement.png, File" when using an image
    button.accessibilityLabel = buttonTitle
}

- dadederk