Now that we have created a simple window base application we will move on to create a simple Tab Bar Application. To start with open XCode again and create a Tab Bar Application like below:
Then I am going to call mine MyNewTabApp, but feel free to name yours whatever is the most appropriate for you.
Now for this tutorial I am going to use Interface builder a little bit. Click on the MainWindow.xib file. it should look like this afterwards:
If it might look like this:
If this is the case I recommend pulling the small vertical bar on the left of the graph paper to the right until it looks like the first picture. Ok, now that we XCode looking the way we want lets dive into creating the Tab Application. If we build and run the app is it is created for us, we have two tabs and views that are associated with them. The tabs say First View and Second View and you can toggle between them by pressing the tabs at the bottom.
Now if our goal is to create a simple application that has four pages we will need to add two more pages to our app. To start this control click on the MyNewTabApp folder in the file view. Then click “New File…” choose the UIViewController subclass option and click next.
Make sure that the “With XIB for user interface has been chosen” and click next.
I usually put in ThirdViewController as the name especially when creating very simple applications, but feel free to use whatever name you want. Then choose save. Make sure to repeat these steps again for the fourth tab. Now that we have all the view created lets add some stuff to views three and four so we know they are displaying. For view three we will add a Label. Click on the Third View’s xib file and then the view object. Open the Utilities view by clicking on the third View option in the top right of XCode. This will open all the utilities on the right of the IDE. Go down to the objects on the bottom right and drag the label object over to the view. You can make the label say whatever you want. It should look like this:
For view four we are going to change the background color. To do this click on the Fourth View’s xib file. Then click on the View object. Next make sure that you have the Utilities View open and click on the Attributes Inspector on the right. You should see a section for view and in that section there is an option for background color. Change that to something that stands out. I chose green:
Now go back to the Mainwindow.xib file we are ready to link our Tab Bar Controller with the two new View Controller. Go down to the objects in the bottom right hand corner:
Drag the View Controller object over from the bottom right to the Tab Bar Controller and place it after the second View Controller. Then bring a Tab Bar Item and place it underneath the View Controller Object you just brought over so it looks like this:
Now we are ready to link this item with your view. Click on the third View Controller and then click the Identity Inspector on the right. After this load you can choose from the drop down in the Custom Class section the class you used for the third view. Repeat these steps for the fourth view as well. Then Save, Build and Run. The third tab should look like this:
The fourth tab should be nice and green or whatever color you used like this:
If you want you can edit the names that show up on the tab items by double clicking on them. You can also click on the attributes inspector and the editing the Title text field under bar Item.
————————————————————–
As always, please leave your comments on iPhone applications, development, or any questions you might have. Lets Get Started!
reference
No comments:
Post a Comment