Emulating UIBarButtonItem Appearance

While it’s best to avoid, sometimes it you must duplicate the appearance of UIToolbar items. Unfortunately, UIKit doesn’t appear to provide any means for achieving the etched look that it adds on each item it has control over so, for custom UIBarButtonItems you must do it manually.

In my case, I needed to present some information on the toolbar, but needed it to be non-interactive, have a special layout, and use some existing vector images. To that end, here are some category methods that made it straight forward: https://gist.github.com/2465637.

Given that, etching can be had with a few lines. It’s not efficient, but it is easy.

[[[[UIImage ct_imageWithPDFNamed:@"time" size:CGSizeMake(26, 26)]
  ct_imageWithOverlayColor:[UIColor colorWithRed:112/255. green:119/255. blue:123/255. alpha:1]]
  ct_imageWithInnerShadowOffset:CGSizeMake(0, 1) color:[UIColor colorWithWhite:0 alpha:.6]]
  ct_imageWithShadowOffset:CGSizeMake(0, 1) blur:0 color:[UIColor colorWithWhite:1 alpha:.6]]

I Shipped a Thing

Late last week a little app of mine made its way onto the App Store. So congratulations to me! but, uh, a minesweeper clone? that would not be very original. Nope, it’s not very original, but it is better†.

It is my weak protest against the garish implementations that litter the App Store. It’s not something I’d plan to profit from (game development has always seemed to be an inevitably feral existence), but an argument for quality in the App Store, where barring a few exceptions it can seem like there is so little.

…It was also fun to do.

† How many times have I heard that said before?

Quick and Dirty High-DPI Images

While working on this page, I discovered just how awful the web can look on the the the iPhone and iPad with their “retina” screens. In native applications, normal resolution images are scaled without anti-aliasing, but in Mobile Safari images are scaled with anti-aliasing, and as a consequence, many important pixels can get badly blurred.

This isn’t an unrecognized problem and it has been solved elsewhere, but the accepted approach seems require JavaScript and class names, which strikes me as unnecessary – CSS declarations alone should suffice.

To that end, the approach I use is this:

@media only screen and -webkit-min-device-pixel-ratio:2 {
  img[src="images/icon.png"] {
    content: url("images/icon@2x.png");
  img[src="images/store_small.png"] {
    content: url("images/store_small@2x.png");
  img[src="images/screen_fail.png"] {
    content: url("images/screen_fail@2x.png");
  img[src="images/screen_play.png"] {
    content: url("images/screen_play@2x.png");

*I swear I read about content negotiation for this at some point, but all I can find is an old, unresolved discussion at webkit.org.