You can easily create buttons, link actions to them, but they aren’t cool at all.

This is the typical button:

And when being pressed (highlighted):

In my opinion rounded corners look nice, so do the highlighted version, but this white background doesn’t appeal to me. Open the Clock application and go to the Stopwatch. Don’t you think that these Start/Stop and Reset/Lap buttons are more acceptable? Yes, they are.

You might have noticed that using Interface Builder you can set the background color of UIButton. Exacly. Below you can see the button with green background:

That’s it. UIButton has the green background color. Thank you very much and read my next tutorial.

Oh, sorry for the irony. So, in the case above, button looks like a TV from ’90s rather than a green button. There is a simple way to achieve results similar to the Stopwatch application. All you have to do is to get rid of UIButton and use UISegmentedControl.

UISegmentedControl is typicaly used in options / settings views, where you are able to pick one option of many.

Today, I’m going to show you how to customize this UISegmentedControl:

so it will look like this nice button below:

Unfortunately you cannot do everything in Interface Builder only, so you will need to create an IBOutlet and connect it to created UISegmentedControl in Interface Builder.

IBOutlet UISegmentedControl *myShinyButton;

In Interface Builder go to UISegmentedControl’s attributes, and set Segments=1 – so your UISegmentedControl will consist of only one segment – button. Check momentary – as you see on above UISegmentedControl example (First | Second), First is selected an it stays in that state until you select Second. Once momentary is checked the segment returns to the normal state after a second. Change the style to Bar – only bar can be customized in the way I want to show you. And the last thing you need to do: uncheck the selected for the current segment. Double click the button to type your own text on it. Your button should look like this:

Now you can customize the color, but you can only do it in Xcode. Use the property tintColor:

myShinyButton.tintColor = [UIColor darkGrayColor];

Here is how your button will look like after it:

Please note: avoid setting “strong colors” as a tintColor. Otherwise there will be no visible difference between normal and selected state when the color becomes more intensive. darkGrayColor will be perfect replacement of blackColor. You can also play with setting RGB colors where you have full control of intesitivity of red, green and blue.

Programmatically

	codeButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObject:@"My Button"]];
	codeButton.segmentedControlStyle = UISegmentedControlStyleBar;
	codeButton.momentary = YES;
	codeButton.tintColor = [UIColor lightGrayColor];
	codeButton.center = CGPointMake(160,400);
	[self.view addSubview:codeButton];

Please note:

It won’t be discussed with details here, but remember, you can always use an image as a button (UIButton type: custom). Simple code:

	[button setImage:[UIImage imageNamed:@"myButton.png"] forState:UIControlStateNormal];
	[button setImage:[UIImage imageNamed:@"myButton_highlighted.png"] forState:UIControlStateHighlighted];
	[button setImage:[UIImage imageNamed:@"myButton_selected.png"] forState:UIControlStateSelected];

Providing the right images will give you any effect you need.

Actions

To link any action to buttons created with UISegmentedControl use a value changed event instead of Touch Up Inside. In Interface Builder it should be quite easy, but to do it programmatically:

	[codeButton addTarget:self action:@selector(simpleAction) forControlEvents:UIControlEventValueChanged];

As usuall, sample project for you:

Download the project