0

So I have this Image view:

enter image description here

When I add it as a button's UIImage, the resulting button is simply a pink opaque square that is filled in. I don't understand why this is happening.

Krunal
  • 77,632
  • 48
  • 245
  • 261
Marco Buonastella
  • 57
  • 1
  • 4
  • The image doesn't appear to have any opacity in the link. I see a white rectangle with a pink rounded rectangle outline. – dmorrow Mar 24 '17 at 13:46
  • Yes I am trying to set the pink outline as the UIImage – Marco Buonastella Mar 24 '17 at 13:47
  • Are you confident the image you are using has transparency? The image you are sharing doesn't appear to have any transparency. – dmorrow Mar 24 '17 at 13:55
  • 1
    Depending on the context of the rest of your code, you can create a similar view using a UIView with a border and rounded corners - no images required. Can you share some more of your code to see if that would be an option? – dmorrow Mar 24 '17 at 13:56

1 Answers1

0

This is happening because the image is not the correct size. In your code, get on the largest device simulator and print the UIButton.frame inside viewDidAppear(). Once you know what the frame size is, make the image the same size instead of smaller and stretching to fit. As the image is stretched, it will make itself look more opaque as it were.

In other advice, I would recommend not using an image for somethign so simple. Use this:

    yourButton.layer.borderWidth = 2
    yourButton.layer.cornerRadius = 5
    yourButton.layer.borderColor = UIColor(red: 249/255, green: 0/255, blue: 150/255, alpha: 1/1).cgColor

I used your actual color for the borderColor, so you are good to go. Play with the borderWidth and cornerRadius until they are what you want.

If you do decide to stick with an image, you are better off with a larger image than a smaller one for something like this, and make sure that you assign it to the background image of the button, because you want to to function as a border and it will function better that way.

Sethmr
  • 3,046
  • 1
  • 24
  • 42
  • if he like to stick with an image he also can look into image slicing in assets catalog to present the right image for the right device display size – muescha Mar 24 '17 at 14:17
  • For iOS, this is simple. just have a 1x, 2x and 3x. 1x will show the actual point dimensions that you would see in the storyboard and the others are direct multipliers on the dimensions of the image. Checkout [this post](http://stackoverflow.com/questions/32354453/why-do-i-need-1x-2x-and-3x-ios-images) for more information of the image scaling. – Sethmr Mar 24 '17 at 14:19
  • this scaling is good if you have a picture. but when you have a to preserve a border than you can use image slicing or set it direct at the image( see http://macoscope.com/blog/stretchable-images-using-interface-builder/ and http://stackoverflow.com/questions/35607634/set-stretching-parameters-for-images-programmatically-in-swift-for-ios ) – muescha Mar 24 '17 at 14:33
  • Ohhh yeah, I never use that. I still disagree with using an image at all, but it is a handy trick. That would be a potential solution for sure! – Sethmr Mar 24 '17 at 14:41