{ explore .net }

To content | To menu | To search

Tag - cocoa

Entries feed - Comments feed

Wednesday 25 March 2009

Customizing controls in Interface Builder doesn't give expected result

By Steven Hillaert on Wednesday 25 March 2009, 14:32 - iPhone

In my previous post I talked about pimping the standard UISlider, I did the same with the UIButton and in both cases I found out that changing the images of the controls in Interface Builder doesn't give you the expected result.

For instance, to pimp the UIButton I changed the background image to a nicely shining transparent and glowing button but when I set this image in Interface Builder it still showed the standard button image behind it. If you have a non transparent image that nicely fills the UIButton you probably won't notice it but in my case it was really obvious.

When you create the button in code it appears just like you expect, no residue what so ever of the original UIButton.

If somebody has a solution or some advice on this topic please enlighten me.

UPDATE:

Fred Garvin has shown me the light.
In IB, if you use the UIButton and you want custom graphics, you need to set the "type" to "custom" (this gets rid of the other button image stuff). Then use the "Image" rather than the "Background Image" for the various assets (up, over, down states etc) by switching the drop down that defaults to "All".

one comment no trackback

Monday 23 March 2009

Pimp My UISlider

By Steven Hillaert on Monday 23 March 2009, 11:40 - iPhone

To make the interface of our application a bit more sexy we wanted to customize the standard controls of the iPhone. For instance, we designed some glassy and glowing bars to pimp the standard UISlider control.

All you need to do is create some images and write a few lines of code.

So first create your images:
- one for the thumb button
- one bar image for the left side of the thumb button, e.g. a glassy bar with an outer glow to show the "progress"
- one bar image for the right side of the thumb button, the same as the left bar but without the glow

The only thing you have to pay attention to is that both bar images have the same size. In our first test the glowing bar image was a bit bigger than the non glowing one and this caused the glow not to appear. Once we changed the right bar image to the same size everything worked perfectly.

Now you just need write some code to set the images:

CGRect rect = CGRectMake(16.0, 390.0, 297.0, 35.0);
slider.frame = rect;

UIImage* thumbImage = [UIImage imageNamed:@"thumb.png"];   
[slider setThumbImage:thumbImage forState:UIControlStateNormal];

UIImage* leftImage = [UIImage imageNamed:@"SliderLeft.png"];   
[slider setMinimumTrackImage:leftImage forState:UIControlStateNormal];   

UIImage* rightImage = [UIImage imageNamed:@"SliderRight.png"];
[slider setMaximumTrackImage:rightImage forState:UIControlStateNormal];

Just make sure that the height of the frame is big enough for your image else it gets clipped.

9 comments one trackback