0

I am trying to get an image on top of text on a UIButton. I have put the image as the background image on the UIButton and set the VerticalAlignment and the image now does sit above the text :) like this : 

button.imageView?.image
button.setBackgroundImage(image, forState: UIControlState.Normal)
button.titleLabel?.font = UIFont(name: "Cantarell", size: 14)
button.setTitle("Test", forState: UIControlState.Normal)
button.contentVerticalAlignment = UIControlContentVerticalAlignment.Bottom

The only problem is that the image now fills the whole button up and it looks rubbish and blocky. I have tried to crop the image with Photoshop and it still fills the button and looks blocky. Can I set the backgroundImage frame size for example in swift ?

So the image ends up like this :

enter image description here

So the image needs to be smaller and its blocky. I have cropped it in Photoshop and it doesn't help. Just makes it more blocky. Is there .frame I can set for the size of the button background image ?

Jason
  • 1,057
  • 3
  • 13
  • 31
  • what do you mean by blocky? can you show a screenshot? – rakeshbs Jan 19 '15 at 17:30
  • What about the `imageEdgeInsets` I talked about in your other question (why the duplicate also?) http://stackoverflow.com/questions/28027634/uibutton-query-in-swift-ios – Larme Jan 20 '15 at 08:53
  • imageEdgeInsets does not work, so I took the advice of sending the image to the background image, and now it does work (I,e the text is below the image). but the image is now blocky. – Jason Jan 20 '15 at 09:48

2 Answers2

1

What you can do is drag a View (not an ImageView) on your storyboard first.

After that you drag the ImageView into the View as well as the label. Now you can use align and pin to put the ImageView and the Label at the right position within the View.

Ben Link
  • 107
  • 5
0

This isn't a solution via programming per say, but I believe if you open the image in photoshop and increase the size of the canvas, adding more blue around the outside, then the white part of the image will take up less space in the button and appear less blocky.

For this to work you'll have to make sure the image view's mode is set to either aspect fit or aspect fill, I believe.

Erik
  • 2,299
  • 4
  • 18
  • 23