iPhone tutorial app #5 – images meet the road

Writing code for another iPhone App.

Finally, an app that has moving parts. Things are starting to get interesting.

This next app is again, a View Application (single view). The tutorial indicates that we’ll just have to play some tricks to give the illusion of the changes.. image overlays as you will.

Now.. finally, some code has to be written, so here is the first block that is from the controllers main header file:


hello005ViewController.h

//
//  hello005ViewController.h
//  hello005
//
//  Created by David DeMartini on 10/3/10.
//  Copyright 2010 David DeMartini. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface hello005ViewController : UIViewController {
 IBOutlet UILabel *label;
 IBOutlet UIImageView *uiImageView;
}

// Tell the compiler about these properties of our little object-method pointers
//   nonatomic - let the Apple core code handle the mutability (dynamics) of object
//   retain    - tell compiler that we reserve the right to fuck up our own meory management
@property (nonatomic, retain) IBOutlet UILabel *label;
@property (nonatomic, retain) IBOutlet UIImageView *UIImageView;

// Inform compiler that a Button Action (IB) will be part of this application
- (IBAction)buttonPressed:(id)sendr;

@end

Next, the Implementation file must be written.

hello005ViewController.m

//
//  hello005ViewController.m
//  hello005
//
//  Created by David DeMartini on 10/3/10.
//  Copyright 2010 David DeMartini. All rights reserved.
//

#import "hello005ViewController.h"

@implementation hello005ViewController

// Command synthesis
@synthesize label, uiImageView;  // defined that which needs synthesis

- (IBAction)buttonPressed:(id)sendr {
 
//  This modifies the text in object pointed to by 'label' to this string
 label.text = @"The only thing better than a cute girl, is two!";

 // Defining a pointer to the physical Image file (UIImage)
 UIImage    *imageSource = [UIImage imageNamed: @"top.jpg"];
 // Setting the synthsized object image property to the pointer to image file
 uiImageView.image = imageSource;
}

- (void)didReceiveMemoryWarning {
 // Releases the view if it doesn't have a superview.
 [super didReceiveMemoryWarning];

 // Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
 // Release any retained subviews of the main view.
 // e.g. self.myOutlet = nil;
}

- (void)dealloc {
 [super dealloc];
}

@end

Now that the primary parts of the code are in place, it’s time to assemble a UI. Adding the main text label (at the top – temporary text displayed for design purposes) and the big button that will cause stuff to execute.

Deep in the UI layout phase using the SDK User Interface Builder.

Shortly after this however, everything went sideways. It would appear there are more brain-dead errors in the book frustrating my progress. It is forcing me to read more and more of the Objective-C documentation than the book suggested I’d have to. But to fix the errors, I must first gain at least a minimum understanding of their nature.

About 5 hours of work. Most of it burned trying to get the last bit of it working… the image swap. Outside of that everything else worked great. With intent to use a fair bit of image swapping when I put the final first app out.. I’d better get a handle on this.


Update: 4-October-2010

After sleeping on it last night, I rebuilt the entire thing from the ground up again. This time going in phases from the initial background image to the label an the button, compiling and executing. That worked perfectly.

Next part I fired up the screen cast the Professor made of him stepping through the process. It then became quite clear (it was not in the book) that the overlay container does NOT reference the second (upper) image directly, but instead is used simply as it’s container. This (of course, being the smart guy I am) made sense the first time around, and I did (what I though) was exactly that. Created a view with not image. Regardless, I re-created my steps this morning, created the empty container, re-compiled and ran. WORKED! Except it looked like doo-doo because the upper level image was NOT properly sized, and the overlay effect did not work. The book (and the screen cast) made it seem like it would expand as required. IT DOES NOT.

iPhone simulator with icon for my 'CuteGirl' app.

So, I referenced the the image view to the top image so I could size and position it to create just the desired effect, then I removed the image association and re-compiled again. This time.. PERFECTION

And the icing on the cake is that it now has a custom icon image for the application. That was pretty simple too. Once I checked online and found that despite what the book said (image size 320×480 which made ZERO sense..) the icon image size should be 57 x 57 pixels and of the format .png (at least the book had the latter part right).


Geek Links:

  • iPhone & iPad Application Custom Icon Design Guidelines
  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.