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.

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

Making Rounded Rectangles Look Great (with CSS)

Go directly to the project demo page.

Mike Rundle of flyosity.com recently posted an article, Making Rounded Rectangles Look Great, on designing rounded rectangles, some design techniques, etc. I recommend you to check out the post and download the PSDs for great inspiration!

I’ve recently worked extensively with re-engineering and re-designing the UX and UI for an online retailer, which involved a lot of paper, Photoshop and CSS (or Sass).

I thought it would be cool to create the buttons from Mike Rundle’s article in pure CSS, so I went ahead and did it. Before checking out the CSS buttons, be sure to check out Mike Rundle’s examples and PSDs for a comparison.

I tried as much as possible to stick with the same colours and transparencies as Mike Rundle’s examples, although there may be slight differences, depending your display and browser.

I’ve also added :hover and :active states to all the buttons, so they’re a bit more exciting. Unfortunately CSS doesn’t provide a simple way to create a masked gradient at an angle, so the Convex example is probably the least similar one. But it still looks great and I wanted to stick with all CSS – could have been achieved with an image mask or simple overlay.

You can check out the result on a separate page. Feel free to grab this .zip containing all the project files: Rectangles.zip.

ColorKit: A Color Assessment Utility App

For this week’s #idevblogaday post, I’ve written a small utility app that’s freely available for download on github.

ColorKit is a tiny iOS app (iPhone) which allows for quick and easy color-sampling for a UINavigationBar + UIToolBar. It allows developer to easily assess the appearance of tintColor on the device.

Last week, I talked about adding textures and depth in your app, in particular to a UINavigationBar. While this effect is great when used appropriately, UINavigationBar’s tintColor property is extremely handy and useful to give your app a unique look with one line of code.

Finding the right colour for your app can be a bit of a hassle, especially due to differences in colour appearance depending on which monitor or device you’re using. Furthermore, UINavigationBar and UIToolbar are coloured with a gradient and has a glossy shine, so knowing exactly which RGB value to use is often impossible.

ColorKit builds and runs right on your iPhone and makes it extremely easy to quickly play around with various RGB settings to find the perfect colour for your app.

Inside the app is a UIImageView which allows you to add a screenshot from your app to better see how the colours may look with your UI.

You can download a copy of the code here: https://github.com/runmad/ColorKit

Pro-tip: Do not use bright colours. Play around with the values to create more “faded” colour. Brighter colour wash out the title text and generally look horrible.