#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.

8 thoughts on “#MonoTouch how to – Drag and Drop Image”

  1. Pingback: MonoTouch.Info
  2. Mange Tak Marcus!

    Perfect article for me, helps aptly with my current project. 🙂

    Was wondering if you had any other such interesting articles on programming with Monotouch [the existing material on the web isn’t much]. Please, Please, Be’ om post them if you do.

    Also, can you please give me a picture on the amount of usage of Monotouch amongst your development community. Plus, is the app submission process as problematic as it was when it comes to submission of apps developed using Monotouch?

    Never mind if you wouldn’t want to spend time on sending me a response. Thanks again for the article.

    Cheers!
    Vishnu

  3. No probs Vishnu,

    I’m glad it helped you out =)

    I haven’t done much MonoTouch development recently, but if I do you can expect some more content here =)

    I’d check monotouch.info. It’s a good aggregation service for everything MonoTouch. Also i think the Xamarian mailing list for monotouch is a good way to communicate with Monotouch devs and users 🙂

    Cheers!

  4. hi Marcus, Thanks for the code!

    Could you tell me how to replace the image of the green square by an image that I would import from my desktop?

    Sonia

  5. Hi Sonia,

    It’s been a while since I used MonoTouch, but Import the file into your project with monodevelop.

    The myDraggableImage is just an extension to UIImageView, so loading an image is as easy as

    myDraggableImage img = new myDraggableImage(new RectangleF(64,64,64,64)); //64 depending on your file size ofc.
    img.UserInteractionEnabled = true;
    img.Image = UIImage.FromFile(‘yourfile.png’)
    img.Hidden = false;

    window.AddSubview(img);

  6. The code requires a little cleaning. What is haveBeenTouchedOnce supposed to do? Also you don’t need two PointF class variables to achieve this. One is enough.

  7. I wont argue with you Radu, you’re probably right.

    If I recall correctly i had to use the Bool along with the double PointF in order to get rid of the object going back to the first position first time (as can be seen in the video). But there’s most likely smarter way to achieve it. Feel free to update it if you like!

Leave a Reply

Your email address will not be published. Required fields are marked *