iPhone Programming Tutorial - Using UITouch To Drag An Image Around The Screen
In this tutorial, I will be showing you how to use UITouch to get the location of where a user touches on the screen. We will be using this knowledge to drag a UIImageView around.
Learning how to use UITouch is the first steps in creating applications that are not navigation based (or don’t only use Apple’s built in components. Later on, we will begin some basic game development that will utilize UITouch.
You will need this image for the tutorial
In this tutorial, we will perform the following tasks:
Adding An Image To The Project
Adding images to your projects is very simple. All you do is drag them from some folder into your project’s directory in XCode. XCode will prompt you to add the image to the project and will also ask you if you want to copy the image to the project’s directory. You can use images for a variety of things in XCode. From inserting them in to UIImageViews to using them for UITabBarItems.
Declaring an IBOutlet for the Image
We create an IBOutlet for the UIImageView so that we can interface with it. This will allow the code to send messages to the interface. In this example, we need this to move the image to the location of the touch.
Adding a UIImageView
UIImageViews serve one purpose, and that is to hold an image. After dragging one on to your view, populating it with an image is easy. Any images that you have added to your project will show up in the “Image Dropdown” under the Attributes Inspector section for the UIImageView. Simply select one of these images and watch it appear in your view.
Connect The UIImageView to the IBOutlet
This is the step that connects interface to code. We simple drag from “new referencing outlet” to the “File’s Owner” object and click on the word “cloud”. The connection has been made.
Implement the TouchesBegan Method
In this step, we are overriding a method that Apple has already created so that we can add our own functionality. This method will automatically get called every time the user touches inside of the view. Notices that it takes an NSSet of touches. This is a set contains information about every touch on the screen. So if the uses touches the screen with 2 fingers, this set will contain two touch objects. For this tutorial we are only interested in one.
Once we get the touch location, we set the center of the image to that location. The image will now move to any spot that gets touched.
Implement The TouchesMoved Event
This method must be implemented because TouchesBegan only gets called one time when the user touches the screen. TouchesMoved gets called every time the user “drags” their finger around. To not duplication code, we just told this method to call the TouchesBegan method because we already wrote all of the movement code in it.
Thank you for reading this tutorial. If you have any questions or comments, feel free to leave them in the comments section of this post. You can also download the sample code here. Also, if you haven’t already done so, subscribe to the RSS feed here as I will be adding new tutorials at least once a week. Happy iCoding!
- Posted on 20 Oct 2008 in Uncategorized
- Digg |
- Del.icio.us |
- Stumble |
17 Responses
delphine Says:
October 20th, 2008 at 7:51 am
Thank you very much for this tutorial very easy to understand !
profi47 Says:
October 20th, 2008 at 8:31 am
I’m new on the iPhone and your tutorial has helped me alot.
Thx!
mikezupan Says:
October 20th, 2008 at 7:42 pm
little tip.. remove the build directory out of your zip files.. no need to post a 1.4 meg file
bender Says:
October 22nd, 2008 at 6:29 am
Thanks a lot for this great tutorial!
My tip: more pauses. It’s hard to follow and type all the stuff. Often I must go backwards in the video.
Brandon Says:
October 22nd, 2008 at 11:36 am
@bender,
I will keep that in mind when adding audio to the next tutorial. Thanks for the input…
Oibalf Says:
October 24th, 2008 at 2:56 pm
Thanks for posting this tutorial! You really break down the process so that it is easy to follow. Looking forward to more tutorials!
Mike Says:
October 30th, 2008 at 11:42 am
Great tutorial.
Question though. How would you make it so the ability to drag/move the object is reliant on touching the object itself? So if you ‘click’ anywhere else on the screen the object does not react.
Brandon Says:
October 30th, 2008 at 1:45 pm
@Mike,
You would need to check the position of the touch. You would want to check the following conditions….
cloud.center - (cloud.width/2) > touch.x < cloud.center + (cloud.width/2)
And
cloud.center - (cloud.height/2) > touch.y < cloud.center + (cloud.height/2)
I hope this make sense to you. Basically, if the touch falls between these bounds, then move the center of the image to the touch. Otherwise, ignore it.
Let me know if you need further clarification.
James Says:
November 11th, 2008 at 10:19 am
Great video thanks, glad I’ve stumbled across your site, I’ve got loads to learn having never programmed before but what I lack in experience I make up for with enthusiasm and sites like yours with video tutorials are worth their weight in gold.
Thanks
Elizabeth Says:
November 13th, 2008 at 4:49 am
ditto what james said…
the best tutorials i’ve found so far.
thanks a ton!
Robbie Says:
November 14th, 2008 at 10:34 am
hey, when i try to connect the referencing outlet to the files owner, I only see view, not cloud & view.
Rana Hammad Says:
December 24th, 2008 at 3:54 am
is it possible to drag the image with in table view; from one row to another?
Brandon Says:
December 24th, 2008 at 9:53 am
@Rana,
I’m not sure about that. To achieve such a functionality, you might have to lay another view on top of the tableview to intercept the touches events.
Mark Says:
January 2nd, 2009 at 8:16 am
Thank you very much for this tutorial! Really helpfull and clear.
Ricardo Barroso Says:
January 2nd, 2009 at 8:28 pm
Brandon, thanks for another simple and nice tutorial.
To others, if you want to play a little more with this code, you can try the these 2 “mods”.
1. Add the following method to “UITouchViewController.m” and when you release the image, the background will turn yellow:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[self touchesBegan:touches withEvent:event];
self.view.backgroundColor = [UIColor yellowColor];
}
2. Add the following lines to the end of “touchesMoved:withEvent:” method, and when you drag the image in the right half of the view, the background will turn green, In the left half, it will turn red.
if (cloud.center.x > 160) {
self.view.backgroundColor = [UIColor greenColor];
}
else {
self.view.backgroundColor = [UIColor redColor];
}
Ricardo
Leave a Reply
Subscribe
