iOS developers deeply know the huge value of working with a good graphic designer. Providing assets with the correct size, for all needed states, for any type of device, with good naming conventions etc. are things that you probably appreciate a lot and make the whole development process faster and efficient. Therefore, it is also the developer responsibility to provide tools to increase the development process and make the UI customization more agile and easy to the designer. For this reason, in this post we are introducing some ideas that will decrease the amount of graphic assets you need, add flexibility to change colors and much more.

Resizable Plain-Color Images

iOS7 introduced new design guidelines that include plain-color style and flat design. This is a huge simplification of each graphic asset: no shadows, single colors, no deepness-effect, etc. Consequently, in order to customize the UINavigationBar, UIButton, backgrounds of your views, etc. we could create resizable images of plain-color (or even gradients) dynamically. This means we can define colors programmatically and change them whenever we want. To achieve this, an option is to create a category on UIImage that would provide tools for this purpose:

Therefore, some examples of usage:

Having this tool, the graphic designer won’t have to provide anymore plain-color background images and we will have more flexibility to customize our UI objects.

Tinting images

Another typical case is when we have a graphic asset that needs multiple versions of it for the different states (typically UIControl states as default, highlighted, selected, disabled, etc.). Usually, the graphic designer must provide one asset per each state of the image. This implies that if some design guidelines change in the app you are working, those images for each state will have to be updated (for example: if the color that represents “highlighted” state changes). A solution for this problem is to dynamically tint images. This is much simpler for everyone: the designer will only provide one image and the application in run time will “tint” the image to a custom color for each needed state. Also, by using this approach, because colors are defined programmatically, we can change them without any extra work. iOS 7 introduced tools for tinting images that are rendered inside a UIImageView:

However, it might be more useful (also for previous versions of iOS) to use a custom method on UIImage:

Therefore, this category would be used as it follows:

More information about how to implement this category will be found at the end of the post.

Composing images

Finally, lets take a look on making compositions of different images on the fly. This would be useful to create versions of images that are already in our bundle. For example, a blue tinted image X and a red tinted image Y over a green background with corner radius. This way, only by reusing already existing assets we could be able to create a completely new set of images to customize our UI. A simple category on UIImage as it follows would do the job:

For example, we could create a composite image like this:

Benefits of dynamic image creation

Less graphic assets Because we are creating on the fly images to customize our UI, we will need less graphic assets, making our application weight lighter and removing work from the graphic designer. Flexibility When we do things programmatically things become flexible. Because we are defining colors and images programmatically, we will be able to change the whole UI appearance by just manipulating a few lines of code. We won’t have to update graphic assets and replace them for new ones anymore. Testing the UI is now easy Because our UI is now flexible, we can test how the UI looks if we change the colour palette. And we can test it as much as we want. Fast development Because we are removing dependencies from our graphic design team, the project development will be faster and more efficient.

Check it out!

In Mobile Jazz we like to use this approach for all above reasons. Our team has developed a UIImage category that helps us to achieve it. You will find it in: GitHub: https://github.com/vilanovi/UIImage-Additions CocoaPods: Pod 'UIImage+Additions', '~>1.0.0' Also, we use to combine it with an extension on UIColor, that adds HEX support and other tools to manipulate colors. GitHub: https://github.com/vilanovi/UIColor-Additions CocoaPods: Pod 'UIColor+Additions', '~>1.0.0'

Avatar

Mobile Jazz

One Step Ahead. We want to be at the top of what’s happening in technology, digital marketing and design. We continuously educate ourselves, and experiment with the latest trends to stay ahead of everyone else. That’s why we’re able to give you a competitive advantage in the market. On top of that, our way of working is quite unique in the industry. We're one step ahead.