de

I was interested in implementing a simple button, which had a normal state and a ‘pressed’ or ‘highlighted’ state when being touched. I found an endless supply of lines of code, but after a little more playing around I found something new. And, it uses my fantastic principle of ‘simple’!

Firstly, what does the button look like? Its very simple really, its a modest edit button. The left image is the Normal state, the right button is for the highlighted state.

And here is a (blurred) pic of the edit button in action, in my current development app. I did say it is modest.

So how is it done?

Well this one is 100% thanks to Interface Builder and it should be quite easy to follow.

Well, open Interface Builder, create a UIButton and add an Image to the button (as one normally would). See the below screenshot.

Now, Do you see where it says ‘Default State Configuration’ just under the ‘type’ setting? Press it

We are now given 4 states where we are able to alter the button under, all without requiring any code at all!
Default State: Button is in its normal state
Highlighted State: Button is being pressed (this is the one we want)
Selected State: Extra code has registered this button as ‘active’ and so its in ‘selected’ mode
Disabled State: Extra code has registered this button as ‘disabled’ and so its in ‘disabled’ mode

So now I would go into ‘Highlighted State’ and just change the image, to the second edit image (see below).

And thats it! No code at all. Build your app and test it!

Future Exercise:
Create the entire button without even the jpgs (Skill: Beginner)

Download: PSD Files (free for personal/commercial use)