CODEWITHSUNDEEP
iosiphoneobjective-c
danflu
danflu

Reputation: 317

UIButton image opacity required

I created a button on interface builder and set set its "image" to a png file and did not set any background image to it.

I want the button background to be transparent so I set its alpha to 0.6 in IB. The problem is I DO NOT WANT the image to be transparent too ( only the surrounding background ) but the image apparently inherits the button alpha and I can see throughout it.

Is there a way to completely avoid the button image to be transparent ?

Thanks

Update 1:

Using Xcode 5.02 I'm testing it on an iOS6 device, but can also test with iOS7 in the simulator.

Update 2:

Apparently the solution is to rescale the images to match the button rectangle. The problem is that the button has a title that is positioned below the image to describe the functionality. In this case how could I put the text "floating" above the image ?

Upvotes: 0

Views: 2856

Answers (4)

Pavan
Pavan

Reputation: 18548

I'm assuming you're not programming in iOS 7?

Set the backgroundColor property of your UIButton to [UIColor clearColor]`; If you've connected an IBOutlet to your UIButton then you can do something like this

[myButton setBackgroundColor:[UIColor clearColor]];

This will only work if you have a well defined transparent image. If you have some areas in your image that is not transparent then the above method will not work and you will simply need to edit your image again to make sure all the areas are actually transparent.

If you're in iOS 7, I believe the UIButton is already transparent and its up to your image to do the rest.

UPDATE 1

OP has requested for the title to remain above the image of the UIButton. Here is the solution for that,

What you need to do is set the backgroundImage property of the UIButton instead of simply setting the image of the button which will push the title down as you have found out.

Again I'm assuming you have an IBOutlet connected to your button; simply do the following:

  1. Make sure you delete any image setting code in interface builder so that the properties are blank.

  2. Then implement the code below

    //This is the bit that does the magic - setting the background property
[myButton setBackgroundImage:[UIImage imageNamed:@"button.png"] forState:UIControlStateNormal];

//Then you can set the title as you require, the title will be centered floating above your background image.
[myButton setTitle:@"Localised String" forState:UIControlStateNormal];
[myButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

And you will get something like this:

enter image description here

Upvotes: 2

tt.Kilew
tt.Kilew

Reputation: 6084

As already been said - you can use semi-transparent PNG for image.

As for putting up title over the image - you would need to write some code.

You won't be able to do this in Interface Builder.

So you can easy create button

@interface MyButton : UIButton 

@end

@implementation MyButton

- (void)layoutSubviews {
  [super layoutSubviews];
  [self bringSubviewToFront:self.titleLabel];
}

@end

As for image, covering the whole area - it's better, when possible, to use background image rather image.

For partial background color transparency - you always can set semi-transparent background color for it in IB or in code:

[button setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.5]];

Upvotes: 1

Prince Agrawal
Prince Agrawal

Reputation: 3607

You have to use a PNG image with transparent background. To remove background colour of a image, Let me suggest you a free tool "GIMP" I've been using it for a while.

Upvotes: 1

Christian
Christian

Reputation: 4641

If you are using a proper PNG file with transparency in the file, this works automatically without changing the alpha value. If the PNG does not have the transparent area defined properly you will not be able to achieve this by a property (only by complicated drawing methods, which is probably not want you want).

Upvotes: 1

Related Questions