The path to the IPhone adaptation

Tagged with: iOS iOS device adaptation for iphone iOS development

(1) 1x era

In 2007, the first iphone was released and the screen was 320*480 pixels wide. This resolution remains unchanged until iphone3gs.

At that time, the iOS app was written to support absolute targeting only. For example, a button (x, y, width, height) = (10, 20, 30, 40) means its width is 30 pixels, the height is 40 pixels, and the position is placed (10, 20) pixels.

(2) Retina coming

2010, the IPhone 4 was released, the first to use the retina display, the physical size of the screen is unchanged, the pixel multiplied to reach 640*960 pixels.

We can simply calculate that the IPhone 4 is 640*960 pixels, the diagonal is 1154 pixels, divided by 3.5 inches, should be 330ppi. And the official number is 326ppi. When the pixel is too dense, more than 300ppi, the human eye can not distinguish between each pixel. So the iphone 4 screen is called the retina display. Retina in English, is the meaning of the retina.

In order for the original app to run on the new phone, a new concept point (dot) is introduced. In the iphone 3GS, 1 dots equals 1 pixels; in iphone 4, 1 points equals 2 pixels. The point concept is important in iOS development, not the developer's attention.

Automatically convert pixels as units into dots, so iphone 3GS apps can run on iphone 4 without modification.

After the IPhone 4 (x, y,width, height) = (10, 20, 30, 40), it represents a width of 30 points, a height of 40 points, placed at (10, 20) points in the position.

text, color, and so on are vector data, amplification is not distorted. The original iphone 3GS program, run on the iphone 4, text display is also very clear. And the picture is not the vector data, the development time, in order to make the picture clear, needs to carry on the picture adaptation. You need to prepare two images with the same content, and put them in the same directory.

Example.png//30x 40 pixels

[Email protected]//x 80 pixels

When using Example.png in the program, the corresponding image is automatically selected according to the screen mode. Screen 1x mode, you will choose Example.png, 2x mode will be preferred [email protected]. And there is no adaptation of the old program, [email protected] does not exist, choose Example.png, generate a size of 40 points, 1x mode of the picture, stretched to 60x80 pixels, so it looks more blurry, but they occupy the same number of screen points.

(3) Extended iphone

Apple released iphone 5 in 2012. The width of the iphone 5 remains the same as the iphone 4. Height increased by 568-480 = 88 points.

In iOS development, 44 is a very special number. The iOS Interface Interaction Guide writes that the human finger is a certain size, and it is difficult to click on a region below 44 points. 44 is twice times the 88.

When the original program does not fit the iphone 5, it can also run normally, but the extra 88 points will be automatically divided into the upper and lower parts, so that black edge appears.

So how can you tell the iOS system that the app is already equipped with iphone 5? At this time, Apple thought of the start-up diagram. Each model, such as a program that supports both the iphone and the ipad, requires the launch image to be specified separately for the iphone and ipad. Then the program that supports both iphone 4 and iphone 5 can also be used to solve this.

When the old iphone 4 program runs on iphone 5 above, without the iphone 5 boot image, it uses compatibility mode and leaves black edges up and down. When you specify a new boot image for iphone 5, the system thinks the app is already equipped with the iphone 5, and it doesn't leave a black edge up or down. This time the developer gets to the screen height is 568.

(4) A succession of dynasties

The advent of IOS 7, the personal feel, kinda "old Chowa, chaos" feeling. Jobs died in 2011, and in 2012 was only the extended iphone that made some people even doubt Cook's ability. But Apple's iOS 7 operating system, released in 2013, tells the world that, in fact, last year, Cook was in a big bid.

IOS 7 revolutionized old Joe's insistence on years of materialization and began to enter a new era of flattening.

If the previous adaptation is a software engineer's work, this change so that designers have to stand on the front line. The textured background, the raised button, all have to be flat. It's not just about changing pictures, but even the visual style, the operating habits, and all the redesign.

A more troubling problem is that the status bar on iOS 7 is transparent, and the amount of space available for the program to show is 20 pixels. Cook simply and brutally makes all the programs run under iOS 7, without saying whether you're ready to fit in. For a time, the title at the top of the page overlaps with the status bar, which is the frustration and embarrassment of most applications. This is more indicative of his determination to make the changes, forcing all applications to adapt to iOS 7.

The succession of dynasties is always full of chaos. This is because users who use iOS 7 or less are still a small percentage. Adhering to the design of the intended materialized, on the iOS 7 mobile phone look very out of tune, the design of a flat interface, on the iOS 6 mobile phone feel very strange. Some developers claim that their app has been adapted to iOS 7, some developers are advocating iOS 7 app and compatible with iOS 6, there are some bold new company fits, designed for iOS 7, the low version of the user can not install only despair. Even compatibility method is also the contention, code layout or xib still debated, the IOS 6 era was neglected AutoLayout also gradually become popular. Eight Immortals crossing recount, who is right and who is wrong is judged by history.

(5) Apple also needs a large screen

The advent of the iphone 6 and 6 Plus in 2014 has left the user no longer buying Samsung's troubles for the big screen. But it also allows developers and designers to fall into a more painful adaptation of black holes.

Take a look at this picture below:

The iphone has a more versatile device size and even a 406ppi high-precision screen. Because the pixel density is too large to be easy to develop, Apple has increased the magnification on iphone 6 Plus to 3x. But the actual pixel of the iphone 6 Plus is 1080*1920, which is a little less than the 3x ideal value (1284*2208). The IPhone 6 Plus is handled in a way that narrows the overall program down a bit. The resolution is very high, this difference, actually can not see. This processing, can make 44 points of the Click Area constraints, the actual length of the physical, the basic remains unchanged.

Let's compare the aspect ratio of iphone 5 and iphone 6.

It can be seen that although the screen size has changed, the proportions are constant. All are 9÷16 = 0.5625 screens. This can be counted as a major boon. When the old iphone 5 program runs on the iphone 6, even if not adapted, the old program can automatically zoom in and out, spread the new phone, normal operation. Others call it automatic adaptation. But because the old program stretched, the overall look a little blurred, also can not make better use of large screen space.

When a developer needs to be manually adapted, as with the iphone 4 transition to iphone 5, in the new program, specify a new boot image. When the launch diagram is specified, the screen resolution becomes the appropriate size, the new phone's screen is larger, there are more virtual points, and more content can be displayed.

This time using AutoLayout layout, the same code, you can support multiple models. If you use code layout, you can determine the current device or screen resolution to make different settings, or the code to set the location and size of the absolute value to change to a relative value such as Self.view.width, but also for better compatibility.

From the analysis can be seen, slowly in order to adapt to multiple models, the program's start-up pictures are gradually increasing, in order to solve the problem. After Xcode 6, you can use Xib to set up the start-up interface so that you can fit multiple models with the same boot interface, reducing the space used to start up pictures.

At the same time, Apple launched iOS 8 with the size class support to make different adaptations to the horizontal and vertical screens. In size class, Apple divides the width and height of the device into the normal (Regular) and compact two States, as shown in:

As you can see, the Size class even includes the ipad in its adaptation range, making the program more adaptable. The iphone 6 Plus's flat screen version is an ipad mini that looks a little smaller in both use and shape.

Give an example of using the Size class layout:

Use the size class to implement the layout transformation shown without adding a single line of code. Isn't it powerful?

With the development of history, more and more devices have appeared, and the function pages of iOS are becoming more and more powerful. Looking at the world's forefront of the running Apple, in the end is the first design 3x compression to 2x or 2x amplification to 3x really important?

(6) What else is IOS 9?

iOS 9 hasn't been formally pushed yet, but it's already available on Apple's official website to install a trial version.

Apple has finally managed to pull the server developers into a black hole.

Network requests sent by the IOS9 system will be unified using TLS 1.2SSL. All HTTP requests have been changed to HTTPS. If not updated, you can temporarily reverse the unsecured network request by declaring it in Info.plist. But just like the popularity of iOS 7, who can block the wheel of history? or prepare a server update to parse the data for more secure network communication.

In addition, the newly added split-screen feature on the ipad for IOS 9 is also a big highlight. This article is mainly about the adaptation of the iphone, so do not repeat it here.

IOS 9 is about to break the cocoon, we pay close attention to it. Maybe Apple will bring us more surprises.

Reference documents:
(1) http://www.niaogebiji.com/article-4379-1.html

(2) http://www.cocoachina.com/ios/20140912/9601.html

(3) http://www.cocoachina.com/design/20141031/10106.html

(4) Other, don't remember ...

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

IPhone Adaptation Path