In my previous post, I outlined the core logic behind ShopQuick’s ability to learn from a user’s shopping history to build a sorted shopping list. Today, I’ll add some style to the app and prepare it for submission to the App Store.

Styling – A Coat of Paint
Although it’s just a shopping list app, I wanted ShopQuick’s design to be more fun than utilitarian. “Sure, you’re grocery shopping, but don’t you want to look at a cute cat, too?” That was pretty much the direction I gave to Detroit Labs designer
Mary Beth Snyder to design an icon and color scheme for ShopQuick — that, and, “Don’t make it green.”

You see, it seems like there is an unwritten rule that if you make a shopping app, the icon has to be green. Maybe green is supposed to equate with money and thus make people more willing to spend it? At any rate, ShopQuick was not going to be green.

One great thing about iOS 8 (with Xcode 6 and above) is that it lets a developer use a storyboard for the launch screen. This means that instead of creating launch images for each possible screen size, we can lay out the launch screen using constraints and size classes.

To keep a consistent style throughout the app, I made use of appearance proxies, which let a developer create a style once for a particular component (e.g. navigation bar, tab bar, buttons) without having to set it on every screen. Overusing appearance proxies can lead to confusion when trying to debug the design of an app, but in the case of ShopQuick, proxies are a quick way to apply consistent styles to common parts of the app like navigation bars and tab bars.  Typically, appearance proxies affecting the whole app are set up in the AppDelegate:

Styling the navigation bar is pretty straightforward, but altering the built-in styling of iOS tab bars is a bit more complex. If you want to use custom images, you should set the shadowImage and the backgroundImage on the UITabBar appearance proxy to a blank image. Controlling the font color of the text in a tab is done using the UITabBarItem appearance proxy:

After applying the color palette and kitten icon to the rest of the app, I have the Shopping List and Favorites screens styled with a nice, simple design.

Interestingly enough, when setting the icons for the tab bar, if the icon image size is larger than the recommended 50×50 (75×75 on iPhone 6 Plus), the icons do not shrink automatically. Instead, they overflow the tab bar. I found this out by accident but decided to use it in the app for a slightly more stylish handling of the tab bar.

With the navigation and tab bars styled, I also wanted to make the actions for the Products in the Shopping List and Favorites list match the feel of the rest of the app. Luckily, SWTableViewCell provides a method to set custom images.

Now that the app is looking good, it’s ready for prime time — the App Store. In the final post of this series, I’ll walk through the process of submitting ShopQuick to the App Store.

ShopQuick Part 1                 ShopQuick Part 2                  ShopQuick Part 3                  ShopQuick Part 4
ShopQuick Part 5                 ShopQuick Part 6                 ShopQuick Part 7                   ShopQuick Part 8                   ShopQuick Part 9

Chris Trevarthen is an iOS developer at Detroit Labs. He shares his love of software craftsmanship with conference talks about test-driven development and team dynamics. Chris enjoys running marathons, his beer in a glass and his music on a turntable.