如何使用Swift以编程方式在UIButton中将文本左对齐并在右侧对齐图像？

Question

我正在尝试创建一个按钮，左侧有16个填充，按钮右侧有。

我的UIButton覆盖

override func awakeFromNib() {
    backgroundColor =  UIColor.white
    setTitleColor(UIColor.primary, for: .normal)
    setTitleColor(UIColor.primary, for: .highlighted)
    titleLabel!.font = UIFont.mediumHeadline


    imageEdgeInsets = UIEdgeInsets(top: 0, left: self.bounds.width - 32, bottom: 0, right: 0)
}

并在我的控制器中：

func setupHeadingButton() {
        headerButton.setImage(UIImage.rightNavigationArrow, for: .normal)

    }

应该如下所示：

Answer 1

您必须更改titleEdgeInsets和imageEdgeInsets按钮属性的值。

并且为了实现这个，您可以使用覆盖方法创建自定义UIView：func touchesBegan（_ touches：Set，with event：UIEvent？）

Answer 2

你可以通过 UIEdgeInsets

来实现

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

根据您的愿望更改左侧属性。 上面代码的结果是这样的：

不要忘记将按钮的对齐方式更改为左侧：

Answer 3

第一个选项是使用自动布局配置按钮（我使用Snapkit框架，因为最好的可读性），第二个选项是使用框架配置它。

import UIKit

final class CustomButton: UIButton {

    let leftImageView: UIImageView
    let centerLabel: UILabel

    override init(frame: CGRect) {
        centerLabel = UILabel()
        leftImageView = UIImageView()
        super.init(frame: frame)
        configure()
    }

    required init?(coder aDecoder: NSCoder) {
        centerLabel = UILabel()
        leftImageView = UIImageView()
        super.init(coder: aDecoder)
        configure()
    }

    fileprivate func configureWithSnapKit() {


        setTitle("", for: .normal)

        // Spacing view for space between imageview and label
        let spacingView1 = UIView()
        let spacingView2 = UIView()
        let spacingView3 = UIView()

        // Configuring stack view

        let stackView = UIStackView(arrangedSubviews: [spacingView1, centerLabel, spacingView2, leftImageView, spacingView3])
        stackView.distribution = .fill
        stackView.axis = .horizontal
        stackView.alignment = .fill

        leftImageView.isUserInteractionEnabled = true
        leftImageView.contentMode = .center

        centerLabel.lineBreakMode = .byTruncatingTail
        centerLabel.font = Fonts.sfui_medium(size: 12)
        centerLabel.textColor = Colors.white
        centerLabel.numberOfLines = 1

        // Adding subviews
        addSubview(stackView)
        stackView.isUserInteractionEnabled = false

        // SnapKit autolayout
        stackView.snp.makeConstraints { (make) in
            make.edges.equalTo(0)
        }

        spacingView1.snp.makeConstraints { (make) in
            make.width.equalTo(16)
        }

        spacingView3.snp.makeConstraints { (make) in
            make.width.equalTo(16)
        }

        leftImageView.snp.makeConstraints { (make) in
            make.width.equalTo(22)
        }
    }

    fileprivate func configureWithFrame() {

        setTitle("", for: .normal)

        // Spacing view for space between imageview and label
        let spacingView = UIView()

        // Configuring stack view

        let stackView = UIStackView(arrangedSubviews: [centerLabel, spacingView, leftImageView])
        stackView.distribution = .fill
        stackView.axis = .horizontal
        stackView.alignment = .fill

        leftImageView.isUserInteractionEnabled = true
        leftImageView.contentMode = .center

        centerLabel.lineBreakMode = .byTruncatingTail
        centerLabel.font = Fonts.sfui_medium(size: 12)
        centerLabel.textColor = Colors.white
        centerLabel.numberOfLines = 1

        // Adding subviews
        addSubview(stackView)
        stackView.isUserInteractionEnabled = false

        stackView.frame = CGRect(x: 16, y: 0, width: self.frame.width - 32, height: self.frame.height)
    }
}

Answer 4

首先我设置图像：

headerButton.setImage(UIImage.settingsUpArrow, for: .normal)

然后交换图像和按钮并更改其两侧包含16个填充的插图：

headerButton.titleEdgeInsets = UIEdgeInsetsMake(0, -(headerButton.imageView?.frame.size.width)! + 16, 0, (headerButton.imageView?.frame.size.width)!)
        let leftPadding =  headerButton.bounds.width - (headerButton.imageView?.bounds.width)!-16
        headerButton.imageEdgeInsets = UIEdgeInsetsMake(0, leftPadding, 0, -(headerButton.titleLabel?.frame.size.width)!)