Having Fun With UIVisualEffectViews in iOS 8 & Xamarin

As you have probable seen by now, UIVisualEffectView in iOS 8 gives us an easy way to apply a blur or vibrancy effect to UI elements. While alone this effect is pretty cool, I wanted to see what we could do if we had a bit of fun with it.

Blurred MapView

The concept here is to force the focus on the location you wish the user to be looking. To do this we blur out the entire map but leave a circular transparent section in the centre. To do this we set up our view like this:


private UIVisualEffectView blurView;
private const int CIRCLE_RECT_SIZE = 250;

public override void ViewDidLoad ()
{
   base.ViewDidLoad ();
			
   this.blurView = new UIVisualEffectView (UIBlurEffect.FromStyle (UIBlurEffectStyle.Light));
   this.blurView.Frame = this.View.Frame;
   //Allows the map underneath to be interacted with
   this.blurView.UserInteractionEnabled = false;
   this.View.Add (this.blurView);

   //Create a masking layer to cut out a section of the blur
   var maskLayer = new CAShapeLayer ();
   var maskPath = new CGPath ();
   maskPath.AddRect (this.blurView.Bounds);
   maskPath.AddEllipseInRect (new RectangleF (((this.blurView.Bounds.Width - CIRCLE_RECT_SIZE) / 2),   ((this.blurView.Bounds.Height - CIRCLE_RECT_SIZE) / 2), CIRCLE_RECT_SIZE, CIRCLE_RECT_SIZE));
   maskLayer.Path = maskPath;
   maskLayer.FillRule = CAShapeLayer.FillRuleEvenOdd;
   this.blurView.Layer.Mask = maskLayer;
}

Effect Button

Following on with the circle theme, here is a button which contains a UIEffectView clipped to a circle. This gives it an interesting look different from a usual UIButton.


public CircularEffectButton (PointF location, float size, UIVisualEffect effect, UIColor backgroundColor, string title, UIColor titleColor)
: base(UIButtonType.Custom)
{
   this.Frame = new RectangleF(location, new SizeF(size, size));
   this.effectView = new UIVisualEffectView (effect);
   this.effectView.Frame = new RectangleF(new PointF(0,0), this.Frame.Size);
   
   //Allows for the button to be tappable
   this.effectView.UserInteractionEnabled = false;
   this.Add (this.effectView);
   
   //Set a background color with a small Alpha (gives a hint of color)
   this.BackgroundColor = backgroundColor.ColorWithAlpha(0.2f);
   this.SetTitle (title, UIControlState.Normal);
   
   //Get a color which contrast the background for the title text
   var contrastingColor = this.ContrasingColor (backgroundColor);
   this.SetTitleColor (contrastingColor, UIControlState.Normal);
   this.TitleLabel.AdjustsFontSizeToFitWidth = true;
   this.TitleLabel.TextAlignment = UITextAlignment.Center;
   this.Layer.CornerRadius = size / 2;
   this.Layer.BorderWidth = 1;
   this.Layer.BorderColor = contrastingColor.CGColor;
   this.ClipsToBounds = true;
}

Bringing this all together gives us something like this!



Obviously this amount of dynamic effects takes a significant amount of processing power. Always remember “WITH GREAT POWER THERE MUST ALSO COME–GREAT RESPONSIBILITY!”

Get the sample on GitHub here.

Advertisements

3 thoughts on “Having Fun With UIVisualEffectViews in iOS 8 & Xamarin

      1. That would be pretty awesome. I’m looking to incorporate this concept into a dusty old app of mine, and bring it into 2014 with some iOS 8 fanciness-

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s