iPhone Application Development : Creating and Managing Image Animations and Sliders (part 3) - Finishing the Interface

1/30/2011 9:53:50 AM

Finishing the Interface

The remaining components of the ImageHop application are interface features that you’ve used before, so we’ve saved them for last. We’ll finish things up by adding a button to start and stop the animation, along with a readout of the speed of the animated rabbit in “hops per second.”

Adding Labels

Start by dragging two labels (UILabel) to the view. The first label should be set to read hops per second: and be located below the slider. Add the second label, which will be used as output of the actual speed value, to the right of the first label.

Change the output label to read 1.00 hps (the speed that the animation will be starting out at). Using the Attributes Inspector (Command+1), set the text of the label to align right; this will keep the text from jumping around as the user changes the speed.

Finally, Control-drag from the File’s Owner icon to the output label, and choose the hopsPerSecond outlet, as shown in Figure 8.

Figure 8. Connect the label that will be used to display the speed.

Adding the Hop Button

The last part of the ImageHop interface is the button (UIButton) that starts and stops the animation. Drag a new button from the Objects Library to the view, positioning it at the bottom center of the UI. Double-click the button to edit the title, and set it to Hop!

Like the slider, the hop button needs to be connected to an outlet (toggleButton) and an action (toggleAnimation). Control-drag from File’s Owner icon in the Document window to the button and choose the toggleButton outlet when prompted.

Next, select the button and open the Connections Inspector (Command+2). Within the inspector, click and drag from the circle beside the Touch Up Inside event to the File’s Owner icon in the Document window. Connect to the toggleAnimation action. Figure 9 shows the completed interface and button connections.

Figure 9. Connect the button to its outlet and action.

The application interface is finished. In the next section, we complete the application by writing the code for starting and stopping the animation and setting the speed.

Implementing the View Controller Logic

The ImageHopViewController still needs a bit of work before we can call ImageHop done and finally view the animation. Two actions, toggleAnimation and setSpeed, need to be written. These methods will handle the user’s interaction with the ImageHop application through the button and slider, respectively.

Starting and Stopping the Animation

When the user touches the Hop! button, the toggleAnimation method is called. This method should use the isAnimating property of the image view (imageView) to check to see whether an animation is running. If it isn’t, the animation should start; otherwise, it should stop. To make sure the user interface makes sense, the button itself (toggleButton) should be altered to show the title Sit Still! if the animation is running and Hop! when it isn’t.

Add the code in Listing 3 to the ImageHopViewController implementation file after the @synthesize directives.

Listing 3.
1: -(IBAction) toggleAnimation:(id)sender {
2: if (imageView.isAnimating) {
3: [imageView stopAnimating];
4: [toggleButton setTitle:@"Hop!" forState:UIControlStateNormal];
5: } else {
6: [imageView startAnimating];
7: [toggleButton setTitle:@"Sit Still!" forState:UIControlStateNormal];
8: }
9: }

Lines 2 and 5 provide the two different conditions that we need to work with. Lines 3 and 4 are executed if the animation is running, while lines 6 and 7 are executed if it isn’t. In line 3 and line 6, the stopAnimating and startAnimating methods are called for the image view to start and stop the animation, respectively.

Lines 4 and 5 use the UIButton instance method setTitle:forState to set the button title to the string "Hop!" or "Sit Still!". These titles are set for the button state of UIControlStateNormal. As you learned earlier this hour, the “normal” state for a button is its default state, prior to any user event taking place.

Setting the Animation Speed

The slider triggers the setSpeed action after the user adjusts the slider control. This action must translate into several changes in the actual application: First, the speed of the animation (animationDuration) should change. Second, the animation should be started if it isn’t already running. Third, the button (toggleButton) title should be updated to show the animation is running. And finally, the speed should be displayed in the hopsPerSecond label.

Add the code in Listing 4 to the view controller, and then let’s review how it works.

Listing 4.
 1: -(IBAction) setSpeed:(id)sender {
2: NSString *hopRateString;
3: imageView.animationDuration=2-animationSpeed.value;
4: [imageView startAnimating];
5: [toggleButton setTitle:@"Sit Still!"
6: forState:UIControlStateNormal];
7: hopRateString=[[NSString alloc]
8: initWithFormat:@"%1.2f hps",1/(2-animationSpeed.value)];
9: hopsPerSecond.text=hopRateString;
10: [hopRateString release];
11: }

Because we’ll need to format a string to display the speed, we kick things off by declaring an NSString reference, hopRateString, in line 2. In line 3, the image view’s (imageView) animationDuration property is set to 2 minus the value of the slider (animationSpeed.value). This, if you recall, is necessary to reverse the scale so that faster is on the right and slower is on the left.

Line 4 uses the startAnimating method to start the animation running. Note that it is safe to use this method if the animation is already started, so we don’t really need to check the state of the image view. Lines 5 and 6 set the button title to the string "Sit Still!" to reflect the animated state.

Lines 7 and 8 allocate and initialize the hopRateString instance that we declared in line 2. The string is initialized with a format of "1.2f", based on the calculation of 1 / (2 – animationSpeed.value).

Let’s break that down a bit further: Remember that the speed of the animation is measured in seconds. The fastest speed we can set is 0.25 (a quarter of a second), meaning that the animation plays 4 times in 1 second (or “4 hops per second”). To calculate this in the application, we simply divide 1 by the chosen animation duration, or 1 / (2 – animationSpeed.value). Because this doesn’t necessarily return a whole number, we use the initWithFormat method to create a string that holds a nicely formatted version of the result. The initWithFormat parameter string "1.2f hps" is shorthand for saying the number being formatted as a string is a floating-point value (f), and that there should always be one digit on the left of the decimal and two digits on the right (1.2). The hps portion of the format is just the “hops per second” unit that we want to append to the end of the string. For example, if the equation returns a value of .5 (half a hop a second), the string stored in hopRateString"0.50 hps". is set to

In line 9, the output label (UILabel) in the interface is set to the hopRateString. Once finished with the string, line 10 releases it, freeing up the memory it was using.

By the Way

Don’t worry if the math here is a bit befuddling. This is not critical to understanding Cocoa or iOS development, it’s just an annoying manipulation we needed to perform to get the values the way we want them. I strongly urge you to play with the slider values and calculations as much as you’d like so that you can get a better sense of what is happening here and what steps you might need to take to make the best use of slider ranges in your own applications.

Releasing the Objects

Our development efforts have resulted in four objects that should be released when we’re finished: toggleButton, imageView, hopsPerSecond, and animationSpeed. Edit the dealloc method to release these now:

- (void)dealloc {
[toggleButton release];
[imageView release];
[hopsPerSecond release];
[animationSpeed release];
[super dealloc];

Well done! You’ve just completed the app!

Building the Application

To try your hand at controlling an out-of-control bunny rabbit, click Build and Run in Xcode. After a few seconds, the finished ImageHop application will start, as shown in Figure 10.

Figure 10. Bouncing bunnies! What more could we ask for?

By the Way

In my version of the tutorial app, I’ve set the background to a light-green color. Feel free to explore different layouts of the interface within what you’ve built. You may be surprised how much variation is possible without writing a single additional line of code!

Although ImageHop isn’t an application that you’re likely to keep on your phone (for long), it did provide you with new tools for your iPhone application toolkit. The UIImageView class can easily add dynamic images to your programs, while UISlider offers a uniquely touchable input solution.

  •  iPhone Application Development : User Input and Output
  •  Windows Phone 7 : Using Accelerometer Data to Move a Ball
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 4) - Device Libraries
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 3) - Transcoders
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 2) - Detecting the Context
  •  Server-Side Browser Detection and Content Delivery : Mobile Detection (part 1) - HTTP
  •  Using Windows Phone 7 Technologies : Retrieving Accelerometer Data (part 2)
  •  Using Windows Phone 7 Technologies : Retrieving Accelerometer Data (part 1)
  •  Using Windows Phone 7 Technologies : Understanding Orientation and Movement
  •  Programming the Mobile Web : HTML 5 (part 4) - Client Storage
  •  Programming the Mobile Web : HTML 5 (part 3) - Offline Operation
  •  Programming the Mobile Web : HTML 5 (part 2) - The canvas Element
  •  Programming the Mobile Web : HTML 5 (part 1)
  •  Windows Phone 7 : Submitting Your First Windows Phone Application to the Windows Phone Marketplace
  •  Windows Phone 7 : Packaging, Publishing, and Managing Applications
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 3)
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 2)
  •  Mobile Application Security : Windows Mobile Security - Development and Security Testing (part 1)
  •  Programming the Mobile Web : Mobile Rich Internet Applications (part 2) - JavaScript Mobile UI Patterns
  •  Programming the Mobile Web : Mobile Rich Internet Applications (part 1) - JavaScript UI Libraries
    Top 10
    Operating System Options (Part 2)
    Operating System Options (Part 1)
    Adobe Premiere Elements 11.0
    Dragon NaturallySpeaking 12.0 Premium
    Expert Computing Advice – January 2013 (Part 2)
    Expert Computing Advice – January 2013 (Part 1)
    Managing Your Files In Windows 8
    Kindle Fire HD - Amazon’s Kindle e-Reader
    Versus Touchpad 9.7 - Attractive Pre-Loaded Software
    The Fourth-Generation iPad Review
    Most View
    BizTalk 2006 : Editing and Resubmitting Suspended Messages (part 2) - Pseudo-Walkthrough to Perform Edits and Resubmits
    The Language of Apple Platforms : Memory Management
    IIS 7.0 : Securing Communications with Secure Socket Layer (SSL)
    ASP.NET and AJAX
    Microsoft Windows Home Server 2011 : Automating Client Logons
    Nexus 7 Vs Kindle Fire
    Showdown: lOS vs Android vs WP7 (Part 2)
    100 Windows Speed-Up Tips (Part 7) - Five ways Jump Lists can save your time
    Use Photoshop Touch To Edit Your Photos
    Exchange Server 2007 : Configure the Client Access Server - Create and Apply ActiveSync Mailbox Policies
    MySQL Server Monitoring (part 1) - SQL Commands
    Intel vs AMD - The Choice Is Harder Than Ever (Part 1)
    Corsair Vengeance C70 Mid - Tower Gaming Case
    Programming Microsoft SQL Server 2005: Using the Data Mining Wizard and Data Mining Designer (part 5) - Viewing Mining Models
    Ultrasone HFI-580 Headphone Review
    All About Compact System Cameras (Part 1) - Nikon 1 V1
    Choosing a super-zoom camera (part 7) - Nikon Coolpix S9100 & Olympus SZ-30MR
    Canon EOS 650D - Big Improvements (Part 1)
    Using Non-Windows Systems to Access Exchange Server 2010 : Configuring and Implementing Entourage for the Mac
    Enabling Presence Information in SharePoint with Microsoft Communications Server 2010