Awesome Getting Started Building iPhone Apps in Xcode 4.2

The newest version of Xcode comes packaged with a few noticeable interface changes. For beginners and intermediate users it can be difficult figuring out even the most basic functionality. And although Apple’s online documentation is well-written, it’s certainly not friendly for the average user.

So in this guide I’d like to put together some basic steps for building any iOS app. I’ll be focusing exclusively on iPhone & iPod Touch devices since iPad opens up a whole new chapter of research. You aren’t required to understand Objective-C or MVC programming to get started with this Xcode guide. But any dedicated iOS app developer will study at least some basic syntax guidelines.

I should point out that Xcode can only be installed on a Mac laptop or desktop running OS X. Unfortunately Windows and Linux users are unable to install the software, and the app source code will not compile properly. Otherwise you can download Xcode for free on Apple’s website or from the Mac App Store.

Creating a New Project

When first running Xcode you’ll be given a startup window with the text “Welcome to Xcode”. From here you can open recent projects or even create a new one. The first link Create a new Xcode project is what we want.

Click this and we’re presented with an options view. Each new project has a couple of setup screens to go through starting with the template. An “Empty Application” is the quickest way to start customizing from a bare-bones template. But for this tutorial let’s choose “Tabbed Application” so we have something to play with.

On the next menu we need to give the application a name. Standards dictate you should not use any spaces and follow the guidelines of capitalizing each letter of a new word. I’ll use the product name newSpeckyApp and additionally change the company identifier to com.speckyboy.

This identifier will not necessarily affect how your application runs. It only applies extra profile data so you can organize apps based on a company domain. Keep Device Family set to iPhone and make sure Storyboard and Automatic Reference Counting are checked. Hit next and select a directory to save the application source code.

Examining the Storyboard

Developers familiar with the older version of Xcode are expecting to work with .xib files. The old standard for iOS applications would create .xib files for each of the application views. The purpose of a Storyboard file is to consolidate all of these views together.

This not only makes editing your project a lot easier but it dramatically reduces the loading times within Xcode. The previous method of building views involved the Interface Builder software. However, this has been paired into Xcode so now you don’t even need it!

You’ll notice on this storyboard that we have 2 different views and a navigation item. The object on the far left is our tab bar controller which manages the navigation between only 2 pages(first view is loaded by default). You can edit the text on each page by double-clicking the elements. These are generic UITextView objects which control the display of text.

Running in iOS Simulator

Before we tinker in more detailed areas let’s see how the generic tab bar application runs. Xcode includes another piece of software called iOS Simulator which behaves as a native iPhone right on your computer.

To build and run your application just click the circle button in the top left corner, or alternatively CMD+R as a shortcut. This pops open the simulator and you’ll catch a glimpse of the app loading into view. The only core functionality is clicking between both view pages on the bottom tab navigation. It’s not much, but it’s certainly a great template to start with.

If you click on the iPhone home button the simulator will return to your springboard. From here you’ll notice that your application comes bundled with a plain white icon. By default this is the standard icon for all iOS projects – and it’s very boring. Let’s look into the process of customizing your app with a new icon.

Design for Apple Specifications

When we talk about graphics for the iPhone it’s important to go over Apple’s set of rules. Especially when in the realm of application icons there are strict size limits you should adhere with.

The largest icon size you’ll need is 512×512 pixels which is only featured in the iTunes App Store profile. It’s a good idea to keep this size in mind if you ever plan on publishing into the App Store. But for just a practice demo app we can get by without this larger template.

Check out the list below for a more complete writeup. We only need to include the 57x57px icon sized for standard iPhone & iPod Touch displays. But it’s wise to consider all of the potential options:

• • 512×512 – iTunes Artwork


• • 57×57 – Standard iPhone/iPod Touch


• • 114×114 – Retina iPhone 4/4S


• • 72×72 – iPad

There are other iOS sizes used for lesser-important sections. These include the Settings view and spotlight search, as well as custom document types. I’ve written up a full list of sizes in a previous iOS design article. But for now I’ll just create a 57×57 square icon design with the Speckyboy logo.

Attaching an App Icon

I should also point out that all application icons should be saved as square .png files. The rounded corners and gloss effect are added once the app is compiled and running on an iPhone(or simulator).

First save and download the icon file I linked above. You’ll want to drag this from Finder into your Xcode project window. A menu comes up asking if you want to copy the file over, just click Finish and the png should appear in your project navigator on the left side. I move all my icon files into the Supporting Files group to make it easier to manage and much more organized.

Before this icon will appear we need to edit the application’s .plist file. This should be located inside the Supporting Files group in the format %AppName%-Info.plist. So in my case the file is named newSpeckyApp-Info.plist. Look down through the Keys list until you find the row labeled “Icon files”.

This will contain an array of file names which point to each of your app icons. The naming conventions are also fairly standard coming right from Apple. Icon.png is used for the regular iPhone while Icon@2x.png is displayed on retina devices. Click to select this row and then click on the small arrow icon to the left. This expands the array open so we can see there are currently no values.

To change that click on the plus icon over to the right side. This adds a new array value with an empty String. Enter Icon.png for the value and save any changes. Now build and run the application to check out the effect! If the app launches too quickly just click the home button again to view the springboard of icons.

Helpful Resources

• • iOS Developer’s Roadmap


• • Apple Development Center for iOS


• • iPhone Dev SDK Forums


• • Programming Objective-C in XCode 4 – iPhone “Hello, World!” tutorial

Conclusion

This overview should get you comfortable with putting together a very basic iPhone application. We didn’t spend any time going into Objective-C since the programming can get intense for beginners. But I recommend skimming some light material on the topic to slowly break yourself into the language. Additionally if you have thoughts or questions on the article please share with us in the post discussion area below.

Read More

Awesome Tips for Wireframing a Usable Mobile App Interface

A lot of time and energy is required to build mobile iOS/Android apps. Aside from the coding and UI design you need to plan functionality ahead of time. This way you can start programming immediately and implement key features without a hassle.

The best way to start off a mobile application is through wireframing. This is a design process where you lay out each of the app’s views in detail. This could be just a rough sketch, but many designers will spend time going that extra step. Wireframing is all up to your personal decisions and how much pre-planning needs to be done. I’ve gone into some detailed tips below focusing on creative techniques for intuitive wireframe designs.

Planning Application Views

Each application is made up of a series of pages called views. These views may contain important content, a table listing, photo gallery, numerical dial pad, or any number of features.

When sitting down to plan a wireframe you need to consider the many possible views you’ll encounter. A great place to start is on your app’s root view – this is the first page your users will see when the application finishes loading. Consider which elements are vital to the interface right off the bat. Most likely some form of navigation between pages will be very important.

Another great technique is to create a bulleted list of all the generic views. This should only include unique interfaces even if you’re going to have tens of hundreds of the same page style. The purpose here is to dictate how the application flows, not to define content. A definitive flow between your views will make traversing the app all so much simpler.

Navigation Routes

Wireframing your navigation is a lot simpler than you’d think. If you have enough paper just sketch out views which stem off your root view then connect them through a series of arrows. You can pinpoint a specific tab or button on the view which triggers this new page to load. This can be accomplished using wireframe software and in-browser apps such as Mockflow.

Again, you’ll come out feeling a lot safer if you have a diagram to look over. This planning step is crucial to make sure you don’t leave out any important UI elements. For example many applications will have a “Config” or “About” button located in the top navigation bar. But this may only display on your root page and none of the other internal views. Denote this in your early wireframe sketches so you’ll remember such functionality when building the app.

User Interaction

Not all applications will have a means for interactivity. But if you plan on taking any input from visitors it’s important to plan this out. Keyboards and popup modal messages are just some of the smaller interfaces to deal with. Additionally you will have to route functions to the different “submit” buttons on these form pages.

Use different shapes for separating the function content from your view layouts. I prefer speech bubbles which outline how the function will process data. This scheme can get much more confusing when you include a backend database such as SQLite. Try to jot down even a few notes to remind yourself when building the custom functions later on.

For each of the view displays you’ll also need to denote which type of interface to handle. For example, you could denote a small key to mention the animation of pulling up a user keyboard or number pad. Also label each input field based on what type of data will be represented(username, password, e-mail address, etc).

Setup Filler Content

Wireframing apps isn’t about planning out the intricate details within each view. You want to accommodate writing in page text and headers with filler content. If you’re using a pen or pencil this could be squiggly lines in the shape of sentences. Whatever you need to use to delineate text content.

But along with text you may also have to display similar types of page media. Any photos should be fitted ahead of time so you know how they will affect the page layout. It’s super easy to do,
and you can generally fill the box content with shading or an “Image” label. The sketch gives you a representative size that you can scale out in the final design.

The only text you may want to consider ahead of time are navigation pieces. Since you may already know which types of views and content will be displayed it’s simple to write in these in. This includes table cell views and tab bar icons, but also buttons you place along the top navigation bar.

Open Source Templates

Plenty of designers all over the world have been working years on prototypes and wireframing. It’s certainly a lot easier to begin this process if you have a template to work from. Thankfully the open source community has contributed profoundly in this effort to build a free and studious Internet.

We have previously written about free wireframing tools which you can find on the web. A couple of Google searches will also turn up some useful results. In any case you shouldn’t feel obligated to work with paper & pencil. And since so many digital freebies are available it’s easier to get started now than ever before!

Look Over Some Examples

What good is talking about building wireframes when you may not even be familiar with them? In theory this is great practice for building any application(even a website). But far too few designers will actually take the stand and put this theory of knowledge into practice.

So I suggest spending a bit of time browsing through the web for examples of app UI sketches. Many talented designers have shared screenshots and photos on Flickr which can give you a glimpse of their formatting. Similarly we had written a piece back in 2011 featuring 20 examples of web/mobile wireframes. It’s a very inspirational collection and boasts a diversity of techniques you may pick up on. And since trends are always changing don’t be afraid to customize your wireframe sketches with unique ideologies.

Conclusion

The process of sketching out an application’s user interface is wonderfully exhilarating. It gives you a chance to peek into how your creation will look and feel without the restriction of finer-detail elements. It can also pave the way for an easier development cycle when you understand what needs to be programmed.

Ultimately building a rough draft of any creative project should follow your own methods. Think about what feels right and how you can make it work for your application. Don’t over-think the process too much or you’ll get caught up in your own head. Along with the examples in our previous post let us know your thoughts in the comments below.

Read More