Building Your iPhone App’s Interface Quickly

Hi everybody, this is the fourth installment of my series Your First Apple iPhone App Store App Step-By-Step tutorial series.  This is a 2-part lesson on building your App’s interface in Xcode’s interface builder.

Here is the video:
This video was embedded using the YouTuber plugin by Roy Tanck. Adobe Flash Player is required to view the video.

In this installment I create a basic project, and explain a little bit about interface builder.  I also present a small exercise at the end where I ask you to place the interface elements onto the view, and as promised I have placed the project that I created where I laid out the elements here:
>>> Download Soundboard Project With Basic Interface <<<

Please do not download the Soundboard project unless you were having trouble laying out the elements yourself, or you already understand how to do this, and don’t want to spend the time.  

This will be fairly easy for many of you, we will be getting into code soon, I promise!

Here are the action steps that I took in the video.

1) Create a new project, select iPhone application, and choose a View-Based Application (I will assume you gave it the name Soundboard)
2) Open The SoundboardViewController
3) Set Identity Inspector To List Mode
3) Remove the fake status bar at the top of the soundboard

Exercises:
1. Take components from Library, place them in View (UINavigationBar, 2xUIButtons, UITextView, & UILabel)
Optional:
1. Run Apple’s UICatalog example and learn names of common UI elements.

In the next video in this series you will look over my shoulder, design the interface, the class skeleton for our view app complete with attributes and methods, and do it in less than 5 minutes.

The first lesson in this series can be found here Your First Apple iPhone App Store App Step-By-Step Part 1

Want to get the source code for 1-2 different professionally designed iPhone and iPad apps each month?

Share and Enjoy:
  • RSS
  • Twitter
  • Facebook
  • DZone
  • HackerNews
  • del.icio.us
  • FriendFeed

Related Posts

View Comments to “Building Your iPhone App’s Interface Quickly”

  • There is an iPhone app out now that allows you to build interface mockups on the go.http://www.blueshiftsoftware.net/iphone-apps/interfacer/

  • There is an iPhone app out now that allows you to build interface mockups on the go.http://www.blueshiftsoftware.net/iphone-apps/interfacer/

Leave a Reply

blog comments powered by Disqus