The release of Apple iOS 7 sneaked up on me. For some reason I thought it would be in the middle of October. Then last week the new iPhones were released and iOS 7 was here. As an Apple developer I had been getting emails warning me that it was coming, and telling me to update my apps for the new and improved mobile operating system. I kind of blew these notices off. Upgrading from iOS 5 to 6 had been pretty much a non-event. My EP Mobile app ran on iOS 6 without any modifications. But iOS 7 was supposed to be a bigger change. No more 3D effects. Borderless buttons. No more skeuomorphism (look it up). Even so, I doubted there would be much more to do than generate some new icons and screenshots. So, I upgraded to Xcode 5, downloaded the iOS 7 SDK, and compiled and ran EP Mobile.
And discovered to my chargrin that the program was broken under iOS 7. User elements were in the wrong place; for example, text edit controls were hidden under the navigation bar and unreachable, images were off center, text was truncated — in short, most of the program was unusable. I was surprised. With every Android update from version 2.2 to 4.3 there were changes in the appearance of user interface elements, but my layouts were always preserved. But now here was Apple willfully breaking my nicely formatted layouts that looked fine in iOS 6. I had to fix this, and fix it fast.
At first I was confused about how I could fix this and still support iOS 6. I quickly came to the conclusion that it was time to say goodbye to iOS 6. There is no easy way to support both versions simultaneously. The saving grace though is that Apple will allow you to still download the last iOS 6 version of your program if you don’t have iOS 7. Knowing this, I set my target to iOS 7 and never looked back.
To fix the positioning of my controls, I turned on AutoLayout, which is supposed to help preserve layout appearances between the 3.5 and 4 inch iPhone models, and when the screen is rotated from portrait to landscape mode. I had not used AutoLayout before, even though it was available on iOS 6, because I had tried to have code that also ran on iOS 5 which did not support AutoLayout. With AutoLayout you can place so-called constraints on your controls, e.g. that the top of a control needs to maintain a fixed distance from the top of the layout regardless of the size iPhone or configuration. The problem is when you position controls using Interface Builder, the program automatically starts adding constraints, so that when you add your own, the constraints start conflicting and giving warning messages. Usually it is necessary to clear all the constraints and start over. But with enough patience (more than I have) it is possible to get the layouts and constraints right. I had an irritating problem getting lists in tab bar controllers to look right (only the first list would be lined up right), but by trial and error I found that unchecking the “extend edges” options in the TabBarViewController fixed this. Research on StackOverflow indicated that most of the user interface element malpositioning was due to a bug in iOS 6 that added 20 px to the positions of elements. iOS 7 kindly fixed this (thanks alot!), resulting in user elements moving 20 px to the top of the layout, often burying them under the top toolbar.
It took two days to fix everything. I still couldn’t get elements to center properly upon rotation, so I disabled it when it wasn’t appropriate. I had done this too with the iOS 6 version, but a bug in the autorotation functions in iOS 6 would allow some view to rotate even when explicitly prohibited from doing so, resulting in ugly, useless, rotated layouts. Happily this is one thing that was fixed in version 7: Autorotation works as expected.
So, I made the new 120×120 icons, new launchimages and new screenshots, and sent the whole shebang off to One Infinity Drive in Cupertino, California for the Applites to inspect and hopefully approve in the next day or so. So if you are worried about your broken EP Mobile on iOS 7, relief should be on the way soon.
What do I think of the new appearance? Probably a little too stripped down. Even in Android, which could be considered a model for the iOS 7 design, buttons look like buttons, with borders. In iOS 7, there is no border, just a word floating in space. It is not obvious that it is a button to press. I’m sure there are ways to make it look prettier, but my main concern was getting a working version out ASAP, before outraged EP Mobile users who spent 99 cents of their hard-earned money come beating down my door, demanding blood.
