將按鈕圖像與 UIButton 的右邊緣對齊

Question

有很多關於根據標題文本對齊按鈕圖像的線程，但我找不到任何關於將圖像對齊到按鈕右側的信息。

這沒有效果：

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

如何右對齊按鈕的圖像？ 可以在Storyboard中完成嗎？

Answer 1

語義：強制從右到左查看對我有用

Answer 2

我發現了一個棘手的方法 Update the constrains for the UIImageView of the Button

嘗試這個

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

Answer 3

有幾種不同的選擇可以做到這一點。

使用semanticContentAttribute

button.semanticContentAttribute = .forceRightToLeft

您也可以從界面（故事板）布局設置語義屬性。

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

• 在 UIView 中設置 Image 右側並禁用用戶交互，因此用戶操作/點擊將傳遞給按鈕。
• 在UIView中添加大小與UIView相同的按鈕，背景色透明，覆蓋Image。
• 設置按鈕的內容偏移量，如此快照所示。

這將使處理按鈕操作、屬性和根據您的要求自定義圖像位置和大小變得容易。 嘗試這個。

Answer 4

故事板：

屬性選項卡 > 確保為“圖像”選擇了“內容邊緣”選項卡：

然后您將“左”屬性更改為不正確，這就是您以編程方式執行的操作。 所以換句話說，你從左邊填充 n

UIEdgeInsetsMake = TOP | 左 | 底部 | 對

以編程方式：

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

注意：您可能還需要更改標題插圖，具體取決於它參考圖像的位置

Answer 5

在 Swift 中執行此操作的簡潔方法

button.semanticContentAttribute = .forceRightToLeft

希望這可以幫助

Answer 6

試試下面的代碼：

btn.contentHorizontalAlignment = .right

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

Answer 8

將其設為默認語義，即未指定或強制從左到右

並在 button.imageEdgeInsets 中將其設置為

UIEdgeInsets(top: 0, left: self.view.frame.size.width - (圖片尺寸+對齊空間), bottom: 0, right: 0)

這將確保無論視圖大小如何，它都會始終從按鈕的右側對齊圖像

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)

Answer 10

在 iOS 15.0 中，您可以簡單地使用新配置 API來指定圖像放置，在本例中為： trailing 。 如果您需要支持早期版本，另一種方法是將NSTextAttachment （自 iOS 7.0 起可用）附加到 NSMutableAttributedString 並將其用作按鈕的標題。

正如其他響應中所建議的那樣，為此使用語義內容屬性並強制它從右到左是一個壞主意。 API 不適用於該用例，可能會產生意想不到的后果。 在這種情況下，它會破壞可訪問性，尤其是使用 VoiceOver 的導航。 原因是如果您向右滑動以到達屏幕中的下一個元素，並且該元素被迫從右到左，VoiceOver 也會反轉，如果您再次向右滑動，它將 go 到上一個元素而不是下一個。 如果再次向右滑動，您將返回從右到左的元素。 等等等等。 用戶陷入了焦點陷阱，這可能會非常混亂。

所以代碼可能看起來像這樣：

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
}

Answer 11

像這樣：

btn.imageView?.translatesAutoresizingMaskIntoConstraints = false
btn.imageView?.centerYAnchor.constraint(equalTo: btn.centerYAnchor, constant: 0.0).isActive = true
btn.imageView?.trailingAnchor.constraint(equalTo: btn.trailingAnchor, constant: 0.0).isActive = true
btn.imageView?.contentMode = .right

Answer 12

要將圖像向右對齊，“語義”選項似乎是最好的，“強制從右到左”。 此外，我還想補充一件事。 您可以通過此選項保持按鈕圖像的形狀。

Answer 13

這通過設置對我有用：

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

然后對於內部圖像，我將正確的插圖設置為 0。

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

Answer 14

這對我有用

btn.imageView?.translatesAutoresizingMaskIntoConstraints = false
btn.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
btn.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true

Answer 15

快速 5

button.imageEdgeInsets = UIEdgeInsets(top: 0, left: (bounds.width - 16), bottom: 0, right: 0)

Answer 16

使用 UIButton 擴展將圖像放到右側

extension UIButton {
    func imageToRight() {
        transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    }
}

如何使用

yourButton.imageToRight()

Answer 17

使用新的UIButton.Configuration您可以使用自定義背景視圖

extension UIButton {
  class BackgroundImageView: UIView {
    private let imageView = UIImageView()
    private let imagePlacement: NSDirectionalRectEdge

    init(icon: UIImage? = nil, imagePlacement iconPlacement: NSDirectionalRectEdge = .leading) {
      imagePlacement = iconPlacement
      super.init(frame: .zero)
      imageView.image = icon
      addSubview(imageView)
      layout()
    }

    required init?(coder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
    }

    private func layout() {
      imageView.snp.remakeConstraints { make in
        make.size.equalTo(24)
        make.centerY.equalToSuperview()
        if imagePlacement == .trailing {
          make.trailing.equalToSuperview().offset(-CGFloat.spacing6)
        } else {
          make.leading.equalToSuperview().offset(CGFloat.spacing6)
        }
      }
    }
  }
}

在此示例中，我使用的是SnapKit ，但您可以使用 go 進行常規自動布局約束。

用法：

extension UIButton.Configuration {
  static func config(
    title: String? = nil,
    icon: UIImage? = nil,
    baseBackgroundColor: UIColor,
    baseForegroundColor: UIColor,
    pinIconToEdge: Bool = true
  ) -> Self {
    var config = UIButton.Configuration.filled()
    config.title = title
    if pinIconToEdge {
      config.background.customView = UIButton.BackgroundImageView(
        icon: icon?.withRenderingMode(.alwaysTemplate)
      )
    } else {
      config.image = icon
      config.imagePlacement = .trailing
      config.imagePadding = .spacing8
    }

    config.background.customView?.tintColor = .red
    config.cornerStyle = .capsule
    config.baseForegroundColor = baseForegroundColor

    return config
  }
}