UI Design

UIMotionEffect: Easily adding depth to your UI

One of the “delightful” features of iOS is the almost imperceptible UI effects they add to give the illusion of depth. One of the most under-appreciated features is UIMotionEffect, which ties the device’s gyroscope to your views to make them adapt to how the user moves their phone.

This can be seen throughout iOS, from your lock screen to your app icons in Springboard (the iOS app launcher). Done right, the user won’t consciously notice these views moving, but it helps set certain views apart from the rest of the app’s UI, helping them “pop” and be more noticeably separate from the rest of the app.

In this post I’ll go over what UIMotionEffects are, how they work, and will share my approach for simplifying how to add motion effects throughout your application.

Read More »UIMotionEffect: Easily adding depth to your UI

Styling your app using custom UIAppearance properties

UIAppearance is analogous to CSS for UIKit, while being compatible with both Interface Builder and traditional styling in code, without sacrificing performance. It’s a way of declaratively assigning UI style values to your views, without needing to manually tweak settings throughout your codebase. This makes it easy to define your app’s visual style centrally, which makes maintenance simpler when changes are necessary.

In this post, I’ll talk about how you can define your own custom UIAppearance properties in your views, allowing you to declaratively style your app giving you more flexibility and reusability.

Read More »Styling your app using custom UIAppearance properties

Fun shadow effects using custom CALayer shadowPaths

Shadowed view using a rectangular shadowPath

I recently had to improve the performance of a few views that utilized CALayer-based shadows on rounded-rect UIView objects. On this particular iPad application, when the device was rotated, the views rotated quite a lot slower than we would have hoped. It wasn’t a show-stopper, but the jerky rotation animation made it look cheap and unpolished. The easiest way to have our cake, and eat it too, was to set a custom CGPath to the layer’s shadowPath property. This told UIKit to set the inside of the path to opaque, reducing the amount of work the rendering engine needed to perform.

// Add background tile
UIImage *bgImage = [UIImage imageNamed:@"embedded_bg.png"];
self.view.backgroundColor = [UIColor colorWithPatternImage:bgImage];

// Add the reference view
UIImage *image = [UIImage imageNamed:@"dccp.jpeg"];
UIImageView *imgView = [[UIImageView alloc] initWithImage:image];
[self.view addSubview:imgView];
imgView.center = self.view.center;

imgView.layer.shadowColor = [UIColor blackColor].CGColor;
imgView.layer.shadowOpacity = 0.7f;
imgView.layer.shadowOffset = CGSizeMake(10.0f, 10.0f);
imgView.layer.shadowRadius = 5.0f;
imgView.layer.masksToBounds = NO;

UIBezierPath *path = [UIBezierPath bezierPathWithRect:imgView.bounds];
imgView.layer.shadowPath = path.CGPath;

The resulting image, as you can see above, has a shadow as you’d expect. But since we’ve declared the shape the path will have, the iPad can drastically improve its rendering performance.

Through that process however, I decided to see what sort of effects I could pull off by passing in a path other than the default rectangular bounds of the layer. Since you can create any sort of path you want, I considered the different effects I could get away with by making non-rectangular paths and using them as shadows.Read More »Fun shadow effects using custom CALayer shadowPaths