Last week I showed how to use a slider in code – this week I do the same thing using Interface Builder.
Interface Builder is the GUI tool that Apple provides that lets you visually design the elements that your users interact with. It is a great help to work with placing elements in a pleasing way and a lot of people simply prefer IB to code when it comes to designing the View.
Interface Builder can be tricky to use though so I put this step by step guide with video to help you (and also the future me) to use IB effectively.
PS: the embedded video looks ok but not great. I recommend clicking through to the YouTube main site and viewing it in HD if you are having trouble seeing some of the details.
Step 1: Create a New Project and Add a New View Controller
- Open XCode and select File>New Project and choose Window-based application
- Control click on the Classes group and select:
- - Add, New File, Cocoa Touch Class, UIViewController subclass, Select “With XIB for user interface”
- This creates three files: h, m and xib
Step 2: Configure the View Controller
- Select the h file and add outlets to represent your label and slider
- Select your m file and finish adding the outlets and action
Step 3: Add the View Controller to Your App Delegate
- add the view controller outlet to the h and m file
- instantiate the View Controller and add its view to the window
Step 4: Configure the View
- Select the view xib that was automatically created
- Add a label and a slider
- Set properties and layout
Step 5: Make Connections
- Select the File’s Owner icon and control click it and then drag the blue line to the label
- Under the outlets screen that appears select the outlet in your code file
do the same for the slider
- Now control click the slider and drag the blue line to the File’s Owner icon and select the updateLabel event
- Save and build your project
So, that is how you use IB. For me – I find it difficult to come to grips with, however the fact that it helps with your layout is useful. One bit of advice – set aside some time to learn how to use IB. It may take a few tries to get the hang of it.
Even if you do like IB a lot you may find that certain things work better without IB (I’m looking at you UITableView!). Try to keep an open mind about where IB fits into your workflow.
Do you have any tricks or tips when it comes to using Interface Builder?
PS: I have made the source code available to subscribers of my newsletter. If you are a subscriber go to Area 42 if you would like to download the source.
How to Use a Slider Interface Builder Style (with video)…
You’ve been kicked (a good thing) – Trackback from iPhoneKicks.com – iPhone SDK links, community driven…
Hello,
I’m wondering why you chose to use the Windows-based app for your demo. Had you started with a View-based app you wouldn’t have had to create the view nor set it up in the AppDelegate file. Could have saved half the time it took to do the demo so you could have focused solely on the slider.
Anyway, I’m enjoying your blog. I’m just getting back into this again after spending a lot of time last year trying to get going. See my intro post here:
http://www.daleisphere.com/iphone-app-development-where-to-start/
I’m still stuck with how to create a multi-view app that can cycle between two primary views, but I think this time I’m going to make it through to a workable app.
…Dale
Hey there,
I did that on purpose because I wanted I wrote a similar blog post about how to do this task in code (originally the week before). So, I wanted users to be able to follow along step by step to see the differences. You are right now, in general you can use use the “View Controller” template and it is quicker.
Liked your post – you have a pretty long list of resources there. Have you investigated use a “tab view controller” to cycle through multiple views. It is probably the easiest way.
[...] First, create a view based iPhone application in XCode and add a button to your view that will play the sound. If you need a refresher on how to use Interface Builder to hook up controls check out my article on adding a slider control. [...]