CODEWITHSUNDEEP
swiftuibutton
RoboChris
RoboChris

Reputation: 397

How do you set the height and width of a UIButton with image

This is driving me nuts. I have looked everywhere and cannot figure this out. Check it out...

    let findMeButton = UIButton(type: UIButtonType.System)

    findMeButton.translatesAutoresizingMaskIntoConstraints = false

    findMeButton.setImage(UIImage(named: "locateMe"), forState: UIControlState.Normal)

    findMeButton.addTarget(self, action: #selector(MapViewController.findUserLocation(_:)), forControlEvents: UIControlEvents.TouchUpInside)

    view.addSubview(findMeButton)

    // I added this line of code and it still doesn't work.
    findMeButton.frame.size = CGSizeMake(50, 50)

    findMeButton.bottomAnchor.constraintEqualToAnchor(bottomLayoutGuide.topAnchor, constant: -10).active = true

    findMeButton.trailingAnchor.constraintEqualToAnchor(margins.trailingAnchor, constant: 5).active = true

I am still learning iOS. How do you set the Height and Width of this UIButton with an Image. Everything I have tried has given me an error or just didn't work. I am still trying to rap my head around what translatesAutoresizingMaskIntoConstraints does. I just simply want to have the Button where it is but change its size (Height & Width).

Thanks in advance

EDIT: I have changed the bit of code to this

    // Locate user button
    let locateButton = UIButton(type: UIButtonType.System) as UIButton

    locateButton.frame = CGRectMake(0, 0, 50, 50)

    locateButton.setBackgroundImage(UIImage(named: "locateMe"), forState: UIControlState.Normal)

    locateButton.addTarget(self, action: #selector(MapViewController.findUserLocation(_:)), forControlEvents: UIControlEvents.TouchUpInside)

    view.addSubview(locateButton)

I want to position the button to the windows bottom and right margin. I also want to set the image dimensions to height 50 x width 50. How would I accomplish this?

EDIT 2: I figure you have to use Auto Layout to do so but can someone show me how. Everything I have done hasn't worked.

Upvotes: 23

Views: 66492

Answers (5)

Zhou Haibo
Zhou Haibo

Reputation: 2078

Swift 5: I used NSLayoutConstraints to set width and height of UIButton. No need to set button.frame.

        let playImage = UIImage(named: "Play")
        playButton = UIButton(type: UIButton.ButtonType.custom) as UIButton
        playButton.setBackgroundImage(playImage, for: .normal)
        playButton.addTarget(self, action: #selector(playBtnTapped), for: .touchUpInside)
        playButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(playButton)
        
        NSLayoutConstraint.activate([
            playButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            playButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            playButton.widthAnchor.constraint(equalToConstant: 120),
            playButton.heightAnchor.constraint(equalTo: playButton.widthAnchor)
        ])

Upvotes: 2

Chaudhary Ankit Deshwal
Chaudhary Ankit Deshwal

Reputation: 534

so here i wrote a code to add the button on view.

Swift 3:

let button   = UIButton(type: UIButtonType.System) as UIButton
// set the frame
button.frame = CGRectMake(100, 100, 100, 50)
// add image
button.setBackgroundImage(UIImage(named:"SearchIcon" ), forState: UIControlState.Normal)
// button title
button.setTitle("Test Button", forState: UIControlState.Normal)
// add action
button.addTarget(self, action: #selector(RootViewController.updateView), forControlEvents: UIControlEvents.TouchUpInside)

button.translatesAutoresizingMaskIntoConstraints = false
// add button on view
self.view.addSubview(button)
// all constaints
let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200)
let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100)
let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)
NSLayoutConstraint.activateConstraints([heightContraints,widthContraints,xContraints,yContraints])

Swift 4:

let button   = UIButton(type: UIButtonType.system) as UIButton
// set the frame
button.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
// add image
button.setBackgroundImage(UIImage(named:"SearchIcon"), for: .normal)
// button title
button.setTitle("Test Button", for: .normal)
// add action
button.addTarget(self, action: #selector(RootViewController.updateView), forControlEvents: UIControlEvents.TouchUpInside)

button.translatesAutoresizingMaskIntoConstraints = false
// add button on view
self.view.addSubview(button)
// all constaints
let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 200)
let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])

Swift 4.2:

let button   = UIButton(type: UIButton.ButtonType.system) as UIButton
        // set the frame
button.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
 // add image
button.setBackgroundImage(UIImage(named:"SearchIcon"), for: .normal)
 // button title
button.setTitle("Test Button", for: .normal)
 // add action
button.addTarget(self, action: #selector(didTapOnTakePhotoButton), for: UIControl.Event.touchUpInside)

button.translatesAutoresizingMaskIntoConstraints = false
 // add button on view
self.view.addSubview(button)
 // all constaints
let widthContraints =  NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.width, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 200)
let heightContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.height, relatedBy: NSLayoutConstraint.Relation.equal, toItem: nil, attribute: NSLayoutConstraint.Attribute.notAnAttribute, multiplier: 1, constant: 100)
let xContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.centerX, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerX, multiplier: 1, constant: 0)
let yContraints = NSLayoutConstraint(item: button, attribute: NSLayoutConstraint.Attribute.centerY, relatedBy: NSLayoutConstraint.Relation.equal, toItem: view, attribute: NSLayoutConstraint.Attribute.centerY, multiplier: 1, constant: 0)
NSLayoutConstraint.activate([heightContraints,widthContraints,xContraints,yContraints])

Upvotes: 24

nananta
nananta

Reputation: 499

The button layout may also be set by doing the following...

    // Create button with half the size of and centered in parent view
    parentView.addSubview(button)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.widthAnchor.constraint(equalTo: parentView.widthAnchor, multiplier: 0.5).isActive = true
    button.heightAnchor.constraint(equalTo: parentView.heightAnchor, multiplier: 0.5).isActive = true
    button.centerXAnchor.constraint(equalTo: parentView.centerXAnchor).isActive = true
    button.centerYAnchor.constraint(equalTo: parentView.centerYAnchor).isActive = true

Upvotes: 4

Marc Bastarache
Marc Bastarache

Reputation: 141

Swift 3

findMeButton.frame.size = CGSize(width, height)

Upvotes: 14

Willjay
Willjay

Reputation: 6469

Simply set the button size with

findMeButton.frame.size = CGSizeMake(width, height)

Or you can specify the button location and the size with 

findMeButton.frame = CGRectMake(x, y, width, height)

Upvotes: 5

Related Questions