Animating Interfaces with Core Animation: Part 1

One of the greatest things about the iOS platform and applications people see on it is its beauty. Smooth gradients, consistent transitions, and animations that illustrate the transition of UI elements from one state to another. Animations are more than flashy eye-candy; they tell the user what’s happening. If an element is being deleted, instead of it simply disappearing it fades or slides out of view. Unlike traditional desktop or web applications where a “2 items deleted” statusbar message is necessary, these animations are in many cases enough.

Knowing where to start with animations can be a problem for developers though, because there’s many different steps involved. Instead of walking you through it fully here in the blog, I highly recommend you watch the WWDC 2010 videos on the topic. I truly mean it; anything I do here will simply be a rehash of that material, and I don’t see the point in reproducing perfectly good documentation unnecessarily.

  • WWDC 2010 Session 123 – Building Animation Driven Interfaces
  • WWDC 2010 Session 424 – Core Animation in Practice, Part 1
  • WWDC 2010 Session 425 – Core Animation in Practice, Part 2

Read on to see more

Read More »Animating Interfaces with Core Animation: Part 1

iOS Development Link Roundup: Part 1

I’ve often been asked by people about where to start with iOS programming, whether they be co-workers, colleagues in the same line of work at other companies, or even total strangers who happen to see me happily working away on my personal projects in Xcode. Some rather naïve people assume that I learned from a book, still others even think I took a class to learn all of this! I can say definitively that it’s in my opinion that to be a great iOS developer, you just need to write apps, and lots of them. Experiment, try different things out, and more importantly, buy a few really good iPad and iPhone apps so you can see for yourself the design patterns that make good apps, and those that make poor apps.

More than that however is knowing how to implement tiny techniques. It’s the tips to get you started on animations or laying out UITableViewControllers, or perhaps how to do that tiny bit of custom drawing you need. It’s also the libraries and 3rd-party modules that fill in the gaps in Apple’s SDK, such as handy progress indicator alert classes, or easy-to-use async HTTP libraries. Knowing a few key points can take you a long way toward building your first few apps, and in the process you’ll learn more than if you were to take a class.

I usually keep my bookmarks organized using Delicious.com, being one of their early adopters (back when their domain was del.icio.us). Check my iPhone tag on Delicious to see my full list of links that I found bookmark-worthy. For a more decisive list that isn’t sorted chronologically, here’s my breakdown of some of the better sites to find information on iOS mobile development.Read More »iOS Development Link Roundup: Part 1

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

Rendering views using CALayer, Part 1

For myDrumPad the main pad buttons are images. I create a UIButton object, and use setBackgroundImage:forState: to customize which image will be used for each state (UIControlStateNormal and UIControlStateHighlighted mainly).  I customize the title label font, shadow and color, and voilà I have a pad button that simulates the look and feel of  a Korg padKONTROL. There’s just a few small problems with it.

  1. The images on the iPad are fairly large, and memory is at a premium.
  2. The size of these buttons can change in portrait vs. landscape. It’s time-consuming to export different versions from Photoshop for the different orientations.
  3. The buttons are sized differently depending on the size of the button grid (e.g. a 3×3 grid of buttons have larger images than 4×4 or 5×5 grids). If I resize these images on-the-fly, then the edges look blurred and aren’t well-defined.
  4. The retina display complicates all of this, meaning I have to have two versions of each image.
  5. I want to be able to customize the buttons to have different colors when you’re on different drum sets.

Because of that long list, simply using an image isn’t good enough. But instead of drawing my images using regular Core Graphics drawing routines, I’m going to use Core Animation Layers, or CALayers, to accomplish the same thing. Ultimately I want my buttons to be able to be animated, to change color, and to feel more “alive” than a static image could accomplish.Read More »Rendering views using CALayer, Part 1

Localizing iOS apps using ICanLocalize.com

As with most things, the amount of work we as developers see when starting an iOS application is just the tip of the iceberg. There’s artwork, “About” screens, tutorial pages, icons, the app’s website, and all the marketing the app needs to get it out there. Even writing the app’s description or taking screenshots for the App Store is a time-consuming process. So anything I can do to cut down on the time needed to release my app, the better I am. Therefore when I decided to have myDrumPad translated to other languages to widen my user-base, I wanted to do make it as painless as possible.

I tried tried to have friends and family who understood foreign languages help with translations, and while they were very well intentioned it really didn’t work out in the end.  What I discovered was that there really is no substitute for hiring a trained professional.  But luckily it doesn’t have to be outrageously expensive. Read on for more.

Read More »Localizing iOS apps using ICanLocalize.com

Using Amazon S3 as your iOS app’s server-side

While developing myDrumPad, I came across an interesting problem for my in-app purchase support. The app allows users to download additional packs of sounds (referred to as “sound packs” in the app) that they can use to tap out songs and rhythms. The sound packs themselves were a collection of CAF-encoded uncompressed PCM audio files, with a single configuration file describing the labels and arrangement of the sound files on the drum pad’s grid of buttons.

I wanted to be able to add additional sound packs without issuing a new release of the app, but since the information describing the sound packs is largely static, I didn’t want to have to worry about maintaining a dynamic server for the app to continue functioning. I wanted it to largely be “fire and forget”.

What I came up with is, I think, a best of both worlds. The app functions without needing me to maintain a server, but I can still dynamically add additional resources to the app instantly.  Read on to find out more.

Read More »Using Amazon S3 as your iOS app’s server-side

Showing Apple my app via Facebook

I’ve been working recently on getting more exposure to my existing apps, especially myDrumPad.  It’s a fun app, and I have a few more updates that are in the works when I get a couple of free weekends, but frankly I’d like to see its sales figures climb a bit higher than they are now.  Of course, if you’re an iOS developer, you’ll know the biggest thing that can improve your sales rankings is to be featured on the AppStore.  A large part of getting featured is left up to lucky chance, but to improve your odds, one of the things you can do is to target Apple employees with Facebook ads of your application.  Read on to see the results I’ve had so far.

Read More »Showing Apple my app via Facebook