Parallax UITableView header with Auto Layout

I’ve been working on a thing at Shopify, where I implemented a header containing an image that has a parallax effect when scrolling up and expands when scrolling down.

This isn’t exactly a new thing, but I wanted to implement it using Auto Layout and couldn’t find any examples of this. It turns out it’s super simple, so I found some time tonight and created a demo project you can find the code on Github: https://github.com/runmad/ParallaxAutoLayoutDemo

Parallax Auto Layout Demo

To achieve the effect, you simply add the image view inside a container view that gets clipped bounds. Using two NSLayoutContraints, you then set the height of the container view and the height of the image view.

A bit more work is required if you’re working with portrait and landscape images, but the effect is very simple to achieve.

Preventing iTunes Preview glossy app icon

I recently posted a question on Twitter that was left unanswered.

Multiple online searches also left me without a solution, so I decided to test a possible solution with a new update for an app in the App Store and it turns out I found the answer.

The problem I had can be seen with the Facebook app icon on iTunes Preview on the web:

iTunesPreviewBefore

The Facebook app icon on the iTunes Preview on the web shows the app icon with a glossy overlay, a trend that’s pretty much gone with iOS 7 – and I don’t recall the Facebook app icon having a glossy overlay for years either. If you look at the app in the iTunes App Store or on the App Store on your device it does not have a glossy overlay. Furthermore, the rounding of the icon is also different than App Store previews elsewhere (though my glossy-solution won’t solve that issue).

With Xcode 5 I had moved over to using Image Assets which lets you manage all images for app, including icons used in the app for example, as well as app Launch Images and App Icons:

XcodeImageAssets

With Image Assets you can supply various app icon sizes and you do not have to specify them in the app’s .plist and you are also able to specify whether an app icon is pre-rendered (telling Apple not to add a glossy effect for pre-iOS 7 apps). This setting does in fact ensure that you app icon won’t be rendered with a glossy icon on the App Store in iTunes and on devices, but it does not ensure that your app icon won’t have it on iTunes Preview on the web!

In order to get rid of the glossy effect on your app icon, you will have to re-add the

UIPrerenderedIcon

flag in your app’s .plist and set it to TRUE<. In Xcode this is converted to

Icon already includes gloss effects

and should be set to YES:

XcodePlistFlag

Once you add this flag to your app’s .plist the app icon in iTunes Preview on the web will new render without a glossy overlay! Tada!

iTunesPreviewAfter

RMSwipeTableViewCell – cell subclass with swipe functionality

RMSwipeTableViewCell is a drop-in UITableViewCell subclass that supports pan gestures as seen in apps such as Clear, Mailbox, Sparrow and many more. It includes a number of delegate callbacks to help you integrate it into any project as well as a number of properties for look and feel customization. Here’s a video where you can see it in action.

RMSwipeTableViewCell Screenshot

RMSwipeTableViewCell was part of an app I am working on but the feature never made it into the final release, so I decided to improve the class and extend it with additional functionality that will allow it to more easily be integrated into other projects.

RMSwipeTableViewCell is available on Github and includes a demo project: https://github.com/runmad/RMSwipeTableViewCell

App Store screenshots and the status bar

Two developers I follow on Twitter have asked pretty much the same question in recent memory: “Should I leave the status bar in iOS App Store screenshots or crop them out?” (link, link).

Crop out the status bar.

I replied to both on Twitter, but thought I’d write up a short post on it. A few people replied to the above tweets saying you should leave the status bar in the screenshots but take out the carrier. Someone even said they’d want to know what colour the status bar is for an app. Not sure customers would decide to buy an app based on the colour the the status bar to be honest.

Here’s what Apple says in the iTunes Connect Developer Guide, taken from the section Before you begin: Creating Assets with the Correct Specifications

The first screenshot you upload in iTunes Connect is used as the main screenshot. It is visible on your app product page on both the desktop App Store and the device App Store. For best results, do not include the iPhone or iPad status bar in your screenshots, and follow the requirements given below. Those dimensions allow you to remove the iOS status bar from screenshots so that you can showcase only the active app area, without distractions.

You can refer to Table 7-3 for screenshot dimensions for the various devices, both with and without the status bar.

But again: Crop out the status bar.

Use of status bar styles

On a related note, I strongly suggest going with a black status bar unless a status bar matching the colour of your navigation bar really enhances the UI.

The Keypad view in the Phone app shows a nice use of the default status bar where the top view seamlessly blends into the status bar. I also find that the status bar looks best when matched with the default navigation bar (blue). Other colours often don’t look right.

You can also mix and match throughout your app. The built in Clock app is a great example of this. The status bar compliments the navigation bar and background on the first two tabs, but the last two views are mainly black, so the status bar is black for these two tabs as well.