iPhone Tutorial One — Introduction to Storyboarding

Okay guys, well I figured I would start off my using of Xcode 4.2 with this blog post. I have never used Xcode 4.2 before this, so let us see how intuitive storyboarding really is. I am not going to go into detail of what “@property” and “@synthesize” are, I am assuming you already know basic coding. If enough people ask, I will explain everything.

So let’s start out with a Hello World application.

We will create a View-based Application:

As you can see, we are presented with 5 files — the App Delegate’s header and implementation files, and our Hello_World header and implementation. Let’s jump right into the MainStoryboard.storyboard. You will be present with the following — a simple window or “scene”:

Okay guys, I feel like to start these tutorials off, I am going to just create an app that switches views on button pushing, just to show the supposed power of Xcode 4.2’s new storyboarding. So first we will add 3 more view controllers, just by going to the bottom right and scrolling down to the golden bubble saying “View Controller”. You will also notice that gestures are in there now as well! I was very excited to see this. So now our screen looks like this:

And we will now also place a UIImageView within each of these, to give them all a background, the backgrounds are uploaded below.

http://www.mediafire.com/?bwp2odbchystwas

Create a folder in your project names “Images” and add these 4 images to the folder, copying them in as needed (checkbox on pop-up). After this, set each of the UIImageView’s to have a difference image, as below:

Now, this is similar to normal Xcode, adding UIImageViews and changing the images without even typing any code. Now however here comes the interesting part, that makes me really love this new Storyboarding. I am going to connect all 4 of these views and push the views on the screen without even writing any code! First we will add 5 buttons onto each of the “scenes”, 4 of them to connect the views, and one to add an IBAction to each view. After all the buttons are placed you will get something similar to the image below:

Now we are going to do the fun part. Now, if you are familiar with Xcode 4.0.2, you know that if you want to show a new view, you have to push it onto the screen using modal views, something I know about all too well. Even though there was not much code to doing this, Storyboarding allows us to do it even easier. Simply just Ctrl drag from button “2”, on the First View, onto the Second View. You will see a function “performSequeWithIdentifier:sender:”. Select that, and that is it! You will also notice that there is a little arrow connecting the two views. This is what is called a “Seque”, and is simply the 3 lines of code in present a modal view. Connect up all the buttons to the corresponding views, except the buttons for their own page — we will use this for something else later. Now I know this is really messy, but it is just how we have it all organized. If on the left side you select one of the Seques, you can change the type of transition as well as the effect, as shown below.

Now, we will actually do some programming to add some more effects to these pages. You will notice that we only have one .h and one .m for only one view, so we need to construct 3 more. We will go ahead and add a UIViewController subclass for each, and when asked what type, make sure it is UIViewController and we do NOT include a nib. We will set this up in a minute. Now if you noticed while looking at the settings for each of our created View Controllers, you would notice that they are not associated with any files where they will get data from. If you go to View 2, and go to the identity inspector, you will see a field titled “Class”. This is where the view pulls in data from. Put in the title of your .m/.h file for your second View, as shown below. You will also notice in the storyboard that the name of the scene changes when the file is added to class.

Do this for the other two views. So for each view we will be adding 2 IBActions, one for the current view’s button and the Hello! button. In the .h file, we add the function declarations:

And then we actually write the functions. You will notice in the .m file, there is no longer a need for deallocing or releasing/autoreleasing objects, since Xcode now does this itself. Pretty nifty if you ask me!

And now we go back to the Storyboard and connect the buttons to our newly created functions just as we do in Xcode, except you point the button to the View Controller, not File’s Owner, since there isn’t one.

Do this for the rest of the views in the Storyboard, creating similar functions and connecting them. The video below shows how the project runs once everything has been hooked up, and the source code for this project has been included at the end. Any suggestions for the next tutorial send me a message or comment below!

Source Code:http://www.mediafire.com/?4nt5a8kldzigjlw

2011

10/12

CATEGORY

iOS Programming

TAGS

iOS
ios 5
ipad
ipad 2
iphone
iphone 4
iphone tutorial
stoyboard
tutorial
xcode
xcode 4
xcode 4.0.2
xcode 4.2
xcode tutorial

Write comment