iPhone Programming Tutorial – Beginner Interface Builder Hello World

July 29th, 2008 Posted by: brandontreb - posted under:Tutorials

In my last tutorial UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone.  Here is one using Interface Builder. Last time, I demonstrated a simple way to populate one cell in a UITableView with some text.  Today’s tutorial is even simpler.  I will show you how to work with Interface Builder to create a simple layout for you application.  In fact, you won’t write any code at all! In my next tutorial, I will detail how to interface with your UI components in code.

In this tutorial you will learn:

Create a New View Based Project

Let’s start by opening up XCode and Creating a new View-Based Application.  Do this by clicking on
File > New Project. Make sure that Application is highlighted under iPhone OS and select View-Based Application. Name this project HelloWorldViews.

So at this point, Apple has added some default files to get us started.  They have added the main window for us to edit along with the code to launch the window.  Now in iPhone terms, each window is called a View.  Since you can only see one view at a time, you will need to create a new view for each screen in your application.  In this tutorial, we will be sticking to editing the view Apple has provided us.  In later tutorials, I will go into how to add new views and transition between them.  Go ahead and click Build and Go.

Opening the iPhone Simulator

The program should compile and launch the iPhone Simululator. Your screen should look something like this.

Not very interesting right? Excuse my crappy screenshot.  So let’s add some UI components to our view to make it more interesting.  To do this we will be editing HelloWorldViewsViewController.xib . A file with the .xib extension is known as a nib file.  These files open with Interface Builder and are where you define the look and feel of your application.  Apple is nice enough to have provided us with one.

Adding UI Elements to You Home Screen

Once you open Interface Builder, you should see a few different windows… You should see a blank window that has the same dimentions as the iPhone that says View up in the top.  If not click the View icon in the smaller box.  This is the main window we will be editing.

To the right, you should see a tool box that contains many different UI components.  Most of them should look familiar if you have ever used an iPhone application.  So let’s add a few of them to our view.  Just click on the one’s you want and drag them on to your view. Make sure you at least use a Label.  For this tutorial, I have used a Label, Search Bar, and a Tab Bar.  Notice when you drag the search bar and tab bar onto the view, they size correctly to the screen.  Also, if you move the items around, you will see blue lines that guide you.  These are in place to help you line up components and center them.

After you have added the label, click on it.  Now let’s open the Attributes Inspector to change the text of the label.  To do this click Tools > Attributes Inspector. At the top of the Attributes Inspector you should see a box labeled Text. If you don’t click on the label again to select it.  Put whatever you would like the label to say in that box.  I put “Hello World”.  You can update other properties of the label including color and font using the Attributes Inspector.  You may need to resize the Label to accommodate your new text.  To do this click on the label and you will see little boxes around it that you can drag to resize the text area.

After you are done, your interface should look something like this:

Now press Apple-S to save this file.  We are done with Interface Builder so you can close it.  Your application should now be ready to execute.

Executing the Code

Go ahead and click Build and Go again to launch the iPhone Simulator. Your screens should look something like this:

There you have it! A simple iPhone application without writing a line of code. If you click in the search box, the iPhone will automatically pull up the keyboard.  Thank you for reading this tutorial and I hope that you have learned something.  In my next tutorial, I will show you how to use code to interface with our UI components.  If you have any questions, feel free to leave them in the comments. Happy iCoding!

  • Jon

    Lovin’ it… ready for step 3! =D

  • Adam

    Simple and easy to follow. Keep it coming.

  • http://www.shokk.com/blog/ Ernest Oporto

    Very simple first steps. Thank you! Looking forward to other pages on your site.

  • http://street-streetmachine.blogspot.com/ Alex

    I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you down the road!

  • http://icodeblog.com/2008/07/30/iphone-programming-tutorial-connecting-code-to-an-interface-builder-view/ iPhone Programming Tutorial – Connecting Code to An Interface | iCodeBlog

    [...] Beginner Interface Builder [...]

  • http://street-streetmachine.blogspot.com/ Alex

    Your blog is interesting!

    Keep up the good work!

  • AdamK

    Simple & well written. Can’t think of an easier way to get started!

  • Brook

    Yay still having fun learning

  • stu

    At last, a decent beginners look at interface builder, and on the latest SDK release too. Well done, can’t wait for more.

  • Tan

    Great VERY detailed tutorials.
    Thank you. This stuff can be intimitading at first if you don’t have a guide like this.

  • http://www.polyextrude.com Walter

    These are great! Thank you, thank you, thank you. I am happy to find someone that has put up thorough and easy to use and tutorials.

  • Gabriel ronai

    Great intro, did you consider making video tutorials from these? Some sort of screen capture tthat shows when and what you do. I would love to subscribe to such a podcast.

  • http://icodeblog.com Brandon

    That is a good possibility. As soon as I get some ads on the site and start generating some revenue, I can buy some good screen capture sw.

    At that point, I will start doing some video tutorials.

    Thanks for reading…

  • Ulthor

    Great tutorials. I am grateful. Keep ‘em coming!

  • jijo

    hi, thanks for this blog.. I am facing one issue that when I do build and go, the UI elements are seems to be disable..
    I am unable to click the search field or button..
    let me know where i mistaked..
    I followed all the steps specified in this blog.
    I got the previous hello world application as well.

    please help to solve this issue

  • http://icodeblog.com Brandon

    @jijo,

    This is a strange issue. In the attributes inspector for each of the UI elements, make sure that they are not set to be disabled.

    Have you had this problem with any other tutorials? Do you have the latest version of the iPhone SDK?

  • Leanna

    “To the right, you should see a tool box that contains many different UI components.”

    This isn’t happening for me. Is there a way for me to get the tool box another way? Thanks.

  • Leanna

    Nevermind! Found it!

    Tools>Library

  • http://Easy hiroko

    I could make it.

  • Magistus

    Thank you for your wonderful tutorials! They are invaluable, keep up the good work!

  • Griff

    Just what i was looking for :D

  • Matteo Lanzi

    thanks :)

  • MarkRawcliffe

    Well done, I was happy to stumble over your site. It’s great that x-code and iPhone SDK are free. It’s better to find a resource that clearly tells you how to use it. I’m hoping the rest are as good, sure they will be!!!!!!

    Thank You so much!

  • DP

    Thank you very well written

  • Tony

    Thanks, just what I was looking for to start!!

  • http://thinkjoke.dontexist.com rush

    Great Tutorial! Looking forward to reading more, keep up the good work!

  • http://www.intellegentia.com.br Reinaldo

    Thanks for the tutorial! Very good job!

  • Christoph

    Hi, thank you so much for these tutorials. They are the best out there. Thank you!

    Quick question, I hope – using SDK 3.0 with the example above, how would you allow for the device to be rotated and everything on the screen then updated. Say 90 degrees to the right?

    Christoph

  • rickO

    Another great article, thanks again!

  • adarsh

    very interesting tutorial :)

    thanks :)

    adarsh

  • kris

    do you have a donate button?

    men, this is all great i-nfotainment ;)

    i love that!
    today i finished the complete design and navigation concept of my first app. i will now what until my new mac mini arrives and of course, buy the beloved SDK :D

    i don’t know much about the API and Xcode, but thanks to you i am not worried about it anymore ;)

    i hope i will finish before flash comes to the iphone.
    if flash is released before, oh damn – i wouln’t bought a new mini! :)

    keep up the good work
    kris

    send from my iphone

  • Dave

    I wish the stuff apple had on there website was as easy to understand as your stuff… I have been trying to build something (anything) for 3 days and yours is the first that showed clearly how things work together!!

  • lol

    “to YOUR home screen”, not “to you”, you illiterate fuck.

  • Dinbrej

    WOW lol is so smart!

  • http://themeetingnazi.com harryb

    You are god sent. Keep it coming.

  • lil

    This is the site I’ve been looking for. Straightforward and insightful iphone tutorials! Thx very much

  • Jeff

    Thank God kind people like you exist to show us this! I’m doing research to help program an app for my sister and I was so lost when I first downloaded the SDK. Thank-You!

  • http://www.pegasyssoft.com prakash

    Thanks for great tutorials.

    Thanks
    Prakash

  • http://comtersoft.com/drupal/iphone-programming-for-beginners/ comtersoft » Blog Archive » iPhone programming for beginners
  • Imtiyaz

    Keep up the good work.

  • wooka

    I feel guilty that I’m not paying for these tutorials!

  • haku

    wow amazing. this is very fun. and thank you for your teaching.

    I have a questions.

    Can I make different keyboard that pull up automatically…

  • http://poerlomlaxlep@mytop-in.net VionignViaf

    bleach episode 236 english sub samcro tyra banks real hair never gonna dance again roger rasheed gael monfils burning man 2009 photos caster semenya makeover monfils tennis player katt williams prince fielder home run celebration mrs america pageant tania head michael jackson burial pictures petrificus totalus beatles remastered box set big brother 11 episode 27 nfl picks week 1 freddie roach melrose place 2009 cast obama speech to kids video ratzilla jon gosselin interview good morning america national sex offender registry primetime family secrets barack obama speech to students john adams project tyra banks show full episodes the girl who cries blood webassign

  • http://technotweets.com devang paliwal

    I the project template u selected a view based templatee …
    how caome you are getting tab view for your application.
    I think you took screenshot with TabedView Template as a base. Am i right ??

  • http://www.squarefrog.co.uk Paul

    Thanks for creating these tutorials. They are well written and easy to follow.

  • keithernest

    Thanks for these very easy to follow tutorial. really helpful

  • j

    Wouldn’t it be better to bog us down in the details objective C, the way the other dev sites do ?

  • http://www.entdyn.com Korky Kathman

    Terrific! You’re about the only iPhone Tutorial site that doesn’t have any errors, and is written in decent English! Thank you!

  • Vazgenchik

    Thank you very much, very interesting tutorial!!!!

  • zoomCrypt

    yeah this is awesome. thanks!

  • http://www.philoswald.f2s.com/joomla/ Ricky

    These tutorials are brilliant, I’ve completed the first few and read ahead over the others.

    I am having a little trouble though, for some reason it does not like me to @property and @synthesize. If I comment both of these out, the app works fine. I have not found it neccessary to use these when following other tutorials, so I am wondering if they have been made redundant?

    I’m running Xcode 3.1 on (virtual machine, windows 7 32-bit) leopard 10.5.5. I had to edit some systems files to trick it into thinking it is 10.5.7 in order to get the iPhone SDK to install. Could any of this be the reason that @property and @synthesize do not work for me.

    P.S. the error I receive is:
    “Error from debugger: Failed to launch simulated application: SpringBoard failed to launch application with error: -1″

  • Meito

    This does not work on simulator for 3.1.2, when i dropped the object into the view they cover each other, its like when i put one it erase that one which was first, i dont get it , sorry

  • http://uhiiu Helper

    Hi Meito

    I just had the same problem.

    Look for “View” in the library and drag it to the screen. Then you can drag other objects (labels, buttons…) onto that screen and they won’t replace each other anymore.

  • Meito

    hi, thanks a lot helper, but i already tried that solution and in fact i can drag other objects but when i execute the app the iphone simulator show the objects but for example when i use the search bar all the objects became unvisible, its like the view does not resize the objects properly, its like the objects cannot reorder to fit at screen

  • Meito

    i fixed it, for 3.1.2 simulator, you have to drag a view (not a view controller) into the footer section, dont drag the view to the header if you are going to use search or anything that will launch the automatic keyboard. If you put the view on the footer, then you can drag anything there, including textfields and others

  • http://jpaulh.blogspot.com Jean-Paul H.

    Hi there,

    I’ve wanted to start programming on the iPhone for a while. I’ve managed without a problem writing J2ME applications in the past and I picked up the Android SDK in a snap. However, the iPhone had always been a problem. I’ve gotten about 3 or 4 books on it, started reading most of them and never went further. I discovered your blog a couple of days ago and I must say I am progressing a lot faster than reading all the books out there.

    Thank you so much for your clear and concise writing. You’re a star!

    Cheers!

  • http://stojadinovic.net Predrag Stojadinovic

    Hi, complete iPhone Apps developer newbe here :)

    First off, these tutorials are a great GREAT help! I really appreciate you taking the time to write stuff like this up!!!

    I have a relatively confusing problem: namely, I created several empty projects and ran the emulator just to see what happens and everything is fine, empty, but fine. However, I decided to actually add some content BUT when I double click my .xib file nothing happens :( (( The Xcode loses focus, but nothing opens. The Interface Builder simply does not open :( ((

    Do I need to start it separately or do I need to download and install it separately or something else altogether?

    Thanks!

  • http://stojadinovic.net Predrag Stojadinovic

    I solved my problem. The problem was that the .xib files were not “registered”… when i tried to open it from Finder it said “i don’t have a standard program for this” (loose translation from german)… then I went into Developer/Applications and started IB which worked. Then I did a right-click and Open With… on the .xib file and selected IB and since then it works from Xcode as well…

  • http://icodeblog.com/2010/07/29/iphone-programming-tutorial-local-notifications/ iPhone Programming Tutorial – Local Notifications | iCodeBlog

    [...] will be using this as our starting point.  Check out this tutorial if you are unfamiliar with doing this.  Name the project [...]

  • http://shaiperednik.com/2010/07/iphone-programming-tutorial-%e2%80%93-local-notifications/ iPhone Programming Tutorial – Local Notifications » Shai Perednik.com

    [...] will be using this as our starting point.  Check out this tutorial if you are unfamiliar with doing this.  Name the project [...]

  • http://icode.dreamvision-soft.com/blog/?p=72 iPhone Programming Tutorial – Local Notifications | iCode

    [...] will be using this as our starting point.  Check out this tutorial if you are unfamiliar with doing this.  Name the project [...]

  • http://www.ios4jailbreak.com/2010/07/iphone-programming-tutorial-%e2%80%93-local-notifications/ iOS4 Jailbreak » iPhone Programming Tutorial – Local Notifications

    [...] will be using this as our starting point.  Check out this tutorial if you are unfamiliar with doing this.  Name the project [...]

  • Horst

    Hi,

    great tutorial. i have done all, my “Adding UI Elements to You Home Screen” looks same. But executing the code brings a white screen. If i press the HOME button it shows my app icon. Cant figure what I am doing wrong. Any hint ?

    Cheers

  • http://www.handyapps.co.nz Jamie McClymont

    I have the same prob, can’t help.

  • http://www.digital-canopy.com Brian Kuyath

    Simple, easy-to-follow tutorial! Thanks!

© 2010 iCodeBlog. All rights Reserved. About iCodeBlog | Privacy Policy | Terms of Use | |