Managing UI components in Runtime

1. Managing UI components in Runtime Pre-Lab Lecture 2

2. Revisit of Lab 1 • Tutorial 1 – Static UI Components • Part 1 – Creating UI Components through Interface Builder • Part 2 – Connecting UI Components/Actions of UI Components with IBOutlet and IBActions • Part 3 – Update labels in runtime

3. Objective of Lab 2 • Creating UI Components and Adding it to the screen view during runtime (through coding) • Move UI components in runtime • The Status of the Properties of the UI Components can change during runtime. For example: • center (Center Position of the components) • frame (The bounding size of the UI components) • hidden (The visibility of the UI components) • alpha (The transparency of the UI components) • One-time update and continuous update

4. The creation of the UI component is triggered by a certain action or condition Example of trigger by action: when the shoot button is pressed, the bullet image should be created Example of trigger by other condition: When a balloon is shot, we remove it and create a new one UI component moves according to time Bullets move as time goes by When do UI components need to be changed in runtime in our game?

5. Create and Display an Image Create a UIImageView variable and specify the image file it is displaying UIImageView *myImageView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@”pic.jpg”]]; Specify the frame (size and location) [myImageView setFrame:CGRectMake(x, y, width, height)]; Show it on the screen [self.view addSubview:myImageView]; if it is a UILabel, we need to set the text value

6. Example • Create a UIImageView object with the Image named “kslui.jpg” • UIImageView * tempImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"kslui.jpg"]]; • Setting the Boundary Frame of the UIImageView object • [tempImageView setFrame:CGRectMake(DEFAULT_NEXT_TARGET_ORIGIN_X, DEFAULT_NEXT_TARGET_ORIGIN_Y, DEFAULT_NEXT_TARGET_WIDTH, DEFAULT_NEXT_TARGET_HEIGHT)]; • Putting the UIImageView object to the view to display • [self.view addSubview:tempImageView];

7. Screen Shot of Part 1A kslui.jpg kyeung.jpg

8. Common updates on UI components • UI Component usually contains a property known as hidden • E.g., component.hidden = YES implies that the UI component is invisible, and vice versa • Tutorial 2 Part 1B • Changing the center position of the UI Components so that the UI Component with re-appear in the specified location on the screen view • E.g., [component setCenter:CGPointMake(center_x, center_y)]; • Tutorial 2 Part 2 Center (center_x, center_y)

9. Array of Images (target pictures in the game) Initializing a NSMutableArray object: NSMutableArray * tempArray; tempArray = [[NSMutableArray alloc] initWithCapacity:1]; Adding an Object into a NSMutableArray object [tempArray addObject:tempImageView]; Getting an Object (kslui’s imageView) from the NSMutableArray object int i = 0; [tempArray objectAtIndex:i];

10. Removing an Image To remove an image being referenced by UIImageView * tempImageView fromthescreen [tempImageView removeFromSuperView]; To “release” the memory space occupied by the object referenced by tempImageView [bulletImage release];

11. Position of a Bullet in the game (480, 0) (0, 0) +x Screen View Bullet Height (bullet_x, bullet_y) User Height (user_x, user_y) +y (0, 320) (480, 320)