UIButton .setImage() doesn't work in Swift 3

Question

I am trying to add multiple buttons to an UIView subclass. In the init() method of the UIView subclass (called leftPanel), I added multiple calls to different functions to add each button. This is how my init() looks like:

override init(frame: CGRect){
    super.init(frame: frame)
    components = self.setupView()
    print("Checkpoint: [leftPanel] init() call finished") // basic debug checkpoint
}

The init() calls a function named setupView() which contains the calls to each of the functions that creates a button. Here is my code for setupView():

func setupView() -> [UIView] {
    let addButton = self.setupAddButton()
    let infoButton = self.setupInfoButton()
    let orderPromoteButton = self.setupOrderPromoteButton()
    let orderDemoteButton = self.setupOrderDemoteButton()
    let refreshItemsButton = self.setupRefreshItemsButton()

    let components = [lessonActionsLabel, addButton, infoButton, orderPromoteButton, orderDemoteButton, refreshItemsButton]
    return components
}

And each of the calls in the setupView function is to a smaller function which contains the code to add each button to the leftPanel subclass. I have done it this way so I can remove each member as I need, and can use each individual setup function to re-add each individual item onto my view as required. Most of the functions are nearly the same, and uses this code:

func setupRefreshItemsButton() -> UIButton {
    let refreshItemsButton = UIButton(type: UIButtonType.infoLight)
    refreshItemsButton.frame = CGRect(x:0, y:screenHeight*55/100, width: screenWidth*30/100, height: screenHeight*5/100)
    refreshItemsButton.setTitle("  Refresh lesson items", for: UIControlState.normal)
    refreshItemsButton.setImage(UIImage(contentsOfFile: "up.png"), for: UIControlState.normal)
    self.addSubview(refreshItemsButton)
    return refreshItemsButton
}

to setup each of the buttons. However, when I run this on the iOS Simulator, the line which is supposed to set the image for each button does not seem to work. When I initialise each button, I initialise them with a type of UIButtonType.infoLight because I want to use the same style of the normal infoLight button (such as the text colour). The only attribute of the infoLight type I would like to change, is the image next to it (which is the (i) by default). I would like to make the icon into an UIImage(contentsOfFile: "up.png"), but it doesn't seem to work. Please can anybody suggest any changes that I could make to achieve this?

I have currently tried to make some changes to what I have, such as changing the type to .custom, seeing if that would change the image, but that does not work either. It only resets the formatting from .infoLight which I'd like to use, so I have switched it back. However, if your solution requires me to change it back to .custom, then I can do it.

I have also tried changing my code to replace up.png with only up but it still doesn't work.

None of my code raises any warnings or errors.

Edit: Most answers have suggested that I change my UIImage(contentsOfFile: "") to UIImage(named: ""), which I have done, but it takes up the entire frame of the UIButton, which I'd like to change, and keep the same as an .infoLight, by keeping a small image with a label on the right. Can anyone suggest a workaround for that too?

What is unique about this question?: Though the .setImage() has been solved by using: UIImage(named:) instead of UIImage(contentsOfFile:), I'd also like to keep the .setTitle() label in the button object. The UIImage(named:) call makes the image fill in the entire frame of the button, but I'd like to keep it the same as .infoLight, with the small image with the title on the right.

Answer 1

Use the background image, like this:

refreshItemsButton.setBackgroundImage(
   UIImage(named:"up.png"),
   for:UIControlState.normal)

Answer 2

Use this code -

func setupRefreshItemsButton() -> UIButton {
            let refreshItemsButton = UIButton(type: UIButtonType.custom)
            refreshItemsButton.frame = CGRect(x:0, y:screenHeight*55/100, width: screenWidth*30/100, height: screenHeight*5/100)
            refreshItemsButton.setTitle("  Refresh lesson items", for: UIControlState.normal)
            refreshItemsButton.setImage(UIImage(named: "up.png"), for: UIControlState.normal)
            self.addSubview(refreshItemsButton)
            return refreshItemsButton
        }

Answer 3

If you want image on left of button title try this-:

refreshItemsButton.setImage(UIImage(named: "up.png"), for: .normal)
refreshItemsButton.imageEdgeInsets = UIEdgeInsetsMake(0,-10, 0, 0)
refreshItemsButton.imageView?.layer.masksToBounds = true
refreshItemsButton.contentMode = .scaleAspectFit

Hope it helps.

Answer 4

Use this code, it's actually :

button.setBackgroundImage(UIImage.init(named: "image"), for: .normal)
button.titleLabel?.textAlignment = .left

Answer 5

After some research, I've found out more about UIButton in particular. It inherits from UIView, which means you can use .addSubview() on the UIButton like you would on an UIView.

For example, this is possible to do:

let myButton = UIButton(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let myButtonBackgroundImage = UIImage(named: "icon.png")
let myButtonBackgroundImageView = UIImageView(frame: x: 0, y: 0, width: 20, height: 20)
myButtonBackgroundImageView.image = myButtonBackgroundImage
myButton.addSubview(myButtonBackgroundImageView)
let myButtonTitleLabel = UILabel(x: 5, y:5, width: 10, height: 10)
myButtonTitleLabel.text = "Hi"
myButton.addSubview(myButtonTitleLabel)

So essentially, while there is no direct method way of doing it, treating UIButton like an UIView can form a workaround like above, which displays with a background image and a title in front of it, exactly what I was looking for.

Answer 6

You can try this:

element.setImage 

and

element.reloadInputViews()

This working for me...