Introduction
1. Create a new Project
2. Add an image to the Resources
3. Add an image view and a label
4. Build And Run
5. Analysis
6. Source Code
Introduction
We will build a very simple application using the iPhone SDK. The app will show a label and an image
- We will further extend it to react to a button press
- We will see both with and without using the Interface Builder
- That will clarify the difference between allocating a "view" in xcode vs. dragging/ dropping one from Interface Builder
- Add elements directly to the Main Window versus adding it to another view and adding that view to the Main Window
- You have to use a Mac to develop iPhone apps. Specifically, you need an Intel Mac – iPhone development isn’t supported on PowerPC Macs. There are hacks to make it work (at time of writing), but if you’re serious about it you should probably just get an Intel Mac. Doesn’t have to be brand new; all new Macs have been Intel-based for years now
- You’ll need the iPhone SDK, which is free from Apple when you sign up as an
1. Create a new project
Start XCode. File -> New Project-> Select Application Under iPhone OS. Choose a "Window based application" (In some later post, I will try to clarify the difference between the different kinds of applications)
Name it PhotoFrame. The application will be built for you with some basic files. You should be able to build and run this. It will pop up the iPhone Simulator. The app will show just a blank screen.
Back to Top
2. Add an image to the Resources
In XCode, on the left side menu, there is a folder called "Resources". Under that there is a file called MainWindow.xib. This is the main window that appears on the app. Anything you want to add to the app has to be added to this, either directly, or via adding other views as subviews. In this case, we are going to add an image and a label directly to the window using Interface Builder, which is the GUI integrated with XCode. (Later I will post where you do the same thing in code only, and also adding other views as subviews).
Double Click on the MainWindow.xib. It will pop open the Interface Builder.
The above picture shows the various components of the interface builder. The MainWindow.xib, the window, the attributes inspector, and the library.
3.Add an image view and a label to the project
In the Window, drag an ImageView from the library. Click on the image on the window, then, in the attributes window, choose from the "Image " drop down menu, the image that you had put in Resources earlier. Choose "Aspect Fit" in the "Mode" drop down menu. Then the actual image will be shown on the ImageView. This should look something like this.
We can add an image view in the code as well. Since we did it through the interface builder, we will not need to allocate memory or deallocate memory or anything. Look at the code snippet below.
////////////////////////////////////////////////////////////////////////////////////////////////////////
#import "PhotoFrameAppDelegate.h"
@implementation PhotoFrameAppDelegate
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window makeKeyAndVisible];
}
- (void)dealloc {
[window release];
[super dealloc];
}
@end
When the application launches, applicationDidFinishLaunching function is called. The imageview will automatically be shown on the main window. No need to write any code.
////////////////////////////////////////////////////////////////////////////////////////////////////////
Back to Top
4. Build and Run the app
Just build and run the app. This is how it should look like. It just shows a label and an image. It does not react to any action or anything.
Let me know if you have any questions. Comments on improving the posting are welcome!
Next time, we will add an action button which will play a sound along with showing the label + image when you press a button. We will also do the app using code instead of dragging the views from library on to the window. Let me know if you want a copy of the source code.
Next time, we will add an action button which will play a sound along with showing the label + image when you press a button. We will also do the app using code instead of dragging the views from library on to the window. Let me know if you want a copy of the source code.
Back to Top
- We just showed an Image and a label to go with it.
- Image View is an UIView that can hold and show an image. The window cannot directly show an image. By dragging the ImageView on to the window, we added the image view as a subview to the main window.
- We could have also added another view to the project, put the image and the label on the view, and then added that view as a subview to the main window. In this application, it is not necessary. In some cases, where you want your view to draw custom things, you will have to do that.
Back to Top
6. Source Code
You can download the source code HERE
Back to Top
Posts
