Many iPhone app designers and developers have little knowledge about the standard UI elements sizes and techniques to detect them. In due course, I have placed this post to acknowledge them about the industry specifications and practices.

However, Apple claims that it has standardized OS and devices by compelling iOS users to use its own mobile devices like iPhone and iPad. It seems good that only one company is producing both OS and its supporting devices so developers have good time to go speedy.

Unfortunately, the life of an iPhone developer is not easy, as each version of iPhone comes with new size and resolution. Thus, beating fragmentations at micro-level becomes an art in itself for a successful iPhone app development.

However, during iPhone development, we need to deal with plenty of things in coding, but UI elements matters more because they are ultimate tools for UX designing and Usability craft. Therefore, I would like to address them first in this post.

Concept of Graphics in iPhone Development

Fundamentally, UI elements are graphics (vector/raster) so all iPhone developers should have knowledge that how they are drawn in iOS system and how they placed before knowing their standard sizes across the various devices.

Logical Coordinates

In order to draw and place any I graphic element, we need some sort of coordination system in place. Fortunately, Apple has adopted logical coordination system that is device agnostic. In logical coordination, there are three coordination system lies within each other. At bottom drawing coordination or user coordination system that begins from the center of the UI element. The next one is view coordinates that place user coordinates in terms of X and Y values through CTM (Current Transformation Matrix). Finally, hardware scaling occurs and place view coordinates in to hardware coordinates

Paths to Create Graphics

During iPhone development, we have two primary options to make high quality graphics, one is OpenGL and another is Native Rendering system. Since, majority or iPhone programmers are using native rendering I shall restrict up to that only here. There are various native rendering options such as Quartz, Core Animation, Core Graphics, and UIKit used the most.

Among these, UIKit uses LLO (lower-left-coordinate) system and Core Graphics uses ULO (upper-left-coordinate) system.

Points Not Pixels

Just think that if we use pixels to locate the UI elements, we need to have altogether different placements in retina screens and non-retina screens due to dense pixels on the same size of screens. Therefore, counting coordinates in a universal point system makes sense. This also clarify that why we use “@2x” tag in code for retina images and make them double size image, but use same coordinate values in points for both retina and non-retina images.

Standard Sizes of UI Elements and UI Layouts

 I have depicted that how iPhone 4S and earlier versions have different size of UI elements and screen layout from the iPhone 5 and later versions. For instance window of iPhone 4S, has 320 X 480 pts., while iPhone 5 has 320 X 568 pts.

Same the way, height of view inside a navigation bar for iPhone 4S is 416 pts., whereas for iPhone 5, it is 504 pts. Height of view inside a tab bar is 411 pts., for iPhone 4S and 499 pts., for iPhone 5.

About Author

Mehul Rajput CEO - CO - Founder at mindinventory technologies - a leading Mobile App Development Company in India.