iPhone SDK Articles
Welcome to the first part of Multi Touch tutorial series. In this tutorial I will show you how you can respond to a tap event.
- Touch Tutorial – Part One (touchesEnded Event)
- Touch Tutorial – Part Two (touchesBegan Event)
- Touch Tutorial – Part Three (Zoom In/Out)
- TouchTutorial – Part Four (pan left/right)
First tutorial in this series, I will show how to zoom and image in and out. This is how the application will look like.
To get started, we have to
- Create a new project by selecting “Windows-based Application”
- Create a new UIView using IB and name it ImgView.
- Create a new file in XCode by selecting File -> New File -> UIViewController sub class and name it “ImgViewController”.
- In IB, select File’s owner object of the “ImgView” nib file and select Tools -> Identity Inspector. Under Class Identity select “ImgViewContoller” as the class.
- Select Tools – > Connections Inspector and create a connection from the view property to the view object in IB.
- Place a UIImageView on the view we just created.
- Add a image to the resource folder, to be used by the UIImageView.
- Select the Image and select Tools -> Attributes Inspector in IB. From the Image drop down select your image.
- Set the Mode to Center.
- Un-check “User Interaction Enabled” and “Multiple Touch”.
- Select the view and select “Multiple Touch” in the Attributes Inspector. Note that “User Interaction Enabled” should already be checked, if not check it.
Using the last two settings all the touches events will be sent to ImgViewController. Since we need to control the image, we need a variable of type UIImageView. This is how the header file of “MultiTouchTutorialAppDelegate” will look like.
#import <UIKit/UIKit.h>>
@class ImgViewController;
@interface MultiTouchTutorialAppDelegate : NSObject {
UIWindow *window;
ImgViewController *ivController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@end
Using IB, select File’s owner object and open Tools -> Connections Inspector. Create a connection from the imgView to the UIImageView placed on the view. Now we will be able to control the UIImageView from code.
Now we need to add the view “ImgView” as a subview in applicationDidFinishLaunching method. This is how the source code will look like
- (void)applicationDidFinishLaunching:(UIApplication *)application {
ivController = [[ImgViewController alloc] initWithNibName:@”ImgView” bundle:[NSBundle mainBundle]];
[window addSubview:[ivController view]];
// Override point for customization after application launch
[window makeKeyAndVisible];
}
Click on Ctrl+return to run the application in simulator. You should see the image loaded in the simulator.
Right now the application does not respond to any events, but all we have to do is implement some methods. Let’s implement the touchesEnded method which will be called when touches are ended.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
}
}
In this method we will respond to a single tap and double tap. On single tap we will zoom out the image and on double tap we will set the mode to “Center”, which is doing the same as in step 9.
This is how the code looks like
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//Get all the touches.
NSSet *allTouches = [event allTouches];
//Number of touches on the screen
switch ([allTouches count])
{
case 1:
{
//Get the first touch.
UITouch *touch = [[allTouches allObjects] objectAtIndex:0];
switch([touch tapCount])
{
case 1://Single tap
imgView.contentMode = UIViewContentModeScaleAspectFit;
break;
case 2://Double tap.
imgView.contentMode = UIViewContentModeCenter;
break;
}
}
break;
}
}
We get all the touches from the event into allTouches variable. We thenfind out how many fingers were touching the screen, since in our case we only want to zoom in and out, it seems normal to assume that the user will only be using one finger. We then find out how many tocuhs are touching the screen by calling the count method of allTouches variable. If there is only one finger touching the screen, we get the Touch object at index zero and find out the tap count of that object. If the tap count is one we will zoom out the image and if it is two we are going to zoom in. We zoom out the image by setting the contentMode to UIViewContentModeScaleAspectFit and zoom in the image by setting it to UIViewContentModeCenter.
In this tutorial we learnt how to respond to touchesEnded event and in the ftuture tutorials we will learn ho wto respond to touches began, touches moved and touches cancelled.
You can download the source code for this tutorial here. Please leave me your comments and let me know your thoughts.
Happy Programming
iPhone SDK Articles
If you enjoyed this article, please consider sharing it!
>Can someone please tell me where the F____ the touchesEnded code goes? I’ve tried it in the appdelegate source file, as well as the imgviewcontroller source file … both give complaints and stop compilation when it gets to:
imgView.contentMode = UIViewContentModeScaleAspectFit;
It says imgView is indeclared, and I have to agree … I don’t know where a (lowercase) imgView would be. I’ve also tried renaming that to ImgView.contentMode to no avail …
Better yet, would it be possible to post an archive of the project once the tutorial is completed? Might help idiots like me, given that I haven’t used XCode practically since NeXstep
>Hi
I get this error can any one help me solvinh this
Line Location ImgViewController.m:69: error: ‘imgView’ undeclared (first use in this function)
>great man!! it helped a lot..!!
>Can you clarify this? You haven't defined what is the 'view property' or the 'view object' in those explicit terms. Thanks!
5. Select Tools – > Connections Inspector and create a connection from the view property to the view object in IB.
>Nice tutorial. However, one suggestion for the new developer: Tell us “where” the changes should go.. Like implementing the “touchesEnded” method, gives us no indication *where* to put it… I might be a complete noob, but that would help.
Thanks!
>@Mugunth Kumar You are right no need to start with a windows-based application
. Glad you enjoyed the articles.
Happy Programming,
iPhone SDK Articles
>Why should I start with a Window Based App and then create a new view, add it to project etc.,? Why can’t I just start with a “View based” app? It worked for me though?
BTW, nice tutorial…
>I did this tutorial from scratch and would like to mention that:
Step 2 was unclear to me — to create the new NIB file, I did this: control clicked on Resources in XCode > Add > New File > User Interfaces > View XIB, then named the new NIB file "ImgView".
Also, the line
#import "ImgViewController.h"
needs to go at the top of the MultiTouchTutorialAppDelegate.m file. It's not critical, but it eliminates a warning and represents better programming form.
>@jamminbean Good Catch.
I changed it.
Happy Programming,
iPhone SDK Articles
>"ImgViewController" should be replaced by "MultiTouchTutorialAppDelegate" in:
>>This is how the header file of "ImgViewController" will look like.<<
>Excellent tutorial for beginners.
Cheers
http://www.iphonekicks.com
>@yanbozey,
Absolutely right, a mistake I will correct right away.
Also, there is no need to declare the property, as it is not used anywhere but it doesn’t hurt.
Happy Programming,
iPhone SDK Articles
>What he forgot to add are the steps in declaring the ImgViewController.
in the AppDelegate header add:
@class ImgViewController;
also below the UIWindow *window; declaration add:
ImgViewController *ivController;
beneath the @property line add:
@property (nonatomic, retain) ImgViewController *ivController;
now you should be good…..
>this doesn’t work. all when I add the ivController method, I just get an error message that says that ivController is undeclared.
>great tutorials!!
I got stuck about half way through though.. at
“- (void)applicationDidFinishLaunching:(UIApplication *)application {
ivController = [[IMGViewController alloc] initWithNibName:@”ImgView” bundle:[NSBundle mainBundle]];
[window addSubview:[ivController view]];
// Override point for customization after app launch
[window makeKeyAndVisible];
}”
i get a warning for “IMGViewController” is aforward class…..
Any ideas what I’m missing? and in case you’re wondering I have the capitalization correct above..
Thanks in advance!!
Bob