Question

I have a specification to build a very simple diagramming capability into a MonoTouch app. Everything I’ve had to do up to now has been table based so this is new territory.

Numerous examples of diagramming can be found in the app store, for example the MindMeister and SimpleMind mindmapping apps.

I need users to be able to click on a view to “put down” a new shape, label it, and optionally connect it to an existing shape.

What would be a good approach to achieve this kind of interactive functionality? My first would be to put down a UIImageView created from a custom image, and then ensuring that it can respond to touch events to move it around. However, when you want to add a text overlay, matters become more complicated as you’d have to manage two views (both the image and the text).

What approach could I follow?

PS: Smite at will if this is inappropriate for SO!

Update: Basic diagram elements can be achieved by using a simple label override:

UILabel lbl = new UILabel(new RectangleF(...));
lbl.Text = "Whatever";
lbl.Layer.BorderWidth = 3f;
lbl.Layer.BorderColor ( new CGColor (1f, 0f, 0f) );
this.Add (lbl);

Some interactivity can be achieved by extending the gui element class and overriding the TouchesBegan, TouchesMoved and TouchesEnd events.

Answer 1

What you want to do is not that difficult. I do not have an example ready, but I will give you some steps that might help you getting started.

1. Create a custom view, inheriting
   UIView. This will hold your shape
   and text.
2. Add two subviews in it. The
   UIImageView that will hold your
   shape and a UILabel for the text.
3. Override your custom view’s Draw
   method. Inside it you can copy the contents of the view to an image context.
4. Assign the image from that context,
   to another layer.
5. Move that layer around, responding
   to user touches on your custom
   view’s superview.

Simple example:

public CALayer ContentsLayer { get; set; }
public override void Draw (RectangleF rect)
{
    base.Draw(rect);

    // Create an image context
    UIGraphics.BeginImageContext(this.Bounds.Size);

    // Render the contents of the view to the context
    this.Layer.RenderInContext(UIGraphics.GetCurrentContext());

    // Assign the contents to the layer
    this.ContentsLayer = new CALayer();
    this.ContentsLayer.Contents = UIGraphics.GetImageFromCurrentImageContext().CGImage;

    // End the context
    UIGraphics.EndImageContext();
}

This example is quite simple and should not be used as it is. For example, you should provide logic for when to receive the contents of your custom view. If you leave it like this, every time the Draw method gets called it will create a new context. You only need to do this once.

After copying the contents to a layer, you can move around that layer anywhere you want through your superview, by adding it to your superview’s layer and modifying its frame. You do not have to create another custom view for your superview, you can just create a custom UIGestureRecognizer, override its own Touches* methods and add it to the superview.

This way you have one object to move around (the layer) that holds both your shape and your text.

I hope this helps.