#MonoTouch how to – Drag and Drop Image

My blog posts are commonly in Swedish, but since this might interest users outside the borders of Sweden I decided to write this post in English.

Today, I’ll show how easy it is to Drag an Image around the screen using MonoTouch. Bear with me though, it’s my first how to .

It’s actually really simple, and you won’t need the Interface Builder.

What we need to do is to create an UIImageView class that overrides the functions TouchesBegan, TouchesMoved and TouchesEnded. It’s looking like this:

	public class myDraggableImage : UIImageView {

		//Store locations for remembering the last positions, and counting the future ones.
		PointF Location;
		PointF StartLocation;

		bool haveBeenTouchedOnce = false;

		public myDraggableImage ( RectangleF frame ){

					//Set the position of the frame with RectangleF (Replacement of CGRectangle)
					this.Frame = frame;
					StartLocation = this.Frame.Location;
		}

		//This event occurs when you just touch the object
		public override void TouchesBegan (MonoTouch.Foundation.NSSet touches, MonoTouch.UIKit.UIEvent e)
		{
			Console.WriteLine("Touched the object");
			Location = this.Frame.Location;

			var touch = (UITouch) e.TouchesForView (this).AnyObject;
			var bounds = Bounds;

			StartLocation = touch.LocationInView(this);
			this.Frame = new RectangleF(Location,bounds.Size);

		}
		//This event occurs when you drag it around
		public override void TouchesMoved (MonoTouch.Foundation.NSSet touches, MonoTouch.UIKit.UIEvent e)
		{
			Console.WriteLine("Dragged the object");
			var bounds = Bounds;
			var touch = (UITouch) e.TouchesForView (this).AnyObject;

			//Always refer to the StartLocation of the object that you've been dragging.
			Location.X += touch.LocationInView(this).X - StartLocation.X;
			Location.Y += touch.LocationInView(this).Y - StartLocation.Y;

			this.Frame = new RectangleF(Location,bounds.Size);

			haveBeenTouchedOnce = true;
		}

		public override void TouchesEnded (MonoTouch.Foundation.NSSet touches, MonoTouch.UIKit.UIEvent e)
		{
			StartLocation = Location;
		}

	}

What’s being done here is that as soon as we Touch the object it will run ”TouchesBegan” to start keeping track of the Object. And when we are moving it around, it constantly calls ”TouchesMoved” where we are updating the position of the UIImageView on the screen.

When you’ve implemented the class class in your project, all you need to do is to create the object within ”public override bool FinishedLaunching”.
It can for instance look like this:

myDraggableImage img = new myDraggableImage(new RectangleF(64,64,64,64));
			img.UserInteractionEnabled = true;
			img.BackgroundColor = UIColor.Green;
			img.Hidden = false;

			window.AddSubview(img);

The result will be a UIImageView that can be dragged around the screen.