UIPageViewController – Make Your Own iBook

I’ve been wanting to make a picture book for my youngest son Andy, and now I have two.  One is the entire set of 288 words used in the Wordz Lianxi Language Learning seriesof match-the-picture-to-the word apps, developed initially to help me learn Hanzi.  The instructional design included “clues” for recognizing characters that use a different writing system than Indo-European Languages; and specifically was designed to learn Sino-Tibetian languages in general and Chinese characters (aka Hanzi) in particular.  How useful it is as a “game” for English Language Learners (ELL) / TESOL (teaching english to speakers of other languages), or even for Chinese, Japanese and Korean to learn English, German, French, Spanish or Italian, remains to be seen (or assesses or determined by the marketplace). But the apps are out there (see WordzLianxi.com or check the App Store).

Andy is 20 months old, so turning pages and pushing buttons work well for him.  So I now have a “bilingual picture / word book” app that is 56 books in one through the magic of digital presentation. Something that with a physical book would require 56 different copies.  The book shows all 16 word groups in sets of 18, max 4 to a page, with both the readers language (well, any of the 8 above, and defaulting to English otherwise) and in the language the reader is learning (presumably any of the 7 remaining languages).   Of course, with some simple word lists I could add Russian, Portuguese, Hindi, etc. but for now, I have 8: English, Chinese, French, German, Italian, Spanish, Korean and Japanese.

Realizing I had a word and picture for every letter of the alphabet except Q, X and Z, I had Robert Schoolcraft, my illustrator for the WordzLianxi software series (who is in NYC and can be found on eLance here), create pictures for Q (I went with a jackrabbit jumping Quickly), a Xylophone for X and a zipper for Z.  I chose these last two in part as homage to the “A-B-C Letter Game” I published in 1982 (see bottom left for old ad here).  I even got that game running again with the help of an outstanding Basic expert (with both Real Studio and QB64) and Scottish programmer named William Goodall who is Fantastic! He is from Aberdeen in UK and on Guru as Scatersoft.

Those apps are in the app store; I made an iPhone version of the basic Beginners Bilingual Book, but it seems too small to be very useful (two images per page) and have yet to do that for the A-B-C bilingual Picture Book.

Example page from UIPageViewController

Make your own iBook!

In any event the key to making an iBook app for iOS is the “new” (in iOS 5) UIPageViewController.  It is a specialized view controller that does all the hard work for paging in a “iBook”, including creating a really nice “page turn” animation – that even shows the reverse side of the page “through” the paper as you turn! — leading some wags to comment that, with a new patent award, “Apple now owns the ‘page turn'”.

One challenge for new iOS developers it that the sample “template” app, and most examples in iOS books, have trivial or hardwired examples that might be helpful for objective C gurus but don’t easily generalize to a useful book of any length.  So here, at this link, is the complete source code for the working iBook app.

If this is useful, please buy the App and give me a review! (it’s only 99 cents :-))


additonal notes: Special Thanks to Neil Smyth for his fine eBoook  “iPhone iOS 6 Development Essentials – First Edition“; this app is built exactly like the example that is built in Chapter 28 (UIPageViewControllers are explained in chapter 27).   Neil Smyth’s book is available online at http://ebookfrenzy.com/ for $13 USD.

My only addition to this basic app for my A-B-C Picture Book was the set of 26 letter buttons you see on the UI, which I handle just like the next / previous / skip ahead and skip back buttons except a) they do “go to page”; and b) all share a single message, decoded based on the button title — resulting in one additional associated event (or IBAction) in the contentViewController and one more delegate method in the containing UIPageViewController — which in this case is the main App view controller. The “Beginners Bilingual Book” app doesn’t have these buttons and is really nothing more than the Neil Smythe example with the addition of next / previous and skip forward / skip back.

And special thanks for help with the “turn to specific page” solution from Ryan Waggoner.

Link to source code archive is (again):  http://www.newportcoastsoftware.com/ABClgv1.0.zip

Note the code archive is 70MB as it has both retina and non-retina versions of the 26 240×240 images for the book embedded in the archive.  Please feel free to use this code for educational purposes.  Images and code are (C) copyright and remain the property of Newport Coast Software.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s