Multi-touch interaction

Today we are going to introduce the multi-touch interaction that will extend the previous application's example.
If you haven't done, download the source code of the last version of the TestTouch application and open it with Xcode.

The multi-touch interaction is disabled by default, so in the TouchView.m file we have to enable it by writing the following piece of code (put it where you want between the keywords "@implementation TouchView" and "@end":

- (void)awakeFromNib {
    [self setMultipleTouchEnabled:YES];
}

The source code you will find into the touchesEnded we wrote last time has to be executed only on single touch, so we have to surround it with the following check code:

if (numFingers == 1) {
    // Put here the old code
    ...
}

The 'numFingers' is an NSUInteger variable initialized at the beginning of the touchesEnded method as follows:

NSUInteger numFingers = [touches count];

As multi-touch behavior let's say we want to scale the red square we have inside the main view using the pinch gesture.
First of all let's define in the TouchView.h file a helper function the we will use to calculate the scale factor:

static inline CGFloat calculateScaleFactor(CGPoint line1Start, CGPoint line1End, CGPoint line2Start, CGPoint line2End) {
    CGFloat dx1 = line1End.x - line1Start.x;
    CGFloat dy1 = line1End.y - line1Start.y;

    CGFloat dx2 = line2End.x - line2Start.x;
    CGFloat dy2 = line2End.y - line2Start.y;
   
    CGFloat line1Length = sqrt((dx1 * dx1) + (dy1 * dy1));
    CGFloat line2Length = sqrt((dx2 * dx2) + (dy2 * dy2));
   
    CGFloat scaleFactor = line1Length != 0 ? (line2Length / line1Length) : 1.0;
   
    return scaleFactor;
}

The scale factor here is defined as ratio between the lengths of the end and the start lines identifying the distances between the two fingers on the screen.

Then in the TouchView.m we have to insert the code to retrieve the positions of the fingers. This code has to be inserted into the touchesMoved method:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    if ([touches count] == 2) {
        // Retrieve the two fingers touches:
        NSArray *twoTouches = [touches allObjects];
        UITouch *first = [twoTouches objectAtIndex:0];
        UITouch *second = [twoTouches objectAtIndex:1];
       
        // Retrieve their old positions:
        CGPoint startPoint1 = [first previousLocationInView:self];
        CGPoint startPoint2 = [second previousLocationInView:self];
       
        // Retrieve their actual positions:
        CGPoint endPoint1 = [first locationInView:self];
        CGPoint endPoint2 = [second locationInView:self];
       
        // Calculate the scaling factor:
        CGFloat currentScaleFactor = calculateScaleFactor(startPoint1, startPoint2, endPoint1, endPoint2);
       
        // Apply the tranformation to the red square:
        followerView.transform = CGAffineTransformScale(followerView.transform, currentScaleFactor, currentScaleFactor);
    }
}

Now you can press the button 'Build and Go' and enjoy with scaling the red square through the pinch gesture.
You can substitute the simple red view with the UIImageView and load in it an image or a photo and enjoy scaling the photo.
Here you can find the source code of the project.

Thanks for reading and leave your comments.

Touch the code

Image via Wikipedia

In this first article I want to give you some information on how to manage touch events and use them to move an object into the main window.

Open Xcode and create a new window-based application's project. Give it a name (I chose TestTouch).
The wizard will create the application's delegate object positioned into the Classes group.

Now we have to add a view over the main window and create a class associated to it that will receive the touch events and will manage them.

Go to File menu and choose "New File"; from the Cocoa Touch Class choose Object-C class and from the Subclass combo choose UIView, then press Next and give a name to the new class. I named it TouchView.

Now in the TouchView.h add an IBOutlet as follow:

IBOutlet UIView *followerView;

Now go to the TouchView.m file and insert the code that will be used to intercepts the touches and manage them:

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

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

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

Leave empty the touchesBegan and touchesMoved (we will use them in the next lesson). Inside the method touchesEnded we have to put the code to catch the touch position and move consequently the 'followerView' view we defined previously.
First we have to get the touch object:

UITouch *touch = [touches anyObject];

and then extract the position related to the screen:

CGPoint pos = [touch locationInView:self];

and then set the new position to the follower view:

[followerView setCenter:pos];

To complete the exercise we have to open the MainWindow.xib. By double clicking on it the InterfaceBuilder will open.
Add a UIView widget over the Window and in the Identity tab as Class choose the TouchView we created before.

Add another UIView widget over the view just added and make it to be a small square (With = height = 37 for example).
Give the two UIView different background colors (I used black for the main view and red for the small one).
The last step is to connect the IBOutlets we defined into the TouchView with the small red view. Do it from the InterfaceBuilder.
Press "Build and Go" in the Xcode and enjoy with the small square that will follow your touches on the device ;)
You can find here the Xcode project with the source code.

Related articles

• iPhone SDK Development (oreilly.com)
• Xcode 3.2 Daily Tip: Analyzing Your Code (tuaw.com)

Make an iPhone application

This is the last presentation of the trilogy :)
In this third appointment we will learn which are the steps to make an application base on what we learned in previous two lessons.
have a good show and thanks for reading.

Making An App

View more presentations from Omar Cafini.

Objective-C for beginners

Today I want to present to you the second lesson I prepared for the University of Bologna with a friend of mine: Omar Cafini about the bases of Objective-C programming.

The presentation wants to give an overview of Objective-C code writing and bases on how to deal with applications present on the iPhone/iPod Touch such Addressbook and ImagePicker.

One note more is about the storage and data handling, touch and multi-touch events handling and SQLite interface.
For more, watch the slideshow and post your feedback:

Parte II Objective C

View more presentations from Paolo Quadrani.