Tag Archives: Cocoa

Achieve smaller app downloads by replacing large PNGs with JPEG + mask

I’m using a transparent overlay on top of a fairly common interface element to make it look awesome. I originally did this with a transparent PNG, until I realised the PNG in question for the iPhone 4’s Retina display was truly massive, clocking in at 1 Mb.

Why we don’t have common image format with both transparency and lossy compression is beyond me, but there’s a relatively easy alternative: Using a JPEG and masking it with another JPEG.

Based on Rodney Aiglstorfer’s solution on how to mask an image, I derived a category on UIImage which would apply a mask to an image. The method required a little tweaking to work with JPEG images — the CGImageCreateWithMask function won’t work correctly on source images that don’t have an alpha channel, so one has to create one first, from the original. Jean Regisser figured out the solution which he presents in a comment on the above article, but it needs one more addition: A check on line 37 for kCGImageAlphaNoneSkipLast. Update: Oh, and one more – kCGImageAlphaNoneSkipFirst

So, the complete category for applying a mask to a JPEG image, to achieve the same result as using a PNG but with less download time for your users:

Read More »

Also tagged , , , | Comments closed

Making UIToolbar and UINavigationBar’s background totally transparent

I have an upcoming iPhone application, Cartographer, that is highly stylised and requires high customisation of the interface to achieve a convincing, beautiful vintage look. To make it work, I needed transparent toolbars and navigation bars for my UIViewController-based views.

The solution I came up with for this was to implement a category on UINavigationBar and UIToolbar, and overriding drawRect: with a method that does absolutely nothing. Then I can place my own textures behind the bar, and they’ll be seen, instead of the default bar background. Read More »

Also tagged , , | Comments closed

UIImage, resolution independence and the iPhone 4’s Retina display

iOS4 caters for the high-resolution Retina display that comes with the iPhone 4 by some rather clever abstraction, that moves away from the concept of ‘pixels’, and instead uses ‘points’, which are resolution-independent.

So, when you display an image that’s been prepared for the Retina display, it’s represented with a scale factor of 2, meaning that to your code, it appears to have the same dimensions, but in fact contains twice the information density.

iOS4’s UIImage makes it work by automatically looking for high-res images located alongside the prior ‘standard resolution’ ones — identified by a “@2x” suffix to the filename.

This works great with +[UIImage imageNamed:], but although the API documentation says that other image loading methods will automatically load the @2x versions, they actually don’t. Yeah. Apple are working on it.

Until they sort themselves out, I’m using a convenience method sitting inside a UIImage category. So, where I would previously use something like [UIImage imageWithContentsOfFile:], I now use [UIImage imageWithContentsOfResolutionIndependentFile:].

Read More »

Also tagged , | Comments closed

Links for February 25th through May 29th

Links for February 25th through May 29th:

Also tagged , , , , , , | Comments closed

The Making of Talkie: Multi-interface broadcasting and multicast

Part 2

TalkieTalkie is my newest product, a Walkie Talkie for iPhone and Mac.

In Part 1 of this series, I wrote about basic broadcasting. This works fine with one network device, but it’s worth discussing how to send through all devices, so you can communicate with others connected via, say, Ethernet and WiFi simultaneously.

So, in Part 2 I’ll write about the approach I took in Talkie for broadcasting from all network devices (a.k.a. network interfaces), so that one can communicate with others connected via WiFi, Ethernet (on a Mac), and any other network devices simultaneously.

Read More »

Also tagged , , , , , , , , , | Comments closed

Browsing Core Data databases using F-Script

F-Script, the Cocoa-based scripting environment, now provides some great tools for exploring Core Data databases.

I couldn’t figure out how to easily open up my databases, other than manually creating a managed object model, then a persistent store coordinator, then a managed object context on the console. I couldn’t find any existing tools, and I wanted a quick workflow for opening up my databases, so I put together a script that prompts for the application bundle or .xcdatamodel(d) data model file, then prompts for the XML (.xml), binary (.binary) or SQLite (.sql or anything else) database file, and opens up the inspector.

I wrote it as an Applescript that just calls upon F-Script to evaluate the script, and saved it in an application bundle so I can pull it up quickly.

Here it is:

Core Data


It just needs the F-Script app to be available.

Upon opening, the managed object context is available on the console as “context“. So, aside from using F-Script’s object browser, you can also do things like:

> request := (NSFetchRequest alloc) init
> request setEntity:(NSEntityDescription entityForName:'MyEntity' inManagedObjectContext:context)
> request setPredicate:(NSPredicate predicateWithFormat:'type = 3')
> result := context executeFetchRequest:request error:nil
> result
_PFArray {<nsmanagedobject: 0x2006cf740> (entity: MyEntity; id: 0x20064c9e0 <x -coredata://BAC82A67-CC41-48C2-8A96-693B67A501D6/MyEntity/p1> ; data: <fault>), 
<nsmanagedobject: 0x2006bdc80> (entity: MyEntity; id: 0x20064c9c0 <x -coredata://BAC82A67-CC41-48C2-8A96-693B67A501D6/MyEntity/p2> ; data: <fault>), 
<nsmanagedobject: 0x2006bc680> (entity: MyEntity; id: 0x200651180 <x -coredata://BAC82A67-CC41-48C2-8A96-693B67A501D6/MyEntity/p3> ; data: <fault>)

Update: Now has better error reporting, and the option to load classes from a bundle.

For those interested, here’s the original F-Script: Read More »

Also tagged , , , | Comments closed

Easy rounded corners on UITableViewCell image view

Here’s a relatively easy way to achieve rounded corners on the standard image view in a UITableViewCell:

cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 5.0;

Set this up when you create the cell (make sure you #import <QuartzCore/QuartzCore.h> at the top, of course). It would appear the UIImageView control creates sublayers to display the actual image content, which is why we use the masksToBounds property to then clip any sublayers.

I noticed a lot of people are seeking answers to the silly behaviour of UITableView with the grouped (UITableViewStyleGrouped) style and images:

Images not clipped to rounded cell border

Images don’t get clipped to the rounded cell border, which looks nasty. This technique is one way to remedy that:

Rounded borders now stay within rounded cell edge

One caveat – due to the inexplicable way the image view within the table view cell scales image content, there’s not really a simple, sensible way to provide an inset margin from the table view cell boundary to complement this rounded border effect.

I tried setting the frame property of the UIImageView itself (cell.imageView.frame), as well as setting the frame of the image view’s layer. I also tried applying a scale transform to the layer, with strangely inconsistent results: Setting scale to, say, 50%, made the image view 40x40px, only a pixel or two smaller than the full size. This may be because another entity (the table view cell?) performs scaling of the content, instead of the actual image view; given that my original image was 80×80, a 50% scale would result in 40×40.

My solution was to steer clear of that nonsense and just provide appropriately scaled images straight to the image view. Here’s a simple category on UIImage to scale an image:

@interface UIImage (TPAdditions)
- (UIImage*)imageScaledToSize:(CGSize)size;
@implementation UIImage (TPAdditions)
- (UIImage*)imageScaledToSize:(CGSize)size {
    [self drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    return image;

So, then I just do something like this in the UITableView data provider:

UIImage *image = account.image;
if ( image ) {
   cell.image = [image imageScaledToSize:CGSizeMake(38, 38)];



Also tagged , | Comments closed

The Making of Talkie: Broadcasting

Part 1

TalkieTalkie is my newest product, the result of a collaboration with a good designer friend, Tim Churchward, who did the user interface.

Talkie is a little different from many of the other walkie talkie applications on the App Store (aside from the fact that much of it was written by me from our motorhome in Tunisia!), and I thought I’d write a little about some of the tech underpinning the app, and some of the choices we made. Along the way it may get a little tutorial-esque.

  • This first part will introduce our initial motivations, and will talk about basic broadcast communications — the broadcast communications part may be very familiar to some, in which case it may be worth skipping to the next instalment.
  • In the second part, I’ll continue the theme of networking, and will talk about what I ended up with for Talkie’s network code after addressing a couple of things, including switching to multicast.
  • Finally, I’ll talk audio, dual platform development, and anything else I think of along the way (Actually, I’m aching to talk about one particular upcoming feature that had me jumping up and down when I first thought of it, but for now, mum’s the word on that one.) Read More »
Also tagged , , , , , , , , | Comments closed