iOS screen adaptation

Original http://www.marklol.com/post/8140

Although from the screen aspect ratio, 16:9 can be said that the mobile phone industry consensus, do not be happy too early, there is a bigger pit waiting for us. The advent of the iphone 6 (plus) has forced us to rethink how the iphone's UI should be done. How big is the painting?

Based on previous experience with Android, although the physical size of the screen is large, but divided by the corresponding magnification, the resulting logical pixels are more uniform, the amount of information displayed on different screens is the same. A few alternative is also about to eliminate the old equipment, a little bit smaller, design as appropriate to consider.

Now the iphone situation seems a little bad, the physical size divided by the magnification, is really a kind of ah! Different logical pixels mean that the amount of information on the screen is not the same, and it can be very poor. Compared to 5s and 6+ logic pixels, really very far. This will lead to the 5s just good design, on the 6+ appear too empty; 6+ just good design, 5s must change the old man machine.

In contrast, a multi-cut set of graphs is really nothing. The real challenge is that a set of designs is not enough. Of course, we can design the large-screen 6+ individually. But the 5s and 6 even the same magnification, the logical pixel is not the same. This means that we have to consider the size of two screen sizes everywhere in a set of designs.

resolution and pixels

Validated by the new Xcode6 simulator (with a resolution of PT, Pixel true pixel):

1. IPhone5 resolution 320x568, Pixel 640x1136,@2x
2. IPhone6 resolution 375x667, Pixel 750x1334,@2x
3. IPhone6 Plus resolution 414x736, Pixel 1242x2208,@3x, (note that after rendering at this resolution, the image is reduced pixel resolution to 1080p (1080x1920))

Automatic adaptation

Do not process when automatically equal than stretched, if the old project print screen frame, still is320x568

Compare the automatically adapted and perfectly adapted navigation bar to see the problem:

Because stretching so there will be some virtual, the navigation bar is significantly larger than 64, but compared to 3.5-inch to 4-inch left black edge is still much better. How do I turn off the auto-fit formula? This is still the old idea, change the starting chart:

In addition to changing the start diagram, you have to say that the new Xcode can be used xib to set the start diagram:

However, this xib can not be associated with any code (can not customize the view of the class, not Iboutlet, cannot add object), it is understood that this xib is a piece, the benefit of this scheme is that you can use to the Size Classes different screen layout of this xib (interested can see "Size classes")

About manual adaptation

As long as you manually specify the start diagram or that xib, the screen resolution has become the size of the old code all about writing dead frame value of the code is unlucky, if you go to manual adaptation will be all appropriate, it is recommended to find a viable solution before you do not modify , The automatic adaptation scheme also does not affect the use.

In the face of 4-resolution iphone, it is recommended to use the Auto Layout layout + Image Assets Manage image + (Xib+storyboard) of each resolution to Interface Builder build the UI, the Size Classes performance of the low-version iOS system is unknown. If you want this manual adaptation, at least your project needs to be deployed in the ios6+, not the AutoLayout layout will die pretty miserable.

About XCODE6

1. The simulator path is replaced by the~/Library/Developer/CoreSimulator/Devices/
2. Xcode6 can not find iOS6 simulator, it is time to persuade everyone to give up ios7-
3. Submit App Store now mandatory to support 64-bit, it is time to comb through all dependent third-party LIB, updated to 64-bit

iOS screen adaptation