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; }
When I use MasksToBounds = false the background outside of the rounded corners shows. How can I clip those but keep the shadow?
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
Nice bit of code, thanks for sharing it.
This is great and exactly what I needed. Thank you for sharing it.