Resizing image inside of UIButton - ios

Question

I have been trying to get the system images I placed inside of a UIButton to scale aspect fit, but no solutions I find online seem to work. This is what I have tried so far:
//the cells objects
var acceptButton = UIButton(type: .custom)
var declineButton = UIButton(type: .custom)
override init(frame: CGRect) {
super.init(frame: frame)
//add the contents and set its autolayout constraints
setAutoLayoutConstraints()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//function to set the autolayout constraints for the cell's contents
func setAutoLayoutConstraints() {
//create the stack view which will contain the accept and reject buttons
let buttonStackView = UIStackView()
buttonStackView.axis = .horizontal
buttonStackView.distribution = .fillEqually
buttonStackView.alignment = .fill
//add the buttons to the stack view
buttonStackView.addArrangedSubview(acceptButton)
buttonStackView.addArrangedSubview(declineButton)
//add the button stack view to the cell
self.addSubview(buttonStackView)
buttonStackView.translatesAutoresizingMaskIntoConstraints = false
buttonStackView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
buttonStackView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
buttonStackView.leadingAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
buttonStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
//add the button images
let addImage = UIImage(systemName: "checkmark.circle")
acceptButton.imageView?.contentMode = .scaleAspectFit
acceptButton.setImage(addImage, for: .normal)
acceptButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
acceptButton.addTarget(self, action: #selector(addButtonClicked), for: .touchUpInside)
let declineImage = UIImage(systemName: "xmark.octagon")
declineButton.imageView?.contentMode = .scaleAspectFit
declineButton.setImage(declineImage, for: .normal)
declineButton.addTarget(self, action: #selector(declineButtonClicked), for: .touchUpInside)
}
This is what I get:
(The "test test" label is just what I added for the left half of the cell's contents, can be ignored)
I have tried multiple solutions such as setting the edge insets, setting the content mode of the button and the button's image view, using a custom button, etc. but I can't seem to get the image to resized.
NOTE: When I make the image the background image with setBackgroundImage, I am able to resize the button but I can not scale aspect fit it, only fill it horizontally and vertically which is not what I am looking to do.
Any help is appreciated, thanks!!

Answer 1

This is a simple solution example: add first your labelTest and after that set stackView leading anchor to labelTest trailing...
this is my tableView:
class YourViewController: UIViewController, UITabBarDelegate, UITableViewDataSource, UITableViewDelegate {
let tableView = UITableView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .green
tableView.delegate = self
tableView.dataSource = self
tableView.register(myCell.self, forCellReuseIdentifier: "cellId")
tableView.backgroundColor = .white
tableView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tableView)
tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 50
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellId", for: indexPath) as! myCell
return cell
}
}
Now set my cell with arrangedSubviews and set constraints to content view (this is the correct way, not directly to cell):
class myCell: UITableViewCell {
let labelTest: UILabel = {
let label = UILabel()
label.text = "test Label"
label.backgroundColor = .red
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
var acceptButton = UIButton(type: .custom)
var declineButton = UIButton(type: .custom)
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
acceptButton.backgroundColor = .purple
declineButton.backgroundColor = .brown
setAutoLayoutConstraints()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//function to set the autolayout constraints for the cell's contents
func setAutoLayoutConstraints() {
contentView.addSubview(labelTest)
labelTest.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
labelTest.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
labelTest.trailingAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
labelTest.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
let buttonStackView = UIStackView(arrangedSubviews: [acceptButton, declineButton])
buttonStackView.axis = .horizontal
buttonStackView.distribution = .fillEqually
buttonStackView.translatesAutoresizingMaskIntoConstraints = false
//add the button stack view to the cell
contentView.addSubview(buttonStackView)
buttonStackView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
buttonStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
buttonStackView.leadingAnchor.constraint(equalTo: labelTest.trailingAnchor).isActive = true
buttonStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
//add the buttons images
let addImage = UIImage(systemName: "checkmark.circle")
acceptButton.imageView?.contentMode = .scaleAspectFit
acceptButton.setImage(addImage, for: .normal)
acceptButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
acceptButton.addTarget(self, action: #selector(addButtonClicked), for: .touchUpInside)
let declineImage = UIImage(systemName: "xmark.octagon")
declineButton.imageView?.contentMode = .scaleAspectFit
declineButton.setImage(declineImage, for: .normal)
declineButton.addTarget(self, action: #selector(declineButtonClicked), for: .touchUpInside)
}
}
If you want some space to left/right simply add constant to relative constraint:
labelTest.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
buttonStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
This is the results