Wednesday, July 6, 2011

Simple iOS 5 UI Design Tutorial Using Storyboard in XCode 4

    Background Info (Not Necessary Reading): I read a 500 page book on Objective-C on Saturday and so I thought I was ready to start programming iPhone apps, so then I looked at a ton of books and tried to do the step-by-step tutorials but none of them made any sense since Apple has updated all of their development tools and there are a lot of new features that have made things in the past irrelevant. For example, XIB files were not automatically generated in the newest version of XCode, so it was a struggle to get even a simple program running. I didn't even know how to design a user interface, so being confused I naturally Googled the file in XCode that I didn't know what is was (storyboard) and I saw that it was Apple's new way to design user interfaces. 

Background Info (Required): Interface builder is a user interface design tool in XCode 4 where you can drag and drop objects from the side bar, and have them saved in a XIB (pronounced "zib") or a NIB file. A XIB file is an XML representation of your objects and their instance variables, and it is compiled into a NIB file when your application is built. In the past, when creating a new view you would have to create a new XIB file for each view. This had become quite cumbersome since very complex applications have lots of different views and it is hard envisioning transitions from each view to the next, so Apple made a very big improvement in the user interface design process by introducing Storyboarding. 

From Apple's Website:

     "Discover how Xcode's Interface Builder support for Storyboarding in iOS 5 makes designing your iOS apps so much easier. Storyboarding allows you to graphically arrange all your views within a single design canvas, where you can then define the app's logical flow, and even assign transition animations."

A Picture Is More Informative:


Source: Apple XCode 4


Goal: This tutorial will show you how to create a simple two-view application that switches between both views with a button, created using Storyboard in XCode 4. 

Note: It's good practice to push every button/toolbar/panel in a new program that you are getting to know. In most cases you really can't "break" anything. 

Note: A lot of the tutorials just confused me when they were explaining what everything means, so I just left that out. 



Tutorial








1. Open XCode 4 and create a new Single View Application called "iPhone_Tutorial_One" and create the repository. 




2. Once you reach the main window in XCode 4 click MainStoryBoard.storyboard.








3. XCode automatically generates a single view and now drag and drop a View Controller from the panel on the right. 
(Note: From the toolbar select View > Navigators > Hide Navigator to make Interface Builder use the whole main window.)



4. Drag a Label object from the right panel and double click to type "View One" or "View Two" text in each label. You can resize the label by clicking and pulling, and you can adjust the text size by adjusting the default size in the right panel. 



5. Now drag and drop two Round Rect Button(s) and double click to add the text "Info" on one button, and "Switch View" on the other. Repeat.



Note: When you select an object in a view and then CONTROL + CLICK + DRAG you should see a blue line appear. 

Note/Common Error: The direction you drag to and from matters i.e. left -> right is not equivalent to right -> left, i.e. object1 -> object2 is not equal to object2 -> object1.



6. Click one of the Switch View button so it is highlighted like below, then holding control then click the Switch View button and drag from the button until the blue line touches the other view. A black pop-up box will come up and select performSequeWithIdentifier:sender. Repeat for the other button.



 7. Go to File > New > New File and create a new UIViewController subclass file called SecondViewController






8. Select the second view and then in the right panel click the drop down menu under the Custom Class title bar and change the Class to SecondViewController.


9. Edit the iPhone_Tutorial_OneViewController.h, iPhone_Tutorial_OneViewController.m, SecondViewController.h, and SecondViewController.m files. 


 (a) Your file should match this file exactly. 




(b) Add the code marked below.  





(c) Your file should match this file exactly. 




(d) Add the code marked below.  











10. Select the Info button on the view labeled View One and CONTROL + CLICK + DRAG from the button to the iPhone Tutorial One View Controller in the left panel and a pop-up menu will prompt you and select pageInfo. Repeat for the other Info button and then connect it to the Second View Controller.










11. The program is all finished. Now you can click Run and the program should build and run. 




Related:

68 comments :

ALi said...
This comment has been removed by the author.
ALi said...

Great! Thanks for the publication... :-)

Maciej Swic said...

How do you change the the designated entry point of a Storyboard? The view with a green frame around it. I want to use the provided tableView Storyboard template, but drop the first tableView inside a tabBarController.

dih said...

Thanks for the tutorial, but did you notice that apps designed with the storyboard don't run on any iOS below 5.0? Is there a workaround available that you know of?

Technology Blog said...

To dih: There is a difference in the build settings and run-time settings. You have to have iOS 5 to build, but you can deploy to iOS 4 devices. Obviously, you cannot use iOS 5 feautures in iOS 4, but if the same technologies are in both you don't have a problem.

Patrick Alessi said...

Just so you know, you are violating the Apple NDA for iOS 5 and Xcode 4.2 with this post.

This is all under NDA.

Technology Blog said...
This comment has been removed by the author.
Rory Lewis Blog said...
This comment has been removed by the author.
Mohammad Abujaradeh said...

Thanks for your time and effort . Informative post.

Mits said...

Thanks, this tutorial. I followed this without too many issues on Xcode 4.2 Build 4D5163b.

It was useful for me since I'm new to developing for iOS. Obviously due to the NDA, there's not a lot around (Apple of otherwise) that is specific to the iOS 5 SDK.

Could recommend any other helpful tutorials for beginners to iOS (but not to software development)?

Thank you again, great article.

wordy007 said...

Thank you very much for this. Ive been searching everywhere for some more information on xcode 4.2 and it seems not many people are willing to give information out yet which is very poor considering the amount of differences between 4.0 and 4.2.

If you make any more please let me know i'd be very grateful :)

Simon Beaumont said...

You can get it to create you .xib files the old fashioned way by unticking the 'use storyboard' option when you created the project. Just in case you were thinking your masses of reading had gone to waste...

Павел Култышев said...

NOPE! This tutorial doesnot fit IOS5 apps, the system is different

Michael Murray said...

For some reason step 6 isn't working. I can't get the Seque to fire and switch to the second view. I don't see performSequeWithIdentifier:sender when I use the Control + Click + Drag from the button to view two. All I see is Push, Modal and Custom. I've tried placing an identifier string for each seque and still nothing happens. How do I get the switch button to fire?

British Boy said...

Just to clear any confusion, it's 'segue', and not 'seque'.

Brian said...

I have the same problem as Michael Murray. I assume there was some changed since it was released after iOS 5 was released. Any ideas how to do it now?

Brian said...

Ah ha! If you choose "Modal" you will get an app that works. I don't know if this is any different to the the tutorial direction of choosing "performSequeWithIdentifier:sender", but the app works.

Halosys said...

very nice blog for latest update ios 5.0 href="http://halosys.com">ios 5.0

haris said...

your style of writing is fantastic lol , i regularly visits your blog it is really

informative for me.keep updating it.

iphone 5 reviews

Halosys said...

really its very important blog for iphone
ios5.0

Morten G said...

When I run your code, I notice that the Live Bytes in instruments increases when I switch between table and item view. Not many bytes but over time, it might be a problem.

Is it normal that the Live Bytes grows, when entering the same item View over and over again.

/Morten

joni cong said...

Thanks for this great article.. Updating how to use storyboard in Xcode 4.. :D

http://www.jonice.web.id

francesco said...

Great!! I was getting stressed becouse I bought a iphone sw development book that reported examples that were not compatible with the downloaded Xcode tutorial in my Mac Lion OS. With tour article I had the confirmation that all was changed. But if I want to develop applications for 3gs with os before 5, how to do? My xcode has only the choice of ios5.0. Thank a lot.

Technology Blog said...

You can change the deployment settings of your app to iOS 4.3 in the build settings.

Simon Levy said...

Awesome, man, thanks! You solved two XCode 3 -> 4 transition problems for me at once: (1) how to use storyboards; (2) how two switch views. Might be worth updating for 4.2

Simon Levy said...
This comment has been removed by the author.
Jack Bellis said...

Can you explain where the method code is? Is it called from the XIB directly to some iOS class?

Iwan Suminar said...

thanks for the article

Omkar said...

Hi Kurry,

Thanks for tutorial however I have a query with respect to storyboard.

I have a requirement where depending upon the condition I have to load same view with different content or another view.

For example, if I click on a button, which is in View1, then depending upon the condition, I need to load either View1 (with different contents) or View2.

I have seen multiple examples of storyboarding however none of the examples are same as my requirement.

Can you please let me know, is it possible with Storyboarding with some custom code written in backend?

In addition, if you know any documentation available for storyboard please let me know.

Thanks,
Omkar Dangat

Syed Rakib Al Hasan said...

Nice Blog.. but Step 6 is not working for me. I have same problem as Michael Murray.

However, Brian's solution worked for me.... weird that only MODAL works but PUSH doesn't work.

--- using xCode 4.2 Build 4D199.

babukuma said...

Thanks for great tutorial.

Alexander Castrillo said...

This helped me so much! I was using storyboard and i got stuck and I felt like "I knew this was way too easy to use". But after reading through this, you helped me figure out what I needed to do. Thanks a lot!

Ren said...

can you tell me how can i set double height for statusbar using storyboard?

I have problem with layout when any phone call is coming when app is running.

Freak said...

check out this for more info:

thsn said...

hi
i have a problem about storyboard.
i have login page in my app.
i want to redirect to diffrent pages in app. if login attempt is successful i want to redirect main page but it is not i want to redirect error page. I couldnt do that in ios 5 storyboard. how can i do that? please help me

Clipping Path said...

Thanks for these. Great displays.

Unknown said...

I really appreciate this tutorial. I have constructed almost exactly as specified with a couple of changes. One, this is on Xcode 4.2. Second, the target is the iPad.

I am getting "Applications are expected to have a root view controller at the end of application launch". The AD is never called and the screen of the iPad Sim is blank white.

Any ideas what I am missing?

Bryan Xu said...

Superb tutorial! Many thanks!!

Sudarshan Shetty said...

check it out http://aboutios.blogspot.com

Sudarshan Shetty said...

check it out http://aboutios.blogspot.com

Henk Jans said...

Superb explanation. Keep up the good work. it was very helpfull.

Bose said...

this is a rare tutorial on iOS 5 UI , never expected i would get, thank you a ton.Sample Documents

Doc said...

Thanks for the tutorial which keeps to the bare basics of what many of us need to transition from XCode 3 to XCode 4…..

question: shouldn't we release the alertview after use?

Catty said...

it is really of of the simpliest tutorial I have seen!
Kate from app development

mg said...

Nice post. I am having trouble with where to add individual codes after creating all the storyboard windows in iphone apps.

コー said...

This tutorial really simplified things for me, thank you!

How do I go about doing this using a table and multiple levels? Your first image showed something like that but the example shows pages switching with rectangular buttons. Thanks again.

information for you said...

that is nice,
i like your teaching style of iphone app.

thanks for sharing this.

Facebook Application | Facebook Applications

Zefri Kurnia said...

I get error...
"Instance method '-initWithTitle:message:delegate:cancel

Big Guy said...

okay, in step 6 I chose 'modal, but in step 8 I can't find any SecondViewController class, and I can't type it in (okay, actually I can, but it blups and never accepts this change).

Zach said...

I have the same problem as "big guy" 7. Go to File > New > New File and create a new UIViewController subclass file called SecondViewController. Under new file UIViewcontroller is not an option. my options are only objective c ob c category class extention protocol ad test. Any ideas?

weeL said...

Hi, I using ios 5.1, when I reached point 2. I can not find main storyboard.storybroad. Meaning I can not find .storybroad in the navigator panel, can you explain to me?thanks

Bill said...

Thanks! It was very useful.

iPhone UI Designer said...

it eventually benefits the customers. Cellular growth professionals are offering complete, professional and awesome mobile coding and program alternatives to their customers over the world.
Mobile Application Development
Mobile App Developer
iPhone UI Designer

skysaw said...

How can I create the button like in the first picture? Similar to the one in our iphone settings, where a few buttons grouped into 1 and with the small tiny arrow

VB said...

Thank you for very detailed tutorial for app design

Jim Rota said...

I've got an app where the user selects their country from a picker wheel. An alert comes up and asks them to confirm the change. If they confirm, it takes them to a different view where they can then select from a list of categories to display information...

The list of categories is embedded in a Navigation Controller to facilitate moving from the detailed view "Back" to the category select view.

The entire app is embedded in a Tab Bar Controller.

It works fine (after selecting their country they are taken to the Select Category screen) except that now the Select Categories has lost its connection to the Tab Bar Controller (i.e. is no longer a tab) and there is no way to get back to other parts of the app without rebooting it.

Any suggestions?

Chanchal Raj said...

One of the most useful and well explained tutorial article I have ever read... Great..Thanks for it..

Matthew said...

The iPhone 5 is said to support video chatting, GPS navigation and as usual it will allow users to sync it with their iTunes the same as other tech gadgets. The screen will be scratch protected and which is more, users will be able to watch local television channels. This might even give way for users being able to subscribe to cable channels if any service for iPhone is available. This will be one of the best gadgets so far, never mind the best smartphone.



Latest Gadgets

openid said...

@MichaelMurray & @Brian & @Syed The option to "performSequeWithIdentifier:sender" has been removed, but you can achieve the same affect using a Navigation Controller, as suggested on SO: http://stackoverflow.com/questions/7132490. I think this is the equivalent replacement, rather than selecting a modal seque instead.

@Zach & @BigGuy After File -> New -> File, just select "Objective-C Class" and choose "UiViewController" as "Subclass of" on the next screen.

Joel said...

Thanks, exactly what I needed :)

website design said...

Good post. Quality website make the improve business. All Posts having good information. Thanks for sharing with us.
website design

aparna john said...

Hi,A good website is physically attractive and is integrated Web Design Cochin with a lot of functional features that will help customers use the services of a company without any difficulty.Thanks....

aparna john said...

Hi,A good website is physically attractive and is integrated Web Design Cochin with a lot of functional features that will help customers use the services of a company without any difficulty.Thanks....

Jeronome said...

to Zach and big guy: You have probably selected the view itself and not the view controller. Click on the view controller below the view and it should work.

website design said...

It's my first pay a visit of this web site; this web site includes amazing and genuinely good material in favor of readers.
website design

Ethan Smith said...

Buy & sell new and used iPhones.
Wide selection of new and used iPhones for sale.
More at this link

developmentmys said...

Thank you for the effort to creating this valuable source of information. Game Designing in Kuwait

Mitchell Marsh said...

Accord prévoyant Post! Nous apprécions une personne. Nous faisons totalement confiance une personne. Dans le cas où chacun de nous discuter de la situation actuelle après que ça devrait être réviser. Nous avons adoré la lecture à travers. Je voudrais aller à beaucoup plus à l'égard de beaucoup plus de demandes.

coordonnées tribunal