Текст и изображение внутри UIButton

Question

Я застрял в UIButton.Я хочу добавить к тексту UIButton, а затем рядом с текстом добавить изображение, например так:

Я хочу центрировать его.

, когда я набираю это:

let button = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Přidat za: \(priceForCategory)", for: .normal)
    button.setImage(UIImage(named: "Coin"), for: .normal)
    button.imageEdgeInsets = UIEdgeInsets(top: 6, left: -100, bottom: 6, right: 6)
    button.titleLabel?.textAlignment = .right
    button.alignImageRight()
    button.imageView?.contentMode = .scaleAspectFit
    button.backgroundColor = UIColor.custom.orange
    button.addTarget(self, action: #selector(handleAddCategory), for: .touchUpInside)
    button.tintColor = .white
    button.titleLabel?.font = UIFont(name: ".SFUIText-Bold", size: 20)

Это показывает мне:

Мой рост нарушается, и все равно это не работает.

button.alignImageRight()

Значит

func alignImageRight() {
    if UIApplication.shared.userInterfaceLayoutDirection == .leftToRight {
        semanticContentAttribute = .forceRightToLeft
    }
    else {
        semanticContentAttribute = .forceLeftToRight
    }
}

Спасибо за каждый ответ.

Answer 1

Создать функцию для добавления UIButton

func addRoundedButton() {

    let button = UIButton(type: .custom)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitle("Add for: 100", for: .normal)
    button.setImage(UIImage(named: "Coin"), for: .normal)

    button.alignImageRight()

    //Add this line for rounded corner
    button.layer.cornerRadius = 20  // set cornerRadius = height/2

    button.backgroundColor = UIColor.orange

    button.tintColor = .white
    button.titleLabel?.font = UIFont(name: ".SFUIText-Bold", size: 20)

    view.addSubview(button)

    [button.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -15),
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.heightAnchor.constraint(equalToConstant: 40),
    button.widthAnchor.constraint(equalToConstant: 300)].forEach{ $0.isActive = true }

}

Создать расширение для UIButton (как вы уже создали).но добавьте UIEdgeInsets в расширение.

extension UIButton {

    func alignImageRight() {
        if UIApplication.shared.userInterfaceLayoutDirection == .leftToRight {
            semanticContentAttribute = .forceRightToLeft
            imageEdgeInsets = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 0)
        } else {
            semanticContentAttribute = .forceLeftToRight
            imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 15)
        }
    }
}

Вывод

TIP

Для автоматической настройки ширины в зависимости от текста и изображения используйте это расширение