Xcode

Xcode and the iPhone SDK

Alright everyone, for the first tutorial on iDevKit, I though we should start somewhere relatively basic, and seeing as how this blog is going to be covering everything from Archiving to OpenGL, Quartz to GameKit, and CoreLocation to Cocoa Touch, I thought it would be best to start somewhere simple.  That is why this post will cover the hows and whys of Xcode, the IDE for the iPhone and Mac OS X, and make your very own “Hello World” using Objective-C.

Xcode Logo

To start with, you will need the iPhone SDK (Xcode), available here. Download the latest version, which is currently 3.0 for unregistered users, and 3.1 beta3 for certified developers (To become a certified developer, you have to enroll with the Apple Developer Connection’s iPhone program. I will cover some hurdles related to this in a later post).  After you have downloaded the SDK, mount the dmg file and install. (This part is fairly straight forward)

After you have installed the iPhone SDK, open Xcode and select File -> New Project.

Project Types

Project Types

File Name

File Name

When you’re there, you will be prompted with an array of options and templates to choose from for both Mac OS X and iPhone OS.  You will see six different options, but for this particular example, we will only concern ourselves with “View-Based Application”.  Select View-based Application and click Choose. . ., name your project “Hello World”, and a new window will then open, containing your application template.

New Project in Xcode

New Project in Xcode

Here, you’re going to see many different file references and directories.  I’ll quickly go over what’s important:

Classes – In here you will find your application delegate and root view controller, with appropriate headers.

Other Sources – This contains the .pch (project header) that imports UIKit and Foundation Frameworks, along with the main.m file.

Resources – As of now, this contains the XIB files (for Interface Builder), and the HelloWorld-Info.plist. XIBs are static files used to create UIViewControllers. The Info plist contains the core settings of your application like icon location, opening orientation, Bundle Names, Identifiers, etc. Much of this is used by Apple when releasing your application on App Store via iTunesConnect (much on this “fun” process later)

Frameworks – This contains references to dynamic frameworks, including UIKit, Foundation, and CoreGraphics, with many more available on your system from the SDK.  This is also where static frameworks are stored, these frameworks are compiled into your application vs being linked to a dynamic framework present on the device.

Products – This contains the executable .app that you get after compilation.

Everything else listed here is either organization, compiling information, or other components that we will worry about in the future.

For now, we are going to concern ourselves with the Classes section only.  We will be using an NSString to store text, a UILabel to display the string of text, and colored background.  So let us begin by editing the HelloWorldAppDelegate.m, insert the following line of code at the start of the applicationDidFinishLaunching: method:

[window setBackgroundColor:[UIColor blueColor]];

This will make the background of your application blue as opposed to the boring default white.  There is a host of preset colors in the UIColor API, along with methods that let you create your own by setting the RGB properties.

Now go to your HelloWorldViewController.m file and navigate to the loadView method and uncomment it.  This method will contain the code that loads your UILabel, NSString, and UIView.  Insert the following:

CGRect appFrame = [UIScreen mainScreen].applicationFrame;
UIView *view = [[UIView alloc] initWithFrame:appFrame];
self.view = view;

Okay, let me explain: appframe is essentially just a rectangle the size of your device screen (320px by 480px), which is used by view to set the frame it is built around.  view then becomes the layer that the rest of the ViewController uses to display other “subviews” (like UIImageView, UILabel, UIButton etc).  Now we are going to add our NSString (the object that will contain our text for the UILabel).  Below what we just added, type the following:

NSString *hello_text = [NSString stringWithFormat:@"Hello, World!"];

This line creates and initializes the object hello_text with the text that we will be using next.  Now type below this:

UILabel *hello_label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,200,30)];
[hello_label setFont:[UIFont fontWithName:@"Arial" size:30]];
[hello_label setCenter:CGPointMake(160,100)];
[hello_label setText:hello_text];
[hello_label setTextColor:[UIColor redColor]];
[hello_label setBackgroundColor:[UIColor clearColor]];

Alright, there’s a lot here so lets break it down, starting with the first line.  This line basically allocates memory for hello_label and creates a CGRect for whatever we place inside of it.  Next, we set the UIFont properties for the label (for a list of available fonts, look at the end of the post) including the font itself (Arial) and the size (in px) of it (30).  After that, we position hello_label’s center point so that it won’t appear at the default (0,0), but instead at our own custom position (160,100) (this is 160 px from the left, and 100 px from the top; think cartesian plain, quadrant IV).  We then set the string that we want to display, in this case we are using the contents of hello_text, this is done by just using the setText: property.  After that, all we are doing is setting the color of the text and the background of the frame using UIColor again.  Notice something weird about the background color?  Instead of setting a visible color, we use a clearColor, which is essentially just transparency. All that is left to do now is add the UILabel to our view and we can call it a day.

[self.view addSubview:hello_label];

This takes the object that we defined, and adds it to the superview. Build & Go.

Output

Output

That is about it for now, Download the Hello World application used in this tutorial here: HelloWorld

Regards,
sj

Below is a console log of all the fonts and font families from Dave Mitchell

Font Family: American Typewriter
Font: AmericanTypewriter
Font: AmericanTypewriter-Bold

Font Family: AppleGothic
Font: AppleGothic

Font Family: Arial
Font: ArialMT
Font: Arial-BoldMT
Font: Arial-BoldItalicMT
Font: Arial-ItalicMT

Font Family: Arial Rounded MT Bold
Font: ArialRoundedMTBold

Font Family: Arial Unicode MS
Font: ArialUnicodeMS

Font Family: Courier
Font: Courier
Font: Courier-BoldOblique
Font: Courier-Oblique
Font: Courier-Bold

Font Family: Courier New
Font: CourierNewPS-BoldMT
Font: CourierNewPS-ItalicMT
Font: CourierNewPS-BoldItalicMT
Font: CourierNewPSMT

Font Family: DB LCD Temp
Font: DBLCDTempBlack

Font Family: Georgia
Font: Georgia-Bold
Font: Georgia
Font: Georgia-BoldItalic
Font: Georgia-Italic

Font Family: Helvetica
Font: Helvetica-Oblique
Font: Helvetica-BoldOblique
Font: Helvetica
Font: Helvetica-Bold

Font Family: Helvetica Neue
Font: HelveticaNeue
Font: HelveticaNeue-Bold

Font Family: Hiragino Kaku Gothic **** W3
Font: HiraKakuProN-W3

Font Family: Hiragino Kaku Gothic **** W6
Font: HiraKakuProN-W6

Font Family: Marker Felt
Font: MarkerFelt-Thin

Font Family: STHeiti J
Font: STHeitiJ-Medium
Font: STHeitiJ-Light

Font Family: STHeiti K
Font: STHeitiK-Medium
Font: STHeitiK-Light

Font Family: STHeiti SC
Font: STHeitiSC-Medium
Font: STHeitiSC-Light

Font Family: STHeiti TC
Font: STHeitiTC-Light
Font: STHeitiTC-Medium

Font Family: Times New Roman
Font: TimesNewRomanPSMT
Font: TimesNewRomanPS-BoldMT
Font: TimesNewRomanPS-BoldItalicMT
Font: TimesNewRomanPS-ItalicMT

Font Family: Trebuchet MS
Font: TrebuchetMS-Italic
Font: TrebuchetMS
Font: Trebuchet-BoldItalic
Font: TrebuchetMS-Bold

Font Family: Verdana
Font: Verdana-Bold
Font: Verdana-BoldItalic
Font: Verdana
Font: Verdana-Italic

Font Family: Zapfino
Font: Zapfino

Tags: , ,

Monday, September 7th, 2009 Xcode, iPhone SDK (Official Dev) 5 Comments