Manbolo Blog

Manbolo Team Blog, creators of MeonArchives

Digging Through iOS Graphical Resources

Sometimes you want to use the exact same graphical resources of the embedded Apple apps. For instance, let’s say you want reproduce the garbage button animation in the Photo app:
Garbage animation
Yes the animation’s frame rate is not good but, but did you know that GIFs in browser supports a minimum FPS?

Or you want to use the same iBooks’ ’cream’ popovers:
Winnie the Pooh

Fortunately, there is an app for that, and it’s free and Open Source. UIKit-Artwork-Extractor on GitHub by Cédric Luthi extracts all the image artworks and emojis contained in UIKit. Get the source code, select a Simulator platform, build and run the app: that’s done. Note: you can try to run it on a device, but the app seems to crash because of the too large memory consumption.

Once launched, you will see this screen:

UIKit extractor

When you save the output, a folder on your desktop will be created (e.g. ~/Desktop/iPhone Simulator 6.0 artwork) that contains all the Simulator resources, organized by framework.

For instance, you will find all the garbage animation’s frames under ~/Desktop/iPhone Simulator 6.0 artwork/Shared artwork: UIButtonBarGarbageOpen0.png to UIButtonBarGarbage15.png and UIButtonBarGarbageClose0.png to UIButtonBarGarbageClose16.png.

The animated gear in the Settings apps, when installing a new OS update can be found under ~/Desktop/iPhone Simulator 6.0 artwork/Preferences app: GearAnimation0.png to GearAnimation35.png.

Gear animation

The ’cream’ iBooks’ UIPopover components are located under ~/Desktop/iPhone Simulator 6.0 artwork/Shared artwork: UIPopoverViewCreamBackgroundArrow*.png

UIPopoverViewCreamBackgroundArrowDownUIPopoverViewCreamBackgroundArrowDownRightUIPopoverViewCreamBackgroundArrowSideUIPopoverViewCreamBackgroundArrowSideBottomUIPopoverViewCreamBackgroundArrowSideTopUIPopoverViewCreamBackgroundArrowUpUIPopoverViewCreamBackgroundArrowUpRight

The beautiful and textured Map’s signs background are under ~/Desktop/iPhone Simulator 6.0 artwork/MapsLockScreen lockbundle

Map signs background

There are a lot of developers that prefer to code using only Core Graphics and no png at all, but if you look at Apple’s bundles, you will see that a lot of the UIKit components are png’s based. I prefer to use png instead of coding because:

Little gems

Finally, digging through UIKit will show you beautiful, unknown (by me et least!) and sometimes unused Apple images:

Newstand Magazine

Newstand Newspaper

Have you ever seen this clumsy animated splash screen when you boot your iPhone? However, it’s here!

Apple Logo

From jc.

All Posts