A Simple About Box

Hi fellas. I've been wanting to write 2nd tutorial for sometime, but really is pushing my own schedule to submit my 3rd app. Anyways, those who stopped by, do notice that this is a tutorial blog for Noobies. Like me. If you are looking for advanced stuffs, I'm not there yet. Perhaps sometime in the future, xcodeadvanced.blogspot.com would be born. =p

Anyways, getting back to main subject: Today's tutorial is to create a simple About Box that displays your information - such as website URL, version of the app, your name, and a logo of your company. Below is how it will look like:

Before I go on with this tutorial, I do realize that some dev likes to use a full page of UIView to display as About Box and put all fancy backgrounds etc. For me, I don't like to waste resources so much in stuffs that are not benefiting the users. So I make full use of the UIAlertView class.

Lets start:

First, I create a new project -> A Single-View Template. (I love Single View!) In this project, I gave it a name of ImageInAlert.proj.

Next, we declare an IBAction method/function in the ImageInAlertViewController.h (header file).

 -(IBAction)showAboutBox;

We do not need to know who is calling the method, so the (id)sender extension parameter is omitted. Once this is done, SAVE IT, and then open the ImageInAlertViewController.xib. Put a UIButton on it. Put a title on the UIButton, mine says "About".

Now, select the UIButton and go to Connections window and select the second tab (with a picture of an arrow pointing to the right on it) Under "Events" section, connect the "Touch Up Inside" to the File's Owner icon in the Main xib window. You need to move around your View if you can't see the Main xib window.

You should see a list pop up, select showAboutBox. And now the button is connected to our method/function. SAVE THE XIB FILE.

*Make it a habit to save every now and then.. because if you don't save, what you have typed in or changed, will not be updated in XCode, therefore can't be detected in IB, and vice versa.*

Now go back to the Main file: ImageInAlertViewController.m. Type the following code:

 -(IBAction)showAboutBox {

// Part 1

 UIAlertView *alert = [[UIAlertView alloc]

       initWithTitle:@"AlertView Tutorial"

       message:@"\n"

       @"\n"

       @"\n" // Part 2

       @"\n"

       @"\n"

       @"Created by: \n"

       @"Emir F Samsuddin \n"

       @"http://xcodenoobie.blogspot.com"

       delegate:nil

       cancelButtonTitle:@"Ok" // Part 3

       otherButtonTitles:nil];

// Part 4

 UIImageView *iemirlogo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MainIcon.png"]];

 iemirlogo.contentMode = UIViewContentModeScaleToFill; // Part 5

 iemirlogo.frame = CGRectMake(90, 40, 100, 120); // Part 6

 [alert addSubview:iemirlogo]; // Part 7

 [iemirlogo release]; // Part 8

 

[alert show]; // Part 9

[alert release];   // Part 10

 

}

Ok, Im going to explain part by part: Refer to the above label while reading below:

Part 1: Declare a name for the UIAlertView object that we are going to create. I give it a name of alert.

Part 2: All the /n are so that it skip a line. Its like pressing the Enter/Return button on your Mac. I do this so that I can have a space to put my image there later on.

Part 3: Cancelbuttontitle is the title for the cancel button (ie the button that when user pressed, will dismiss the about box)

Part 4: Here is the fancy part (well for a noobie anyways), we create an imageview object, and directly load an image from project resources into it. "MainIcon.png" is already been dragged into the Resources folder. This is the image that I will make appear at the alert view.

Part 5: Set the image property so that the image is scaled following the size of the UIImageView frame. The property name is contentMode and the value is UIViewContentModeScaleToFill

Part 6: Define the size and location of the image in the form of CGRectMake(x,y,width,height). x and y is the location of the image, measuring from the top left hand corner of the image. width and height, er.. are the Width and Height of the image frame. Try experimenting with these values to get what you finally want.

Part 7: Finally, we add the image to the AlertView. addSubview is a useful method to add anything to anything.

Part 8: We have added the image to the AlertView, so we clear/release the image from memory.

Part 9: Show the alert box. (ie, make it pop out)

Part 10: We have shown the alert to the main view, so we clear/release the alert from memory.