As you did in Chapter 6, please download and extract images and code for this chapter. If you need refreshing on how to do this, review Figures 6-2 thru 6-4. As usual, start off with a spotlessly clean desktop. Then, open a browser and navigate to http://rorylewis.com/xCode/009_DragRotateAndScale.zip and download its contents to your desktop. Then, extract the files onto your desktop.

There will be four text files, one image file, and a folder containing the final working code for DragRotateAndScale (in the event you encounter trouble coding it yourself). The image file is the image I used in the example—of my puppy Shaka. The text files consist of sections of boilerplate code from which I will ask you to copy and paste various pieces. You are welcome to use these files in any of your future programs that involve touches. You'll find Translate.rtf, HelperFunctions.rtf, TranslateRotateScale.rtf, and ViewController.rtf.

Once you have extracted all the files, remember to delete the 009_DragRotateAndScale.zip and 009_DragRotateAndScale folders. Also, file the DragRotateAndScale Xcode to a safe place, for if you leave it on your desktop it will be overwritten and conflict with your exercise code. Monkeys will start writing Shakespeare, and the world will collapse and disappear ... all because you did not file it away. After you follow these directions, you will have five files on your desktop.

To start our DragRotateAndScale application, we need to make a new project in Xcode as we've always done. Open Xcode and select the View-based Application template item (as shown in Figure 7-1).

Figure 7.1. Create a new View-based application to start the DragRotateAndScale project.

Make sure the Product menu is set to iPhone before continuing. Name the project DragRotateAndScale and click the Save button, as shown in Figure 7-2.

Figure 7.2. Name and save the project.

Next, choose and prepare an image file as your main object for this exercise. Choose whatever is appealing, and save it on your desktop. By the way, we have chosen a smaller image than earlier exercises have used (100 × 100 pixels), to allow for manipulating and sizing.

Copy the handy image file into the project's folder, as shown in Figure 7-3. Click the usual boxes and radio buttons to ensure proper management of this image file down the road.

Figure 7.3. Copy your desired image into the Xcode project. The image used in the example is 100 × 100 pixels.

We are going to add a new file to our project: a UIImageView subclass called TransformView. This class will intercept touch events and change their transforms accordingly. We are making TransformView a UIImageView subclass so that we can assign an image to our instance and then see it rendered on the screen. Technically, a UIView subclass can do what we want, but, for this example, we want to focus on the transforms and not worry about custom drawing code for a UIView subclass.

Creating a custom view isn't strictly necessary for this application, but we will do it anyway–to flex our subclassing muscles. The DragRotateAndScaleViewController could technically do everything we need to make this application work, without the need for a custom UIView subclass, but subclassing makes the code simpler and more robust. Thus, we select a new Objective-C class in the New File window, as shown in Figure 7-4.

Figure 7.4. Create a new Objective-C class file.

In the header file, TransformView.h, make sure the superclass–that is, the statement after the colon (:)–is specified as UIImageView. We do this so we'll be able to assign an image quickly and easily. Your header file should look like the one in Figure 7-5.

Figure 7.5. The TransformView class, a subclass of UIImageView

//
//  TransformView.h

#import <UIKit/UIKit.h>

@interface TransformView : UIImageView
{

}

@end

For the implementation file, TransformView.m, we want to handle the creation of our view a little differently than normal. UIImageViews do not handle touch input by default, and they therefore reject any touch input they receive. This would not serve us! We want our view to handle not only touch input, but multiple touches.

To do this, we override the method (id) initWithImage:(UIImage*)image. Inside of our override, we will insert the lines [self setUserInteractionEnabled:YES] and [self setMultipleTouchEnabled:YES]. Of course, we end each line with a semicolon.

The first line will allow our view to respond to touch events. The second will allow TransformView to receive multiple touch events, which we'll need if we're going to enable users to pinch and spread their fingers to scale and rotate. Your code should look like Figure 7-6.

Figure 7.6. Enable TransformView to process multiple events.

//
//  TransformView.m

#import "TransformView.h"

@implementation TransformView

- (id) initWithImage:(UIImage *)image
{
        if (self = [super initWithImage:image])
        {
                [self setUserInteractionEnabled:YES];
                [self setMultipleTouchEnabled:YES];
        }

        return self;
}

@end

Now we want to begin the process of creating the pieces of code that define the extent to which the users' touches affect the images and other interface parameters. To do this, we override various methods whose names literally start with the term "touches." These touches methods are called into action whenever a user touches the device, moves a touch, or stops touching the device. The four "reversal" methods we will add are these:

- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event

- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event

- (void) touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event

- (void) touchesCancelled:(NSSet*)touches withEvent:(UIEvent*)event

Note that touchesCancelled:withEvent: calls, or refers, to –touchesEnded:withEvent:. This is because we generally want a cancelled touch to behave as though the user had ended that touch. "Cancelled" is what we call any user input (in this case a touch) that is called off by performing the identical input; for example, a button is pushed ON, but then pushed again OFF. An "ended" touch is an intentional input that is the cessation, or stopping, of an ongoing touch, or swipe, which proceeds for more than just an instant. This distinction may not always apply, but it's a good approach for our purposes.

Figure 7.7. The lines of stub code dealing with overriding defaults are inserted.

We may not end up adding details in all of our touches methods, but we want to override them all anyway. This is so that we are in complete control–so that we claim administrative ownership of the touches at all times. It is simply good practice.

//
//  TransformView.m

#import "TransformView.h"

@implementation TransformView

- (id) initWithImage:(UIImage *)image
{
        if (self = [super initWithImage:image])
        {
                [self setUserInteractionEnabled:YES];
                [self setMultipleTouchEnabled:YES];
        }

        return self;
}

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

}

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{

}

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{

}

- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
        [self touchesEnded:touches withEvent:event];
}
@end

Let's start on the section of our code that will allow for moving the image around–in other words, the code that enables us to drag objects. This means that, for now, we are going to zero in on one line of code: -touchesMoved:withEvent:.

For the time being, the other touches methods will remain unchanged. Your touchesMoved method should look like Figure 7-8.

Figure 7.8. With this added code, the user can now move the TransformView image with one finger.

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
                CGPoint newTouch = [[touches anyObject] locationInView:[self˜CCC
 superview]];
                CGPoint lastTouch = [[touches anyObject] previousLocationInView:[self˜CCC
 superview]];

                float xDif = newTouch.x - lastTouch.x;
                float yDif = newTouch.y - lastTouch.y;

                CGAffineTransform translate = CGAffineTransformMakeTranslation(xDif,˜CCC
 yDif);
                [self setTransform: CGAffineTransformConcat([self transform],˜CCC
 translate)];
}

Let's step through this code and see if we can determine what's really happening.

First of all, what is this CGPoint business? CGPoint is core code that has been programmed for us by the clever people at Apple; it is the part of the program in the CoreGraphics module that describes a point in 2D space, with members x and y. Finger touches by the user result in CGPoints when their location is appropriate and requested–by the nature of the application.

This information can yield the distance between the two points using some very simple math. Now, take a look at the call to [[touches anyObject] locationInView:[self superview]]. This code grabs a touch object from the NSSet of touches and requests its location in this object's superview. In other words, we are simply asking for the location of the touch in relation to the superview.

This is different than one might expect. Why are we asking about the position in the superview and not about the position in the TransformView itself? Because we want to know where to move the TransformView in the superview. Thus, we get the current and previous positions of the touch in the superview.

The next two lines work together to calculate the difference between the old position and the new position on the x- and y-axes.

The following line creates a translation out of the position difference, storing this translation as a temporary CGAffineTransform. That's a big term, but it simply means a matrix that stores the change in position for the view. Since the "translation" matrix is relative, we have to add it to our current transform. We do this on the last line of highlighted code, concatenating (merging or combining) the view's "current" transform and the "translation" transform to get a transform that holds our new position. Once we have that new transform, we set the view's transform to the new one.

So, our TransformView is ready for its first test run. We need to make an instance somewhere and add it as a subview to something else. Our DragRotateAndScaleViewController is where this is done. Moving into the DragRotateAndScaleViewController header file, all we need to do here is import our TransformView.h file, as you can see in Figure 7-9.

Figure 7.9. Import the TransformView.h header file.

//
//  DragRotateAndScaleViewController.h

#import <UIKit/UIKit.h>
#import "TransformView.h"

@interface DragRotateAndScaleViewController : UIViewController {

}

@end

In the DragRotateAndScaleViewController implementation file, we want to create a TransformView and make it visible to the user. We want to make sure the view is ready, so we perform this action in the viewDidLoad method override. Your code should come out looking like Figure 7-10.

Figure 7.10. Now we can see and move our TransformView. We're almost there!

- (void)viewDidLoad
{
    [super viewDidLoad];

        TransformView* theTouchView = [[TransformView alloc] initWithImage:[UIImage˜CCC
 imageNamed:@"Shaka.png"]];
        [theTouchView setFrame:CGRectMake(110, 180, [theTouchView frame].size.width,˜CCC
 [theTouchView frame].size.height)];
        [[self view] addSubview:theTouchView];
        [theTouchView release];
}

Let's see how close you are as you analyze these lines and predict what we are creating and defining. In the first bolded line, we begin by creating a new TransformView object, passing it a UIImage object with the name of the image we dragged in at the beginning of the process. This will call the method override we wrote earlier, allowing the TransformView to take touch input.

Next, we set the frame of the TransformView in order to position it initially within the view. The numbers were derived from the dimensions of the iPhone and the dimensions of the image, 100× 100 pixels.

The third line of code adds the TransformView as a subview to the self view, so that our TransformView will be drawn.

The last line sends a release call–for memory management purposes.

That ought to do it! We should be able to run the code at this point and be able to move the TransformView around–just by touching and dragging. Figure 7-11 shows the first step of testing the TransformView, which is to select the appropriate platform on which to simulate the app.

Figure 7.11. Make sure the executable is set to the iPhone Simulator.

Figure 7-12 demonstrates the iPhone Simulator loaded with your single image. I need to be able to move the image – so, touch and drag your photo. Yes, this is a simple test, but Rome wasn't built in a day.

Figure 7.12. Touch and drag to move your image around!

Having controlled the image with the simulated fingertip, let's switch over to the other platform. Figure 7-13 shows the frame in which to switch the executable to select the iPad Simulator. You need the TransformView to function there as well as it does on the iPhone.

Figure 7.13. Let's test our code on the iPad Simulator.

Figure 7-14 depicts the iPad Simulator in a normal view mode, which expands the relative size of the image so that it continues to occupy a proportional amount of the screen. Touch it and drag it to prove the fluency of the iPad platform.

And, because there is also an embedded iPhone view within the iPad Simulator executable, we need to test that as well. Figure 7-15 shows that option, vividly demonstrating the relative sizes of the identical image in these two modes.

Figure 7.14. You will see your image moving in a normal iPad view.

Figure 7.15. In the embedded iPhone view, we see the image appear to shrink back to its normal size.

Excellent–we're on a roll! Let's keep going.

Your application looks pretty cool so far, but it can be made even better by allowing the user to zoom and rotate the picture. This requires more complex computation and touch monitoring. As you already know, we must track two concurrent touches and determine their relative positions. To accomplish this, we need to modify our TransformView header file.

In the TransformView.h file, we are going to add two UITouch* fields: firstTouch and secondTouch. These touch objects will track the distance and angle between the touch points that fall on this view. Additionally, we will add method prototypes for the helper methods that we will be using to calculate the transform changes, as you can see in Figure 7-16.

Figure 7.16. Modify the TransformView.m implementation file to track two touches.

//
//  TransformView.h

#import <UIKit/UIKit.h>

@interface TransformView : UIImageView
{
      UITouch* firstTouch;
      UITouch* secondTouch;
}

- (float) angleBetweenThisPoint:(CGPoint)firstPoint ˜CCC andThisPoint:(CGPoint)secondPoint;
- (float) distanceBetweenThisPoint:(CGPoint)firstPoint andThisPoint:˜CCC
(CGPoint)secondPoint;

@end

We declare the instance variables for the class:two UITouch objects that will be used to track the user's touch inputs. At the bottom, you will see the prototypes for the helper methods we will use to change the transform.

You might be asking, "Why even bother with passing CGPoints to the helper functions? Why not use UITouch* instead?" Because we may decide at some later date to change the way touch input is handled, potentially off-setting or changing the touch positions from their real positions (for whatever reason). That would require us to change our helper code, which is not ideal. Instead, the helper code should always function in the same manner while the calling code changes the input if needed.

Now that we have our instance variables and method prototypes, we can build out the implementation file. These helper methods could have been declared in a private interface, but that would have been overkill for this type of application.

Inside the TransformView.m file, create the helper methods as shown in Figure 7-17.

Figure 7.17. Bring in your "helper methods" from the downloaded helperFunctions.rtf file.

- (float) distanceBetweenThisPoint:(CGPoint)firstPoint andThisPoint:

(CGPoint)secondPoint
{
      float xDif = firstPoint.x - secondPoint.x;
      float yDif = firstPoint.y - secondPoint.y;

      float dist = ((xDif * xDif) + (yDif * yDif));

      return sqrt(dist);
}

- (float) angleBetweenThisPoint:(CGPoint)firstPoint? andThisPoint:(CGPoint)secondPoint
{
      float xDif = firstPoint.x - secondPoint.x;
      float yDif = firstPoint.y - secondPoint.y;

      return atan2(xDif, yDif);
}

Fortunately, these "helper methods" are relatively straightforward. They simply calculate the distance and the angle in radians, respectively, between the two touches -. These will be used by our touches methods to create scaling and rotation transforms that will be applied to the TransformView.

The -distanceBetweenThisPoint:[*]andThisPoint: term finds the x and y position differences between the two points and utilizes the good old Pythagorean Theorem to calculate the straightline distance between the points.

Similarly, -angleBetweenThisPoint:[*]andThisPoint: finds the angle from the first point to the second point in relation to the x-axis, returning the result in radians.

We'll start with the easier part of this next section of our code. You will need to add some code to touchesBegan:withEvent: in order to track our touches. This looks pretty daunting, but you're beginning to operate at a pretty advanced level ... and, for some, this'll be a cakewalk.

We are still in the implementation file, TransformView.m, and we are going to rewrite our touches methods to handle multiple touches and to utilize our helper functions in order to change the transform.

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
      //Single touch
      if ([touches count] == 1)
      {
        if (!firstTouch)
        {
               firstTouch = [[touches anyObject] retain];
        }
        else if (!secondTouch)
        {
              secondTouch = [[touches anyObject] retain];
        }
      }
      //Multiple touch
      if ([touches count] == 2)
      {
       NSArray* theTouches = [touches allObjects];
       [firstTouch release];
       [secondTouch release];
       firstTouch = nil;
       secondTouch = nil;
       firstTouch = [[theTouches objectAtIndex:0] retain];
       secondTouch = [[theTouches objectAtIndex:1] retain];
      }
}

All right ... see if you can tell what's happening here. First, we check to see if there is only one touch–by checking the count of touches. If there is only one touch, we direct the computer to hold onto it–in memory–for later use, in whichever field we aren't already using.

If there are two touches, we grab all of the touches from the set, release our previous touches, and set the fields to the first two touches in the array of touches. This approach gives us the two touch objects we need and it ignores any extraneous touches. Easy, huh?

Copy this code from the TranslateRotateScale.rtf file that you downloaded at the beginning of the chapter and saved to your desktop, as shown in Figure 7-18. Then, paste these lines into the implementation file.

Figure 7.18. Grab the new touch code from the downloaded TranslateRotateScale.rtf file.

Take a deep breath. Relax! The next chunk of code may look intimidating, but it's actually quite simple. We'll walk through it together, and you'll see exactly what's happening.

This code modifies the -touchesMoved:[*]withEvent: method, and it also utilizes our helper methods. We use the data from the touches and helper methods to create transforms that are concatenated with the current transform.

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
      if ([touches count] == 1)
      {
       CGPoint newTouch = [[touches anyObject] locationInView:[self superview]];
       CGPoint lastTouch = [[touches anyObject] previousLocationInView:
       [self superview]];

       float xDif = newTouch.x - lastTouch.x;
       float yDif = newTouch.y - lastTouch.y;

       CGAffineTransform translate = CGAffineTransformMakeTranslation(xDif, yDif);
       [self setTransform: CGAffineTransformConcat([self transform], translate)];
       }
       else if ([touches count] == 2 && firstTouch && secondTouch)
       {
       //Rotate
       float newAngle = [self angleBetweenThisPoint:[firstTouch locationInView:
       [self superview]]

       andThisPoint:[secondTouch locationInView:[self superview]]];
       float oldAngle = [self angleBetweenThisPoint:
       [firstTouch previousLocationInView:[self superview]]

       andThisPoint:[secondTouch previousLocationInView:[self superview]]];

       CGAffineTransform rotation = CGAffineTransformMakeRotation(oldAngle - newAngle);

       [self setTransform: CGAffineTransformConcat([self transform], rotation)];

       //Scale
       float newDistance = [self distanceBetweenThisPoint:
       [firstTouch locationInView:[self superview]]

       andThisPoint:[secondTouch locationInView:[self superview]]];
       float oldDistance = [self distanceBetweenThisPoint:
       [firstTouch previousLocationInView:[self superview]]
       andThisPoint:[secondTouch previousLocationInView:[self superview]]];

       float ratio = newDistance / oldDistance;

       CGAffineTransform scale = CGAffineTransformMakeScale(ratio, ratio);
       [self setTransform: CGAffineTransformConcat([self transform], scale)];
       }
}

First, we direct the computer to check whether only one touch moved. If that is the case, then we call forth exactly the same code we had for translation before. It doesn't get much easier than that!

If there are two touches, however, we begin calculating the rotation and scaling transforms. The rotation calculation is started by using our helper method to find the angle between the current touch points. We follow that by finding the angle between the old touch points. A rotation transform is made by finding the difference between the two angles. This creates a relative rotation transform that, just like before, needs to be concatenated with the current transform.

Next, we calculate the appropriate scaling that needs to be done based on the position of the touches. We use our helper method to find the distance between the touch points for both the current touches and the previous touches. We then find the ratio of the new distance to the old distance. This gives us a scaling factor by which we will scale the current transform. Using this factor, we create a relative scale transform and subsequently concatenate it with the current transform.

See? I told you it wasn't that bad! You can show this code to your friends and watch their jaws punch a hole in the floor while you flash them your knowing smile.

Running this code now allows the user to drag the image with one finger or rotate and scale it with a pinch gesture, as shown in Figure 7-19 and Figure 7-20.

Figure 7.19. Drag, rotate, and scale your image.

Figure 7.20. It works smoothly on the iPad!

You're done! Check out your draggable, rotatable, and scalable custom UIImageView subclass!

So, how is this approach useful? Where should it be used and what are some things to watch for? As we discussed earlier, this is a very intuitive and friendly interface, even for users who are new to the iPhone/iPad. This approach should be considered for any application that has objects that sport lots of detail and benefit from direct user interaction.

The iPad SDK contains two never-before-seen commands (3Tap.plist and LongPress.plist) that are nowhere to be found in any iPhone SDK up to 3.1. What do 3Tap and LongPress do? Exactly what their names say. The iPad will recognize three quick taps and an extended long press–different from the one already used for copy and paste.

My prediction is that a primary use of the iPad in future years will be as a textbook medium; students will be able to write notes on their ebooks and display them on their iPads. Bear in mind that we already allow a swipe to delete messages and emails, just like pressing the Delete key. When a student is writing notes on an iPad etext, maybe a swipe will be a neat way to erase some of the contents, just like using a pencil eraser.