I’m happy to announce that the latest ebook from my popular iOS Apprentice series is now available. 
In this tutorial you’ll build StoreSearch, an app that lets you search the iTunes store for songs, movies, books and software. You’ll learn about making your mobile apps talk to web services, iPad programming, internationalization… and lots more!
You can get the iOS Apprentice at the Ray Wenderlich store.
When you distribute images with your app you usually pick the PNG or JPEG format. The advantage of JPEG is that it often compresses better — especially for photos — but unlike PNG it unfortunately does not support transparency.
The transparency in a PNG file comes from the so-called “alpha channel”. For every pixel not only red, green and blue values are stored but also an “alpha” value that determines how transparent that pixel is. A value of 255 means this pixel is fully opaque, 0 is fully transparent, and anything in between will mix the pixel’s RGB values with the underlying color.
This is probably an old trick, but by saving a JPEG image not as one but as two image files you can still have transparent images. The first image is the regular JPEG with as much compression as you can get away with, the second image is the alpha channel. This is a grayscale image with black representing fully transparent, white fully opaque, and gray everything in between.
We can combine these two images at runtime to make the image transparent again. Because of the JPEG compression we lose a little bit of clarity but if you tweak the compression settings you can usually get away with it.
I wrote a simple category on UIImage that lets you do this.
1) Export your image from Photoshop as a PNG with transparency.
2) Export the image again as a JPEG, using suitable compression settings. The background should have a solid color, typically white or black but any color will do.
3) Save the alpha channel to a separate JPEG or PNG image. I couldn’t find an easy way to do this from Photoshop, but the ImageMagick tool can do it without problems.
If you have ImageMagick installed, open a Terminal and go to the folder that contains the exported PNG image. Then type:
convert -alpha Extract -type optimize -strip -quality 60 +dither \
Source.png Alpha.jpg
This extracts the alpha channel from the PNG image and saves it as a JPEG file. You can tweak the level of compression with the -quality parameter. If you specify “Alpha.png” instead of “Alpha.jpg”, ImageMagick saves the alpha channel as a grayscale PNG-8 file. You should use whichever one makes the smallest file size.
1) Add the two JPEG images (the non-transparent source image and the alpha channel) to the app.
2) At some point, call the mh_combineWithAlphaImage:backgroundColor: method to combine these two images into a new, transparent, image.
3) Depending on your app you may want to do this only once and then store the transparent image as a PNG in your app’s Caches folder.
That’s it, quite easy.
The alpha image does not have to be a JPEG, it can also be a PNG file. If it is a JPEG then it can have different quality/compression settings from the main image.
The current implementation works well but is not as fast as it could be. It also uses more memory than is strictly necessary. I might rewrite this at some point to use the Accelerate framework or Core Image.
Not all images compress better as JPEG. You should use JPEG only where it makes sense.
Check out the source code at Github.
Bird image by Sias van Schalkwyk
Recently I was working on an app that required brightly tinted tool bars and navigation bars:
As you can see, the light blue color makes the bar button hard to see and its label hard to read. Changing the background color of the button is really easy on iOS 5 because its UIBarButtonItem also has a .tintColor property. But if you still need to support iOS 4 then you’re out of luck.
In that case, the only solution is to put a UIButton inside the UIBarButtonItem and give it a background image that looks like a regular bar button. It’s a roundabout way of doing things but it works.
Previously, I would draw these bar button-lookalike images myself in Photoshop. By setting the appropriate layer styles on a rounded rectangle vector object you can make a decent approximation of what a real bar button item looks like.
This time, however, I wanted to take advantage of the actual images that UIKit itself uses to compose the UIBarButtonItem when you change the tintColor of the underlying toolbar or navigation bar.
To pull this off, you can download UIKit Artwork Extractor. Compile the app and run it on the Simulator (or on your device). It will extract all the images that are built into the various iPhone and iPad frameworks and save them to a folder on your computer.
After you have extracted the images, go into the “Shared” subfolder and look for:
You can combine these three images with a fill color to produce a tinted UIBarButtonItem background image, like this:
The actual layers pane should look like this:
The “Fill color” layer is simply a rectangle filled with the tint color that you want the button to have. As you can see, both the fill layer and the “shadow” layer are clipped against the red “mask” layer. If you don’t do that, the button won’t have a transparent background in the corners.
To export the image, merge all the visible layers (but not the background!) and save the image as PNG. This gives you a 11×30 pixels stretchable image.
You can use the following category to create the fake bar button items in your code. It requires that the image named “BarButton.png” is added to your project.
@implementation UIBarButtonItem (FakeButtons) - (id)initWithTitle:(NSString *)title width:(CGFloat)width target:(id)target action:(SEL)action { UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setTitle:title forState:UIControlStateNormal]; [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside]; button.titleLabel.font = [UIFont boldSystemFontOfSize:12]; button.titleLabel.shadowColor = [UIColor colorWithWhite:0 alpha:0.5]; button.titleLabel.shadowOffset = CGSizeMake(0, -1); button.frame = CGRectMake(0, 0, width, 30); UIImage *image = [[UIImage imageNamed:@"BarButton"] stretchableImageWithLeftCapWidth:5 topCapHeight:0]; [button setBackgroundImage:image forState:UIControlStateNormal]; return (self = [self initWithCustomView:button]); } @end |
In the “Shared” folder you will also find images for the UINavigationController back button (named UITintedBackButtonXXX.png), but be advised that bar button items with a custom view won’t work on UINavigationItem’s backBarButtonItem property. You’ll have to put your custom back button on leftBarButtonItem instead.
Tip: If you also want to have Retina-sized images, run Artwork Extractor on a Retina device or on the Simulator in Retina mode. It’s very enlightening to look through the rest of the extracted artwork as well.
Now that iOS 5 is out and the NDA has been lifted, we can finally talk in public about all the new features in the SDK. And there is a lot to talk about!
Together with the other members of the RayWenderlich.com Tutorial Team I’ve been hard at work these past weeks putting together an ebook that goes in-depth on many of the new technologies in iOS 5.
I contributed four chapters on Automatic Reference Counting (ARC) and Storyboards, and the book is packed with other cool stuff as well.
Some of the topics covered: iCloud, OpenGL ES 2.0 with GLKit, Newsstand, UIKit customization, using the new integrated Twitter, Turn Based Gaming with Game Center, Core Image, and much more!
Because we had to rush a bit to get it out in time, the book is currently available as a beta version. It’s already 600 pages and there are many more goodies coming. If you get the book now, you’ll receive the new chapters as they become available.
I’m really excited about this ebook. It’s a goldmine of information and I can’t wait to read it myself! Check it out at www.raywenderlich.com.
Speaking of ebooks, I’m happy to announce that as of today the next two parts of my beginner course The iOS Apprentice are available as well.
This course is a series of epic-length tutorials that take you from zero to writing real apps for the iPhone and iPad. It’s aimed at complete beginners and people who have experience with other languages (PHP, Java, C#) but who are new to the platform.
If you’re confused about what a delegate or a view controller is, or if the strange syntax of Objective-C scares you, then you need to get this ebook!
You can read the first part for free when you sign up for Ray’s Monthly Newsletter at www.raywenderlich.com, so check it out and let me know what you think. If you liked the first part, you’re going to love the rest of The iOS Apprentice.
It’s been a while since I wrote for this blog but I had a good excuse: I’ve been working hard on my first ebook, The iOS Apprentice: iPhone and iPad Programming for Beginners.
I get a fair amount of email from beginning programmers and they usually ask the same questions. They’ve read a book or tutorial about the basics but now they’re stuck. It’s easy enough to create a simple screen with a few buttons, to show a list of items in a table view, to use the photo picker, to download something from the internet… but how do you fit all of that together? These are also the questions I keep seeing on forums and message boards. So I decided to write an ebook with the answers.
This ebook contains five epic-length tutorials, each of which takes you from scratch to a complete, fully-functional iPhone or iPad app, with step-by-step instructions and a ton of illustrations. There’s a big difference between building a simple sample project that focuses just on a single topic, and creating a real app that has many different features — the kind of app that you actually see in the App Store. The iOS Apprentice shows you how to do the latter.
This is what Bull’s Eye looks like, the game from the first chapter:
You can see this game in action for yourself because as of today the first chapter of the ebook is available for free!
If you’re thinking of getting started with iOS development but you have no idea where to start, then get this ebook! No knowledge of programming is assumed, so if you’ve never written a line of code before in your life, you’re in good hands.
It is my aim that by the end of these 5 tutorials you’ll be ready to turn your own ideas into real apps. This isn’t some 20-page fluff ebook, but over 500 pages and more than 500 illustrations of hands-on practical advice.
I’m currently writing the final chapters. I expect the ebook to be done by the time iOS 5.0 comes out (early fall). Of course, the tutorials make good use of the new features from iOS 5 such as Automatic Reference Counting and Storyboards.
If this sounds like something you’d be interested in, then here’s how you can get the entire first chapter for free right now:
Go to www.raywenderlich.com and sign up for Ray’s Monthly Newsletter. Ray has an excellent site with many free iOS development tutorials, and he has agreed to sell The iOS Apprentice from his website, which makes me very happy.
After signing up for his newsletter — which is a very useful resource in its own right! — you’ll receive the download link for the first chapter (23 MB).
Enjoy the free chapter and let me know how you’re getting on! In the mean time, I have a few more pages to write…
Matthijs Hollemans
I am an iPad developer and designer who loves to create awesome software! Other interests: playing jazz piano, healthy and natural living, and barefoot running.