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, as I will be adding new tutorials at least once a week. Happy iCoding!