Moving from images to paths for superb results in HD displays
The introduction of the new high-resolution displays in iPhone 6 and, especially, the iPhone 6 Plus makes necessary to rethink how graphic elements are displayed within iOS apps.
The 5.5" screen of the iPhone 6 Plus introduces the need to ship the .PNG files at a @3x version, at a price of app bundle size (and apps already weight a lot of Megabytes when downloaded from the App Store) and, as I want to mention today, quality.
In Contactical, I use image assets very cautiously: icons are used where strictly necessary. When displaying the monthly calendar, however, there is the need to use graphic elements such as for the arrows used to move between months or the circles used to provide feedback on the selected day of the month.
When moving to the 1920*1080 screen of the iPhone 6 Plus, however, including @3x version of the circle image did not help: the borders were not smooth enough. (On a note aside, if you want to find out more on the Points and Pixel discussion on the iPhone 6 Plus screen, this is a very good read ).
The approach I took was to replace the images with system-drawn (thus resolution-independent) lines and shapes. Technically speaking, the UIImageViews were replaced by UIViews that contain UIBezierPaths.
The result is right in front of your eyes (going from images - Left- to paths -right-):
Also, this saves space. In this case the advantage was of few Kilobytes, but it could be more for your app.
I could in fact delete these files:
As by gixWorks's philosophy, the improvements were shared on GitHub at the calendar project's page.
I hope this article provides suggestions to people that need to support high-resolution displays, and give a glimpse of the care I took in working on Contactical.