There are no active ads.

Advertisement

Introduction to iOS Development: Simple Animation

How do you develop apps for iOS?  It’s a common question that many computer enthusiasts ask, and one we here at TechnoBuffalo hope to answer with this series of posts.

Learning how to develop software can be one of the most intimidating prospects for the average computer user, and with the growing saturation of applications in mobile marketplaces, it is becoming increasingly difficult to get your work noticed. That’s what this series is for, helping you learn iOS development from a conceptual perspective. No prior knowledge of computer programming will be necessary. Over the coming weeks, we’ll examine the iPhone’s ability to deliver immersive, intuitive content, a unique opportunity for both developers and consumers.

Today, we’ll be creating an application that illustrates simple drawing, touch navigation, and animation by utilizing the UIKit and Core Animation frameworks.

1.  Open Xcode 4, head to File > New Project and select View-Based Application. This will be the template that we are using in today’s tutorial and will automatically set you up with a view controller so you can manage the view and a nib file that contains it.

2.  Entitle the project Movement and save it in a safe place. Take a second to examine what the template provides us with – an app delegate, interface file, and view controller. We are going to need to add a pair of files to the project. Right click on the Classes folder and select Add New File. Find UIViewController Subclass and name the new files Placard View.

3.  As is true with every C-based application, the program’s initialization is handled through the main.m implementation file. With the View-based Application template, we are given the proper code that allocates and releases the memory necessary for the program’s correct execution. First, it creates the application’s autorelease pool used by the memory management reference counting system. Second, it calls the UIApplicationMain function to create the application’s key objects, initialize those objects, and start the event-processing loop. The application does not return from this function until it quits.

4.  The application delegate class in Movement project declares its interface in MovementAppDelegate.h and defines its implementation in MovementAppDelegate.m. The application delegate object works in tandem with the standard UIApplication object to respond to changing conditions in the application. The application object does most of the heavy lifting, but the delegate is responsible for several key behaviors. Nothing needs to be done in MovementAppDelegate.h, but there are some changes that need to be made in MovementAppDelegate.m. Make the following changes in your code so that it appears like the lines below. (click for a larger view)

 

5. Next, we are going to focus on the PlacardView initialization and implementation files. Go ahead and click on the former, making the changes below to ensure that the program functions correctly. By utilizing this subview, the application is able to calculate its own gesturing frame based on the size of an image.

 

6. The vast majority of the animation to be done will be handled by the initialization file’s brother, PlacardView.m. Head over to that file, and we’ll begin manipulating the code to decode touch gestures.The PlacardView class in the Movement application draws the Welcome button and manages its location on the screen. Although the PlacardView class could draw its content using an embedded UIImageView and UILabel object, it instead draws the content explicitly, to demonstrate the overall process. As a result, this class implements a drawRect: method, which is where all custom drawing for a view takes place. You’ll notice that you’ll need to add an image in the code below, and at the end of the article we have that image for your use. (click for a larger view)

7.  The Multi-Touch interface in iOS makes it possible for your application to recognize and respond to distinct events generated by multiple fingers touching the device. The ability to respond to multiple fingers offers considerable power, but represents a significant departure from the way traditional, mouse-based event-handling systems operate. As each finger touches the surface of the device, the touch sensor generates a new touch event. These touch events will be handled by the MovementView files. Change the initialization file to reflect the code below.

8.  There are two illustration behaviors that can come as a result of the implementation file of MovementView. It interprets single touch interactions and bounces the placard to the center of the interaction when touched. Double-taps outside the Welcome button update the string displayed by the button. Single taps inside the button center the button underneath the finger and trigger an initial animation to enlarge the button. All other touches are ignored. Luckily, despite the length of this code segment, it is relatively self-explanatory and intuitive. If you have any questions, ask them in the comments. Otherwise, try to make your code appear like that which is printed below. To see the giant version, click on the picture.

9.  If everything works properly, the application should look like the image below in the iOS Simulator.

Resources


Questions?

If you have any questions about the topics discussed in this lesson, feel free to voice them in the comments below. We will do our best to ensure that you have a relatively painless experience developing for iOS. Stay tuned for the next installment of this series, which is released weekly.

To read previous installments from this series, check the links below.


Jack McGrath

Rooted in his childhood obsession with dismantling and reassembling gizmos and gadgets around the house, Jack McGrath's knowledge of programming,...

Advertisement