Updated Oct 3 2013: This tutorial is compatible with XCode 5 AND XCode 4!
We’re taking a practical approach to learning iOS programming. This means lots of hands on work and practice!
In order to benefit the most from these lessons, you should open XCode and try to follow along.
This is part 4 of the lesson plan. Click here for the entire Learning Plan.
It’s time to change our blank XCode project so that we can see something on the screen of that iPhone simulator!
We’re going to be modifying the view through Interface Builder so click on ViewController.xib which is the default view that XCode has created for you. It’s also the view that your ViewController class manages.
When you select it, the editor area of XCode is going to change into a visual designer.
Before we proceed any further. Take a moment to look at this visual diagram of what the different areas of XCode are called because we’re going to refer to them by name.
(If you’d like a more in-depth tour of XCode right now, you can do so in my XCode guide)
If you’re using XCode 4, it may look a little different but the areas and tools shown in the diagram above are the same.
In the Library Pane which is the bottom half of the Utility Area in the lower right corner (you may have to click on ViewController.xib before you see the library pane), type in “UILabel”. If you don’t see UILabel, you may need to switch to the “Objects” tab of the Library Pane (The “objects” tab can be shown by clicking the blue cube icon near the middle of the Utility Area in the screenshot above).
Once UILabel shows up as a draggable control, you can click and drag and drop it onto your view.
This will create a UILabel on your view.
At this point it doesn’t have any text, so on the right hand side property inspector, find the text property and type in “Hello World”!
After you’ve modified the text, click the Run button on the upper left corner of the XCode interface and watch your Hello World app come to life!
In this tutorial you learned how to add elements to your view from Interface Builder as well as how to customize properties on your UI Elements.
Frequently Asked Questions
If you have any questions on this tutorial, please ask in the comment section below and I’ll update this section with Q&A.
Hi Chris, I am able to click and drag the Label however, nothing appears on my screen. I do not get the blue dotted lines. Help please 🙂
Chris. Thanks so much for putting these videos together. It’s fun to try and learn a new skill. I’m using 5, and when I first ran the program my “Hello World” was all the way to the right. I read through the comments and noticed that someone recommended unpicking the box in the inspector that auto formatted the project (in my mainstoryboard it was initially a big square instead of a “iPhone shaped” rectangle). I did that, and now my text is just off center to the left. Any ideas? Thanks!
Hey Andy, you can just reposition your label!
Hey Chris, that’s the weird thing. It’s dead center until it renders. The same thing happened with each object in the next exercise (changing text with the text box and button)
Sounds like auto layout shenanigans!
If you just want to turn it off, in your storyboard, select your view controller and in the right pane (inspector) one of the tabs has an autolayout checkbox option you can uncheck.
Basically the autolayout system works by specifying relative positions. For example, “position this label 100px from the left”. So what you see in the storyboard may not be reflective of how it’s really positioned. Each of these rules is called a constraint. When you run it, the label will be positioned based on the constraints.
So you probably have accidentally specified some constraints for the label that you didn’t mean to. If you select your label, on the left side of the storyboard, there’s a list of constraints for the element.
I have written codes in VB and I find this (for now) have a lot of similarities. I am using Maverick so obviously this tutorial (THANK YOU VERY MUCH) was written before the release of Maverick. Anyways, I have XCode and don’t see the ViewController.xib but instead, I see LaunchScreen.xib. I launch that and it isn’t similar to what is in the tutorial. Also, the uilabel if I search from the tools pane return empty. What am I doing wrong. Thanks!
BTW – – – I love your work. Great tutorial.
Hey Arthur, in that lower right pane, there are three tabs you can select. Make sure you’re looking at the “objects” tab. I believe it’s a cube looking icon. Thanks for following!
I dropped the the label in the middle. In fact, i actually centered it using the helper lines, but when i run the ios simulator the label is way off to the right side of the screen, only half-visible. Any ideas why?
Hi Peter, select your Main.Storyboard then go to the Utilities pane and select “Show the file inspector” and uncheck the box that say “Use Auto Layout”
oh man, you’re a life saver…. or at least a hair saver. i was pulling all of my hair out trying to figure out how to fix that. it seems so trivial. i didn’t want to move on until i figured it out. thanks!
Hey Chris, thank you SO much for putting together these videos. Ive been searching for a long time how to learn Xcode but your website was the only one I understood.
Thanks for everything….
Hello Chris
My label appears exactly in the center of the storyboard but when i run it it doesn’t appear in the center in the simulator. How do we fix that ? I am using Xcode 6. Do you teach such positioning and auto layout in your membership classes ?
the best tutorial ever !
Hi, I get just a blank white screen when I run the simulator. The label doesn’t appear. Can anyone help?
Hey Chris, I am taking your course. But when I try the lesson three (label) the screen comes up just plain white. Can you help with this?
Hello gobert. Were you able to resolve this plain white screen issue ?
Hi Mishit. Yes, I was able to get the issue resolved. Thank you!
Is it normal if just appears the “iOs simulator” white screen, but not the actual “iphone”? Also I havent got the .xib file, just the storyboard, .h and .m. Thanks!
Hey Adry, you can just treat the storyboard as the XIB for this demo! If you click CMD+1, CMD+2 or CMD+3, you can change the zoom level of your simulator to display the bezel!
Awesome. Now I hope to review each concept and understand the keywords and labels functions. Thanks for the viddies and lessons!
Hey Chris, (love your videos)When I try to run the app after adding the label, the build fails and comes up with three issues, I have no idea what any of it means, please help! I haven’t been able to successfully build any app without having an issue yet, and I have no idea what any of it means or how to fix it! Some help would be great!
Hey Joel, it seems like you have a typo there. There’s a “v” that’s not supposed to be there!
I think I accidentally typed that after the issue came up, because removing the “v”, achieved no difference.
Hi Chris I am trying to follow your videos they are excellent but I am doing something wrong. I cannot see the .xib fil (2:04 on the video). I been trying to follow step by step but Is not showing me this file. I guess is here were you are able to see the visual interface and add buttons etc.. Please advise. I am using Verion 5.1.1 thanks Marcos
Hey Marcos, just treat your Main.Storyboard like my Xib file!
I love your tutorials, I just wish I could follow along but my viewer and some other things don’t match up with what you say they should look like.
Hey Undergroundman, truly apologize for that! The course videos are updated but I’m still in the process of updating these free ones. The text version below the video is updated for Xcode 5 though so I hope you can follow that!
Hello chriss,
I am one of your newly joined student all the way from Dubai – UAE. I have recently shifted from PC to Mac and I love Apple products. I wish to become an App developer for Apple and this is what brought me here… I’ve been following your videos with close attention.Thanks for taking time and efforts to make videos and tutorials for the sake of making us understand Xcode Objective C… you’re the man! Bless you for this good noble cause you’re doing out here for all of us wanting to learn Xcode!
That’s for reading Salman. I agree that there’s just something appealing about macs. (could be just a psychological effect from there marketing/branding lol) Anyways, i hope you continue to read and watch and grow in your learning!
Thanks Dear Chris! I done it….
Hello Chris!
I Just stopped the video for a sec to write this comment. You must be by far the best online teacher that i ever came across. Thank you for putting these awesome tutorials online. I hope i will get to my first app, if i do so i will let you know!
Thank you
Toon-Bert
Thanks Toon-Bert! 🙂
I have xcode 5 and my ios simulator doesnt start with a blank screen but it already has apps on it like safari. Also when i double click main.storyboard it opens up a new window so i cant drag the label onto it because its in a different window.
I just looked through the comments and I may be having the same problem Rachel.
Hello! Thanks for following along! Please single-click instead of double-click.
It’s correct that the simulator already has apps on it.
Do you get a white screen or a black one?
Thx chris! Double clicking was the problem.
Okay, so first off, When you open the ios simulator using main.storyboard, don’t double click it, single click. It should open not in a new window, but in the xcode window. Same thing happened to me, it had safari and other default factory apps. use the mouse and click and drag as if it were our finger and you will see your new app on the second page. Hope i helped!! Good luck!!
my simulator only shows a black screen. what do i do? i have Xcode 5.1
Hey Isaac, thanks for reading!
There’s a section in my article here that troubleshoots the black simulator screen problem. Can you see if that applies to you? It’s in section 1: https://codewithchris.com/xcode-errors/
I am trying to follow along and all looks good until now. I don’t have the label on the lower right.
Hey Tony, which label are you referring to? There should only be a label in the center saying “Hello World”. Thanks!
I found the label. It turns out I had to click on something on the lower right to be able to see the label. I am really enjoying your lessons and am hoping to be able to write an app for the iphone eventually. I have been a programmer/analysist for 30 years and am not used to having so many tools. I have always written all the code to execute, now all I have to do is pick and click. Of course the design can’t be done for you. Thanks again.
Hey Tony, you’re totally right about that! Especially with Xcode’s auto complete, sometimes i feel like i’m not even programming at all haha
All i’m doing is typing a few letters and pressing enter and then repeating that over and over again.
One note however is that you can completely avoid the storyboard and do everything programmatically. It’s preferred to avoid storyboards with larger programming teams because merging code is far easier compared to merging conflicts with XML (the storyboard file)
Hey Chris. First off Thanks for these, you are awesome man.
When I run it I get a dialogue box with: SpringBoard failed to launch application with error: -3
Have you ever had that before? Any idea what to do to fix it?
Hey Robert, luckily i wrote up an article recently explaining how to fix it!
https://codewithchris.com/xcode-errors/#simulator
It’s a really easy fix. Just need to reset the simulator.
Chris, Thank you!!!!
do you have any idea why if i start an application project instead of a single view application it does not work? it took me 4 hours!
Hey Ignasi, did you start an OSX application by accident instead?
For the iOS projects, you can start with Empty Application, Tabbed Application or any of the other ones but they won’t really suit our purpose for this demo!
Thanks, got it!
When I use Main.Storyboard I get a window with the iPhone outline, no editor or anything else. I’m using 5.
Hey Jan, try using the buttons in the upper right corner to toggle the panes. Let me know if that helps!
Hi Chris,
First, thanks for the awesome help! You have given me the motivation to do this.
The problem: I cant see the ViewController.xib that you ask us to click on in this tutorial. Am i doing something wrong?
Thanks!
Hey Sly, thanks for watching and I’m glad you reached out. I recorded the video with Xcode 4 but i added annotations for Xcode 5 to point out the differences.
In any case, you probably see a Main.Storyboard right? Well just treat that as the same thing! You’ll be able to follow the tutorial.
Please let me know if you have anymore questions!
Hi, and thank you for your great tutorial! I used the suggestion here https://stackoverflow.com/questions/19092605/there-is-no-xib-file-when-i-create-a-new-single-view-application-in-xcode-5
to make the ViewController.xip visible in Xcode 5 (it worked fine).
Is there any advantages to do this in Xcode 5?
Frank
Hey Frank, Storyboards are great for beginners to learn iOS programming with because you can lay out multiple views in a single storyboard. The xib file will only represent one view.
There are a lot of debates over which one is better but each has its strengths and weaknesses. If you’re working by yourself, it’ll be based on personal preference, but if you’re working on a team, then everyone needs to agree on it. So if you know how to use both as well as create UI programmatically (after you learn more), you’ll be versatile.
Anyways, back on topic.. Storyboards are easiest for beginners to learn with especially when you start working with multiple views. The xib file is just like storyboard except xib represents one view only. If your app is only 1 view, then there’s really not much difference.
Thanks for commenting and reading!
hi can u tell a quick method to learn objective-c basics within 1 week.?
Hey Amrendra, if you know another programming language already, then it may be possible to get familiar with Objective C if you spent a full 8 hours on it each day for a week going through demos and samples.
But if you don’t have a programming background, it’s going to take a lot longer unfortunately. Most beginners start to become more comfortable with it after a month of dedicating an hour every day. If you’re a beginner, i would suggest going through the “Start Here” link at the top of this site.
Thanks!
one quick question chris, i need your suggestion. how many hours per day is the best practices to learning and practice to code from your videos.
If you can follow a new tutorial each day and actually follow it and code it, that would be enough to get your started!
i like your tutorial chris.
Thanks for reading ohdowload!
Simulator shows nothing but white after I clicked run.
Thanks for emailing Sulla, I’ll help you out there!
Right after the Xcode layout figure, you reference the “Library Pane”, which isn’t in the figure. I think a lot of people will be confused. You might want to point out the pane in the figure.
Thanks for the feedback Ted! I’ve updated the article to make that clarification!
I’m rapped with your videos. Problem: In my BlankDemo app I see no ViewController.zip file, only all the others, so I can’t get to the Interface Builder area. What’s wrong? How do I delete the project and start again, maybe I did something wrong on the way. Regards Sven
Hello Sven, if you’re using Xcode 5, you’ll see a Main.storyboard file. Treat this the same as the xib file!
Thanks
Hi Chris,
Thanks for the great step by step tutorials.
My last go at programming was back in the 80’s using BASIC via the CLI.
Things have changed a LOT since then. Figured it was about time to learn something new.
Keep up the great work!
Ive figured out how to switch to the objects tab and found the label but for some reason can not drag and drop it to my simulator. help!
Hey Rachel, I’m assuming you mean Interface Builder rather than simulator that you’re trying to drag and drop the label into. That’s odd! What happens when you try? Are you able to drag the label around but unable to drop it into the grey area of your view?
Hey Rachel, based on the other comment, you’re using XCode 5 right? If so, then the reason you can’t drag the label onto the view may be because you’re in a “zoomed out” view. Try double clicking on an empty area beside the view to “zoom” back in. Then you should be able to drag it out. Give that a try and let me know what you see!
You may want to make clear that you need to be in the “Objects” tab of the Library pane. I couldn’t find UILabel in the “File Template Library”.
Good point Collin, i’ve updated the article and screenshot to reflect that. Thanks for the feedback, Collin!