MonoTouch – UIView with curved border and shadow

Giving a UIView a curved border and then adding a drop shadow is much easier than I first thought it would be, but as with anything with iOS development it took some time to work out.

Here is a UIView descendant “UIViewBordered”:

using System;
using MonoTouch.UIKit;
using MonoTouch.CoreGraphics;

namespace Spazzarama.Views
{
	public partial class UIViewBordered : UIView
	{
		// Constructor used when view is defined in InterfaceBuilder
		public UIViewBordered (IntPtr handle) : base(handle)
		{
			this.CreateCurveAndShadow();
		}

		// Constructor to use when creating in code
		public UIViewBordered (System.Drawing.RectangleF frame) : base(frame)
		{
			this.CreateCurveAndShadow();
		}

		private void CreateCurveAndShadow()
		{
			// MasksToBounds == false allows the shadow to appear outside the UIView frame
			this.Layer.MasksToBounds = false;
			this.Layer.CornerRadius = 10;
			this.Layer.ShadowColor = UIColor.DarkGray.CGColor;
			this.Layer.ShadowOpacity = 1.0f;
			this.Layer.ShadowRadius = 6.0f;
			this.Layer.ShadowOffset = new System.Drawing.SizeF(0f, 3f);
		}
	}
}

To test just place a UIViewBordered view as a subview of the main window and position in the middle with a size of 100×100.

	public override bool FinishedLaunching (UIApplication app, NSDictionary options)
	{
		var view = new UIViewBordered(new System.Drawing.RectangleF(100, 100, 115, 115));
		view.BackgroundColor = UIColor.White;
		view.AddSubview(new UITextView(new System.Drawing.RectangleF(5, 5, 105, 105)) { Text="UIViewBordered" });

		window.AddSubview (view);

		window.MakeKeyAndVisible ();

		return true;
	}

4 thoughts on “MonoTouch – UIView with curved border and shadow”

  1. When I use MasksToBounds = false the background outside of the rounded corners shows. How can I clip those but keep the shadow?

    1. Hi Ryan,

      You need to add a subview that also has rounded corners but no shadow and turn on MaskToBounds for this one. Then you add any other views as subviews to this second view.

      I have had to do this a couple times.

      Cheers,
      J

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.