UIButton ImageView contentmode doesn't work

Question

I just started an app for iOS in Swift, I'm doing the design programmatically (I mean I'm not using storyboard)

I have a UIButton with an image inside, I would like the image to fill the entire button. Right now it just show the image in my button, but smaller than the button, center in top of the button frame.

My code is :

    let buttonLocation = UIButton(frame: CGRect(x: 0, y: 0, width: buttonRoundedSize, height: buttonRoundedSize))
    buttonLocation.setImage(UIImage(named: "locate_button"), for: .normal)
    buttonLocation.backgroundColor = .white
    buttonLocation.layer.cornerRadius = frame.width / 2
    buttonLocation.myExtension()

Here are the things I've tried (none of theses worked) :

    self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    self.autoresizingMask = .flexibleWidth
    self.autoresizingMask = .flexibleHeight
    self.imageView?.contentMode = .scaleAspectFill

If I just put the contentMode line it doesn't work either. The imageView doesn't return nil i've checked..

Thanks!

use `buttonLocation.setBackgroundImage(UIImage(named: "locate_button"), for: .normal)` — Rocky, May 24 '19 at 09:40
Try setting the content mode of the imageView object inside the button. Ex. buttonLocation.imageView?.contentMode = .scaleAspectFill — BhargavR, May 24 '19 at 09:50
@BhargavR doesn't work either :( And I've also tried the setBackgroundImage and I have the exact same problem — Quentin Rth, May 24 '19 at 15:27

score 0 · Answer 1 · answered May 24 '19 at 09:48

Set the contentMode of buttonLocation's imageView as scaleAspectFill or scaleToFill to cover the entire frame of button.

let buttonLocation = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 500))
buttonLocation.setImage(UIImage(named: "image"), for: .normal)
buttonLocation.backgroundColor = .gray
buttonLocation.layer.cornerRadius = buttonLocation.frame.width / 2
buttonLocation.imageView?.contentMode = .scaleAspectFill //Here........

Example:

That's exactly what I'm doing as you can see in my first post, and it doesn't work — Quentin Rth, May 24 '19 at 15:22

score 0 · Answer 2 · answered May 24 '19 at 19:05

Try using below code and remove other properties which are being set for this button :

let buttonLocation = UIButton(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        buttonLocation.setImage(UIImage(named: "cat"), for: .normal)
        buttonLocation.backgroundColor = .white
        buttonLocation.layer.cornerRadius = 50
        buttonLocation.imageView?.contentMode = .scaleAspectFill
        buttonLocation.clipsToBounds = true

        self.view.addSubview(buttonLocation)

Here make sure that the image which you are setting in the button is larger than the frame of the button. You can change frame and corner radius values in the above code. I just tried with the above code and getting below output.

You can comment if this is not your expected output.

Hope this helps.

It still doesn't work and my image size is higher than the unbutton size so I really don't understand why it doesn't work... — Quentin Rth, May 27 '19 at 07:44

score 0 · Answer 3 · answered Dec 26 '21 at 19:57

0

Answer on your question: https://stackoverflow.com/a/26263623/3047318

TLDR: set contentMode in viewDidLoad

answered Dec 26 '21 at 19:57

Pavel Shorokhov

4,485
1
35
44

score -1 · Answer 4 · answered May 24 '19 at 10:12

-1

you need to use setBackgroundImage property instead of setImage.

buttonLocation.setBackgroundImage(UIImage(named: "locate_button"), for: .normal)

answered May 24 '19 at 10:12

Samir Shaikh

547
3
9

1

Same problem with setBackgroundImage instead of setImage – Quentin Rth May 24 '19 at 15:25

score -1 · Answer 5 · answered May 24 '19 at 10:27

Maybe this can help you:

let buttonLocation = UIButton(type: .custom)
buttonLocation.frame = CGRect(x: 0, y: 0, width: buttonRoundedSize, height: buttonRoundedSize)
buttonLocation.setImage(UIImage(named: "locate_button"), for: .normal)
buttonLocation.imageView?.contentMode = .scaleAspectFill
buttonLocation.contentHorizontalAlignment = .fill
buttonLocation.contentVerticalAlignment = .fill
buttonLocation.backgroundColor = .white
buttonLocation.layer.cornerRadius = frame.width / 2
buttonLocation.clipsToBounds = true

You need to add contentHorizontalAlignment and contentVerticalAlignment properties and don't forget set clipsToBounds to true to see the corner raius effect.

What do you call inside the `myExtension()`. Try to remove `imageEdgeInsets` and test again. — riza milani, May 24 '19 at 15:37

UIButton ImageView contentmode doesn't work

5 Answers5