This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

Resolution and size of iOS devices

(See The Ultimate Guide To iPhone Resolutions)

The resolution of the

  • Point (point) :

    During the development process, all coordinate based drawings are in points, which correspond to pixels on the screen

  • Render pixels (Render Pixels) :

    This process is called rasterization. The pixel-based coordinate system can be obtained by multiplying the point coordinate system by the scale factor. A high scale factor will show more details

  • Physical pixels (Physical Pixels) :

    Actual pixels of the device screen

  • The physical length of the device screen (Physical Device) :

    The Physical length of the device is in Pixels. For example, the iPhone8 is 4.7 inches, and the iPhone11 is 6.1 inches. The number here refers to the Physical length of the diagonal of the phone screen. Instead of Render Pixels, the screen will have a PPI (pixel-per-inch) feature. The PPI value tells you how many Pixels are rendered per inch

Resolution of each iOS device

models Screen Width and Height (Point) Render pixels Physical Pixel Diagonal screen length (in.) Screen mode
Phone 5, 5 s, 5 c, se 320 * 568 640 * 1136 640 * 1136 4(326 PPI) 2x
Phone 6, 6 s, 7, 8 375 × 667 750 * 1334 750 * 1334 4.7 (326 ppi) 2x
Phone 6p,6sp,7p,8p 414 * 736 1242 * 2208 1080 * 1920 5.5 (401 ppi) 3x
Phone X,Xs,11Pro 375 * 812 1125 * 2436 1125 * 2436 5.8 (458 ppi) 3x
Phone 11,Xr 414 * 896 828 * 1792 828 * 1792 6.1 (326 ppi) 2x
Phone 11Pro Max,Xs Max 414 * 896 1242 * 2688 1242 * 2688 6.5 (458 ppi) 3x
IPad 4,5,Air,Air2, mini3, mini4 1024 x 768 2048 x 1536 2048 x 1536 9.7 (264 ppi) 2x
iPad Pro 1366 * 1024 2732 x 2048 2732 x 2048 12.9 (264 ppi) 2x

Screen mode (1x.2x.3x) :

Rendered in Pixels, a point on the screen will have an area of 2 * 2 = 4 Pixels for a 2x screen (Retina display) and 3 * 3 = 9 Pixels for a 3x screen (Retina HD display)

In iOS development, all control coordinates and control sizes are in points. If I need to show a 20 * 20 (point) image on the screen, how should the designer give it to me?

This is where the concept of screen mode is used. If the screen is 2x, the image needs to be 40 * 40 (pixel), and if the screen is 3X, the image needs to be 60 * 60. The name of the image should follow the following rules:

Standard:<device_modifier>.<filename_extension>
High resolution:@2x<device_modifier>.<filename_extension>
High HD resolution:@3x<device_modifier>.<filename_extension>
Copy the code

ImageName:

Picture name, according to the scene named device_modifier: optional, can be ~ iPad or ~ iPhone, when you need to specify a set of iPad and iPhone pictures need to add this field filename_extension: Image suffix, iOS uses PNG image

Such as: [email protected] - 2x auto-loading image version [email protected] - 3x auto-loading image version of the display MyImage@2x~ iphone-. PNG - 2X iPhone and iPod Touch Image version automatically loaded by the display MyImage@3x~ iphone-. png-3x Image version automatically loaded by the iPhone and iPod displayCopy the code

Multi-screen adaptation between design and development

Now that the iPhone screen size is no longer a single, what is a better process for iOS development?

The basic idea is

  • Choose a size as a design and development benchmark
  • Define a set of adaptive rules to automatically adapt the remaining two sizes
  • The special adaptation effect gives the design effect

This question has long been discussed on Zhihu. Here is a link to the answer by Pigtwo, a designer of Mobile Taobao

Multi-screen adaptation specifications

  • The text flow
  • Control the elastic
  • The image is proportionally scaled

Control elasticity means,navigation,cell,barIn the process of equal adaptation, the height in the vertical direction is constant; When the horizontal width changes, it ADAPTS itself by adjusting the spacing of elements or rightwing elements. This allows you to display more content vertically, taking advantage of the larger screen

About xiB, storyboard, code

Xib and StoryBoard

  • Xib: Each Viewcontroller corresponds to a separate XIB, making it easier for individual management and projects to be developed together. Views can be easily changed without global changes

  • StoryBoard: A StoryBoard is a file that contains multiple XiBs. It is easy to manage. In the StoryBoard, you can not only see the layout of each ViewController, but also know the transformation relationship between each ViewController

  • The difference between

    • For big projects,xibToo many files, not easy to manage. Jumps can only be implemented in code, which is confusing
    • StoryBoardSuitable for individual development and small to medium projects

Xib and code are different

  • Advantages and disadvantages xib

    • xibVisualization, fast development speed, less code
    • Co-developing, reading difficulties with each other, unable ingitView historical changes, easy to cause conflicts, resulting in conflicts after difficult to solve, easy to produce unnecessarycommit
    • The performance,xibIt’s slow to load, slow to open, and takes up the volume of your app pack

  • Code pros and cons

    • Flexible, convenient, all properties can be controlled by code, in short,xibPure code can do everything they can and pure code can do everything they can’t
    • Friendly to large projects, team development, especially version control, code management. The only downside is the complexity and the amount of code

Common Layouts

  • Fixed spacing: The spacing is always fixed for different sizes
  • Streaming layout: Text and images are streamed under different screens. For example, four images are displayed in the next row of a large screen, and three images in a row of a small screen. The size of the images is fixed
  • Proportional magnification: spacing, text size, image size and other proportional magnification
  • Maintain the ratio: Two UI elements or image attributes, such as length and width, maintain a certain ratio
  • Alignment: Alignment of elements in a certain direction

Common layout screen adaptation methods

  • Autoresizing

  • AutoLayou

  • VFL

  • Masonry

  • SnapKit