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

Question

I am trying to create a button that has 16 padding on the left and rights sides of a button.

My UIButton override

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

and in my controller:

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

    }

It should look like this:

Answer 1

you must change values for titleEdgeInsets and imageEdgeInsets button's properties.

and also for implement this you can create custom UIView with override method: func touchesBegan(_ touches: Set, with event: UIEvent?)

Answer 2

you can do it by UIEdgeInsets

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

change the left property based on your desire. the result of the above code is like this:

don't forget to change the alignment of the button to the left:

Answer 3

First option is to configure button with autolayout (Im using Snapkit framework beacuse of best readability) and the second option is to configure it with frame.

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

First I set the image:

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

then swap the image and button and change their insets that incorporates the 16 padding on both sides:

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)!)