Create a button programmatically and set a background image

Question

When I try creating a button and setting a background image in Swift:

let button   = UIButton.buttonWithType(UIButtonType.System) as UIButton
    button.frame = CGRectMake(100, 100, 100, 100)
    button.setImage(IMAGE, forState: UIControlState.Normal)
    button.addTarget(self, action: "btnTouched:", forControlEvents: UIControlEvents.TouchUpInside)

    self.view.addSubview(button)

I always get an error: "Cannot convert the expression's type 'Void' to type 'UIImage'".

How are you creating the image? May need to unwrap it IMAGE! — Alex Reynolds, Jun 05 '14 at 15:57
Thank you this works! I only said: "button.setImage("CircleTap", forState: UIControlState.Normal)" but now it works perfectly — Gary, Jun 05 '14 at 16:03

score 144 · Accepted Answer · edited Feb 12 '16 at 09:13

144

Your code should look like below

let image = UIImage(named: "name") as UIImage?
let button   = UIButton(type: UIButtonType.Custom) as UIButton
button.frame = CGRectMake(100, 100, 100, 100)
button.setImage(image, forState: .Normal)
button.addTarget(self, action: "btnTouched:", forControlEvents:.TouchUpInside)
self.view.addSubview(button)

edited Feb 12 '16 at 09:13

RikiRiocma

746
12
28

answered Jun 05 '14 at 16:06

Alex Reynolds

6,264
4
26
42

2

I think it should actually be `as? UIImage` Your version will crash if `imageNamed:` returns nil. – David Berry Jun 05 '14 at 16:16
3

Well that's your fault if its nil but you can add the ? but then you will have to also be aware of that when `setImage`. I guess it depends how defensive you want to get and since you control the local asset there should be no surprise with a unit test or two – Alex Reynolds Jun 05 '14 at 16:18
1

What about for circles images? – User Sep 26 '14 at 02:10
Try adding the ? `as UIImage?` – Alex Reynolds Nov 18 '14 at 00:40
4

change button type to Custom if you don't want to see a blue button button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton – iluvatar_GR Dec 29 '14 at 19:08
I don't think you can use "UIButton.buttonWithType" in Swift2 – LiangWang Jun 18 '15 at 02:09
This is from swift 1. If Swift 2 is different then we need to edit the answer to include 2.0 syntax – Alex Reynolds Jun 19 '15 at 17:49
Did `UIImage(...)` ever return `Any?`? Or why do you convert object type to the same type? – Vyachaslav Gerchicov Jan 31 '19 at 12:47

score 28 · Answer 2 · edited Jul 18 '15 at 07:15

28

Try below:

let image = UIImage(named: "ImageName.png") as UIImage
var button   = UIButton.buttonWithType(UIButtonType.System) as UIButton
button.frame = CGRectMake(100, 100, 100, 100)
button .setBackgroundImage(image, forState: UIControlState.Normal)
button.addTarget(self, action: "Action:", forControlEvents:UIControlEvents.TouchUpInside)
menuView.addSubview(button)

Let me know whether if it works or not?

edited Jul 18 '15 at 07:15

user3182143

9,459
3
32
39

answered Jul 01 '14 at 00:56

kiran

4,285
7
53
98

you should set buttonWithType to UIButtonType.Custom, not to System until the image shows – sazz Mar 15 '15 at 11:49

score 11 · Answer 3 · edited Nov 27 '19 at 04:38

Swift 5 version of accepted answer:

let image = UIImage(named: "image_name")
let button = UIButton(type: UIButton.ButtonType.custom)
button.frame = CGRect(x: 100, y: 100, width: 200, height: 100)
button.setImage(image, for: .normal)
button.addTarget(self, action: #selector(function), for: .touchUpInside)

//button.backgroundColor = .lightGray
self.view.addSubview(button)

where of course

@objc func function() {...}

The image is aligned to center by default. You can change this by setting button's imageEdgeInsets, like this:

// In this case image is 40 wide and aligned to the left
button.imageEdgeInsets = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: button.frame.width - 45)

score 9 · Answer 4 · answered Feb 27 '17 at 16:21

SWIFT 3 Version of Alex Reynolds' Answer

let image = UIImage(named: "name") as UIImage?
let button = UIButton(type: UIButtonType.custom) as UIButton
button.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
button.setImage(image, for: .normal)
button.addTarget(self, action: Selector("btnTouched:"), for:.touchUpInside)
        self.view.addSubview(button)

ViJay Avhad · Answer 5 · 2018-10-09T09:10:17.123

6

Create Button and add image as its background swift 4

     let img = UIImage(named: "imgname")
     let myButton = UIButton(type: UIButtonType.custom)
     myButton.frame = CGRect.init(x: 10, y: 10, width: 100, height: 45)
     myButton.setImage(img, for: .normal)
     myButton.addTarget(self, action: #selector(self.buttonClicked(_:)), for: UIControlEvents.touchUpInside)
     self.view.addSubview(myButton)

edited Oct 09 '18 at 09:10

answered Oct 05 '15 at 10:23

ViJay Avhad

2,684
22
26

Correction:line 4] button.setImage(image, for: .normal) – MacInnis Jul 23 '17 at 23:33

Toseef Khilji · Answer 6 · 2014-11-13T06:06:22.943

5

You need check for image is not nil before assign it to button.

Example:

let button   = UIButton.buttonWithType(UIButtonType.System) as UIButton
button.frame = CGRectMake(100, 100, 100, 100)
if let image  = UIImage(named: "imagename.png") {
    button.setImage(image, forState: .Normal)
}

button.addTarget(self, action: "btnTouched:", forControlEvents:.TouchUpInside)
self.view.addSubview(button)

edited Nov 13 '14 at 06:06

answered Nov 13 '14 at 05:53

Toseef Khilji

17,192
12
80
121

I would think I would want the app to crash if the image is not in the project. so why check? – Jeff Sep 01 '16 at 00:15
Becuase then the app wouldn't crash and could ship with a missing image – MacInnis Jul 23 '17 at 23:28

score 4 · Answer 7 · edited Mar 18 '15 at 07:21

4

let btnRight=UIButton.buttonWithType(UIButtonType.Custom) as UIButton
btnRight.frame=CGRectMake(0, 0, 35, 35)
btnRight.setBackgroundImage(UIImage(named: "menu.png"), forState: UIControlState.Normal)
btnRight.setTitle("Right", forState: UIControlState.Normal)
btnRight.tintColor=UIColor.blackColor()

edited Mar 18 '15 at 07:21

Soner Gönül

97,193
102
206
364

answered Mar 18 '15 at 06:57

Mak

49
3

score 4 · Answer 8 · edited Jul 18 '15 at 06:52

This is how you can create a beautiful button with a bezel and rounded edges:

loginButton = UIButton(frame: CGRectMake(self.view.bounds.origin.x + (self.view.bounds.width * 0.325), self.view.bounds.origin.y + (self.view.bounds.height * 0.8), self.view.bounds.origin.x + (self.view.bounds.width * 0.35), self.view.bounds.origin.y + (self.view.bounds.height * 0.05)))
loginButton.layer.cornerRadius = 18.0
loginButton.layer.borderWidth = 2.0
loginButton.backgroundColor = UIColor.whiteColor()
loginButton.layer.borderColor = UIColor.whiteColor().CGColor
loginButton.setTitle("Login", forState: UIControlState.Normal)
loginButton.setTitleColor(UIColor(red: 24.0/100, green: 116.0/255, blue: 205.0/205, alpha: 1.0), forState: UIControlState.Normal)

score 3 · Answer 9 · edited Nov 30 '17 at 19:04

3

To set background we can no longer use forState, so we have to use for to set the UIControlState:

let zoomInImage = UIImage(named: "Icon - plus") as UIImage?
let zoomInButton = UIButton(frame: CGRect(x: 10), y: 10, width: 45, height: 45))
zoomInButton.setBackgroundImage(zoomInImage, for: UIControlState.normal)
zoomInButton.addTarget(self, action: #selector(self.mapZoomInAction), for: .touchUpInside)
self.view.addSubview(zoomInButton)

edited Nov 30 '17 at 19:04

Leopold Joy

4,524
4
28
37

answered Nov 30 '17 at 07:11

Shazoo

31
3

I use this code to put zoom button on google map. use the above code for set background image. It is not same as earlier. – Shazoo Nov 30 '17 at 08:33
How is it different from the other answers though? – Leopold Joy Nov 30 '17 at 09:28
To set background now we cant use forState now we have to use "for" to set the UIControlState – Shazoo Nov 30 '17 at 09:44

score 2 · Answer 10 · answered Dec 12 '17 at 12:57

Update to Swift 3

let image = UIImage(named: "name")
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
button.setImage(image, for: .normal)
button.addTarget(self, action: #selector(self.btnAbsRetClicked(_:)), for:.touchUpInside)
self.view.addSubview(button)

score 1 · Answer 11 · edited Jun 27 '15 at 08:25

1

Swift: Ui Button create programmatically

let myButton = UIButton()

myButton.titleLabel!.frame = CGRectMake(15, 54, 300, 500)

myButton.titleLabel!.text = "Button Label"

myButton.titleLabel!.textColor = UIColor.redColor()

myButton.titleLabel!.textAlignment = .Center

myButton.addTarget(self,action:"Action:",forControlEvents:UIControlEvent.TouchUpInside)

self.view.addSubview(myButton)

edited Jun 27 '15 at 08:25

Noor

2,071
19
28

answered Apr 23 '15 at 07:44

Shanmugasundharam

2,082
23
32

Create a button programmatically and set a background image

11 Answers11

Linked