logo标签列表

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

iosxcodeuibuttonuiimageuiedgeinsets
32

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

这没有任何效果：

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

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

可能是重复的问题：iPhone UIButton - image position - Fonix
如果您的目标是iOS 9，您可以像这样进行操作。 - Fonix
这不是重复的。我不关心标题文本。我只想让图像与按钮框架右对齐。 - soleil
@Fonix 我需要支持iOS 8。 - soleil
18个回答
2
一个按钮有2个子视图（这并不是真的，它有更多，但无论如何，我们可以只考虑2个）：第一个是图像；在图像之后有一个标题标签。因此，图像在左侧，标题在右侧。
首先，我要展示我想要实现的内容：一个左侧有文本，右侧有图像的按钮。我正在尝试交换按钮的子视图位置。
下面的图片是我想要获得的：

enter image description here

这是我实现目标的方法：
1- 将标题和图像添加到按钮中：
self.myButton.setTitle("My Button Title", for: .normal)
self.myButton.setImage(UIImage(systemName: "chevron.right"), for: .normal)

enter image description here

2 - 将水平内容对齐设置为左侧：

self.myButton.contentHorizontalAlignment = .left

enter image description here

3 - 从右到左设置语义内容属性：这意味着前导将成为按钮的右侧，而尾随将成为按钮的左侧。因此，图像（即按钮的第一个视图）将位于按钮的右侧。

self.myButton.semanticContentAttribute = .forceRightToLeft

enter image description here

4 - 添加按钮图像的约束条件，以便将其重新定位到右侧（在这种情况下靠近前导边缘，记住当将语义内容属性从右到左设置时，我们会切换边缘）：

self.myButton.imageView?.translatesAutoresizingMaskIntoConstraints = false
self.myButton.imageView?.centerYAnchor.constraint(equalTo: self.myButton.centerYAnchor, constant: 0).isActive = true
self.myButton.imageView?.trailingAnchor.constraint(equalTo: self.myButton.leadingAnchor, constant: 24).isActive = true

enter image description here

就这些了，伙计们！

2

使用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()
2

Just like this:

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
1
为了将图像对齐到右侧，'语义'选项似乎是最好的，选择'强制从右到左'。 此外，我想再添加一件事情。您可以通过此选项保留按钮图像的形状。 用户自定义运行时属性
1
iOS 15：imageEdgeInsets和titleEdgeInsets已经被弃用，且不再生效，我们需要自行调整。
例如，我想将标题设置在按钮开头，将图像设置在结尾。
extension UIButton {
    func adjust() {
        guard let imageView = self.imageView else { return }
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
        imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0).isActive = true
        
        guard let titleLabel = self.titleLabel else { return }
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0).isActive = true
        titleLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
    }
}

如果您是子类UIButton，还可以将代码放在layoutSubviews中。
0

我通过设置以下内容使其正常工作：

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

然后对于内部图像，我将右插入设置为0。

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

通过新的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，但你也可以选择常规的自动布局约束。
用法：

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

SWIFT 5

button.imageEdgeInsets = UIEdgeInsets(top: 0, left: (bounds.width - 16), bottom: 0, right: 0)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接