Anyone familiar with Xcode will likely understand the breadth and depth of the Cocoa Touch library. This mobile development suite includes pre-built components for all of the native iOS functionality such as input fields, switches, sliders, and definitely buttons.
In this tutorial I’d like to show you a simple way to implement your own custom button graphics. I’ll be using the latest Xcode 4.2 release and building an application in iOS5. You do not need to understand Objective-C but it certainly doesn’t hurt the process. When building iPhone apps you’ll eventually have to deal with code so Objective-C should be something to embrace!
Picking out some Buttons
To start we should find the perfect graphics to use in our application. There are literally dozens and dozens of freebie-type websites out there where designers will post their work for download. I’m going through 365psd which has some of the best PSD resources for mobile designers.
If you have the graphics skills to make your own buttons then I say go for it! Yet this tutorial focuses around Xcode so I’m using pre-built graphics to save time. As a suggestion though I recommend scaling your graphics as vector artwork. You’ll need a retina display size for your button which is double the original dimensions.
I’m working with the Cloudy UI buttons created by Sebastien Gabriel. I’ve basically scrubbed all the text off and re-sized for two different scales (standard and retina displays). I also created two sets of buttons – one normal and one highlighted for when the user taps down. Altogether this comes to four files which you can download here.
Building a New Project
By now you should be familiar with creating a new project in Xcode. But to reiterate hit File -> New -> New Project. From the templates list select Single View Application. Then give your app a name and bundle identifier. We actually don’t need a storyboard here whether you use .xib files or not – but leave it checked for now.
On the left side in your Project navigator you should see a folder labeled “Supporting Files”. You want to drag-and-drop your four button files into this group. Notice each of the buttons should be named according to Apple Developer regulations. Here’s the names I have setup:
- Button.png
- [email protected]
- ButtonHighlighted.png
- [email protected]
When importing the files make sure you select “Create groups for any added folders”. Hit Finish and organize your files if needed.
Coding the View Controller
If you notice in our project navigator there are very few files to work with. Select ViewController.m and look for the function viewDidload. It’s inside here that we’ll setup our buttons and configure them on the view.
[cpp wraplines=”false”] // creating custom button properties
UIFont *buttonFont = [UIFont fontWithName:@"Noteworthy-Bold" size:17.0];
UIColor *buttonColorDefault = [UIColor colorWithRed:90.0f/255.0f green:90.0f/255.0f blue:90.0f/255.0f alpha:1.0];
UIColor *buttonColorHighlight = [UIColor colorWithRed:255.0f/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:1.0];
UIImage *btn = [UIImage imageNamed:@"Button.png"];
UIImage *btnh = [UIImage imageNamed:@"ButtonHighlighted.png"];
[/cpp]
To start I’ve included a few variables we will use on the button styles. I also created two new variables which store a UIImage data type for our two button states (normal and highlighted). Notice we don’t need to declare the @2x retina images because the iOS compiler recognizes to display these by default.
Custom Button Properties
If you are with me so far then let’s just jump right into the button code. This requires us creating a new UIButton and setting the buttonWithType parameter to UIButtonTypeCustom. From here we can also implement further customizations.
[cpp wraplines=”false”]// building the buttons
UIButton *aboutBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[aboutBtn addTarget:self action:@selector(showAboutPage) forControlEvents:UIControlEventTouchUpInside];
[aboutBtn setTitle:@"About Me" forState:UIControlStateNormal];
[aboutBtn setFrame:CGRectMake(80.0, 120.0, 162.0, 42.0)];
[aboutBtn setBackgroundImage:btn forState:UIControlStateNormal];
[aboutBtn setBackgroundImage:btnh forState:UIControlStateHighlighted];
[aboutBtn.titleLabel setFont:buttonFont];
[aboutBtn setTitleColor:buttonColorDefault forState:UIControlStateNormal];
[aboutBtn setTitleColor:buttonColorHighlight forState:UIControlStateHighlighted];
[/cpp]
You can probably figure out the common properties in this code block. The button fonts and backgroundImage settings are all using the pre-built variables in our first bit of code. The CGRectMake function is a bit confusing if you aren’t familiar with the syntax.
This basically creates an object to place on the view with pre-determined settings for width, height, and X/Y coordinates. Our first button will read “About Me” and calls out to an empty selector function named showAboutPage. I added that code directly after our viewDidLoad() method(copied below).
[cpp wraplines=”false”]- (void)showAboutPage
{
// use this method to display your about page
// only when the button is tapped and released
}
[/cpp]
Displaying the UIButton
If you go and run the application now nothing will show up. We do have our button programmed and styled just right – however there’s one last line of code we need. After all the lines of button configurations (but still inside viewDidLoad) add this last line of code:
[cpp wraplines=”false”]// place the button into the view
[self.view addSubview:aboutBtn];
[/cpp]
This uses the CGRectMake method to build and display our button of the exact dimensions and X/Y coordinates on the screen. Go ahead and compile the app to notice we have our first button! You can tap and you’ll get the highlighted effect – but there is no actual callback code. You would need to edit the function we made earlier called showAboutPage to push onto a new view controller or whatever action you’d like to happen.
If you are feeling ambitious try copy/pasting the same button codes and create a few more. Remember that you’ll need to change the CGRectMake() function coordinates to move the new button either below or above the first one. You’ll also have to think of a new variable name other than aboutBtn.
However if you still can’t get it work don’t feel discouraged! Xcode is difficult and does take a lot of practice. Download my source code example below and see if you can compare your own project with mine.
Conclusion
For anybody interested in building iPhone apps this should be a great introductory tutorial. Learning how to customize iOS user interface elements is crucial to expanding your development knowledge.
Not to mention that Xcode makes a fantastic IDE for coding in Objective-C. You can check through Google for dozens of similar freebies – even more than just button sets. Whole UI kits are often put together and offered for free by talented designers. If you have ideas or questions about the tutorial feel free to share with us in the post discussion area below.
