MonoTouch: Rounded UIImage Convenience Method

Question

Is there a MonoTouch built-in method to round the edges of a UIImage ?

I seem to remember seeing it once.

Answer 1

Rounding a UIImage would produce another UIImage.

You can do this if you create a CGContext to render into with the same size as the original image, then add a clipping path with the rounded corners and rendering your original UIImage.

Then you can pull the UIImage out of the CGContext.

Another option is to avoid the intermediate step, is to push the graphics state in your context drawing, add the rounded path as a clipping path, draw the image and then pop the graphics state to go back to this.

You can see how TweetStation uses this for its Glass Buttons:

https://github.com/migueldeicaza/MonoTouch.Dialog/blob/master/MonoTouch.Dialog/Utilities/GlassButton.cs#L76

Answer 2

I also suggest you the following tutorial on introduction-to-calayers-tutorial. It covers interesting stuffs on customizing layers in iOS.

Hope it helps.

Answer 3

Here is a nice code helper for MonoTouch users looking for a quick helper function. Tweeked code came from the Excellent Xamarin.com site:

public static UIImage RounderCorners (UIImage image, float width, float radius)
{
    UIGraphics.BeginImageContext (new SizeF (width, width));
    var c = UIGraphics.GetCurrentContext ();

                //Note: You need to write the Device.IsRetina code yourself 
    radius = Device.IsRetina ? radius * 2 : radius;

    c.BeginPath ();
    c.MoveTo (width, width / 2);
    c.AddArcToPoint (width, width, width / 2, width, radius);
    c.AddArcToPoint (0, width, 0, width / 2, radius);
    c.AddArcToPoint (0, 0, width / 2, 0, radius);
    c.AddArcToPoint (width, 0, width, width / 2, radius);
    c.ClosePath ();
    c.Clip ();

    image.Draw (new PointF (0, 0));
    var converted = UIGraphics.GetImageFromCurrentImageContext ();
    UIGraphics.EndImageContext ();
    return converted;
}

Answer 4

In MonoTouch (and iOS itself) it's not something you can do on UIImage itself. However you can do this on UIImageView by manipulating its Layer property.

See this answer for an Objective-C example that would be simple to convert to C#.

Answer 5

Based on BahaiResearch.com answer I've made another method for non-square images and a roundness percentage instead of a literal radius.

I'm not sure if it will produce ellipsis correctly. So I'll appreciate if some one can test or even improve this method.

private static UIImage RoundCorners (UIImage image, float roundnessPercentage)
{
    float width = image.Size.Width;
    float height = image.Size.Height;
    float radius = ((width+height)/2) * (roundnessPercentage/(100*2));

    UIGraphics.BeginImageContext (new SizeF (width, height));
    CGContext c = UIGraphics.GetCurrentContext();

    c.BeginPath ();
    c.MoveTo(width, height/2);
    //Bottom-right Corner
    c.AddArcToPoint(width, height, height / 2, width, radius);
    //Bottom-left Corner
    c.AddArcToPoint(0, height, 0, 0, radius);
    //Top-left Corner
    c.AddArcToPoint(0, 0, width/2, 0, radius);
    //Top-right Corner
    c.AddArcToPoint(width, 0, width, height/2, radius);
    c.ClosePath();
    c.Clip();

    image.Draw (new PointF (0, 0));
    UIImage converted = UIGraphics.GetImageFromCurrentImageContext();
    UIGraphics.EndImageContext ();
    return converted;
}