iOS 多尺寸屏幕適配知識

iDevice設備屏幕大小，在iPhone 6和iPhone Plus出現后，iPhone界面設計和開發面臨了新的任務，即對不同設備屏幕進行適配。

蘋果官方也推出來新的技術更新，來幫助我們進行設計和開發：

• Auto Layout
• Trait Collections, Size Class
• Storyboards
• Xcode6中使用矢量圖

我們需要理解和運用蘋果提供給我們的技術、并制定自己的適配方案。

這篇文檔暫時 并沒有 去講如何運用蘋果的這些技術進行適配，只是對背景知識一個大概的講解。

稍后的更新會有詳盡的補充。

相關術語

• Point

  Point可以理解為 iOS程序員 眼中的大小單位。它是iOS操作系統中的抽象的概念。

  At the beginning, coordinates of all drawings are specified in points.

  Points are abstract units, they only make sense in this mathematical coordinate space.

• Rendered Pixels

  Rendered Pixels可以理解為 UI設計師 眼中的大小單位。

  Point-based drawings are rendered into pixels. This process is known as rasterization .

  Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail.

• Physical Pixels

  設備屏幕硬件像素。

  The device screen may have lower pixel resolution than the image rendered in previous step.

  Before the image can be displayed, it must be downsampled (resized) to lower pixel resolution.

• Physical Device

  設備名稱

  Finally, computed pixels are displayed on the physical screen.

  The PPI number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world.

• 切圖倍數：1x、2x和3x

  這些表示Rendered Pixels到Point的倍數關系。

  iPhone4之前，是1倍；在iPhone6到iPhone4，都是2倍；iPhone 6Plus往后，是3倍。

Point和Rendered Pixels是我們需要關心的，Point是開發人員在Coding時，屏幕的邏輯大小單位，Rendered Pixels是設計師出圖的大小單位。

目前需要支持的所有尺寸

Point	Rendered Pixels	iDevice	Ratio
320 * 480	320 * 480 (1x)	iPhone3和3gs	1.5
320 * 480	640 * 960 (2x)	iPhone4和4s	1.5
320 * 568	640 * 1136(2x)	iPhone5和5s	1.775
375 * 667	750 * 1334(2x)	iPhone6	1.77866667
414 * 736	1242 * 2208(3x)	iPhone6Plus	1.77777778

這個只是iPhone方面，iPad方面還沒有考慮，這個是因為一些App在iOS和iPhone上面的UI設計有很大的不同，需要兩套設計和代碼。

我們開發一個iPhone的App，需要適配后四種尺寸，第一種由于太古老，不需要考慮。

Note: 如果你不進行適配，iOS也會自動幫你適配，但它只是簡單的縮放，會導致UIKit控件模糊（如果提供了適配的圖片，圖不會模糊）。

適配需要做的工作

本來對于不同的屏幕大小，我們應該分別進行設計和開發，比如在Auto layout出現之前，經常會用代碼判斷設備類型，然后將控件設置成不同的大小或位置。

由于iPhone屏幕尺寸變化不是很大，運用一些適配原則，可以在保證較高的UI效果前提下，減少適配的工作量。Auto laytou可以幫助我們制定適配原則。

也就是：

一套UI設計方案 ＋ 一些適配原則 ＝ 適配所有的機型

那么有哪些設配原則，我們需要怎么樣的適配原則？這個需要針對不同的界面，或者一個界面的不同部分，采用不同的適配原則。

我們舉個例子，說說什么樣的適配原則是好的。

Bad sample:

Good sample:

Good sample相比Bad sample，將上部分的空間都等比例放大了。

對于Point大小不變的控件，比如例子中左上角的按鈕，它的point都是44*44，設計師只是需要提供2x和3x的切圖即可。

Point	Rendered Pixels	iDevice
44 * 44	88 * 88(2x)	iPhone5和5s
44 * 44	88 * 88(2x)	iPhone6
44 * 44	132 * 132(3x)	iPhone6Plus

對于Point大小有改變的控件，比如例子中的任務頭像，它在三個設備中的Point大小都不一樣，設計師需要分別出三張圖。

Point	Rendered Pixels	iDevice
80 * 80	88 * 88(2x)	iPhone5和5s
100 * 100	200 * 200(2x)	iPhone6
120 * 120	360 * 360(3x)	iPhone6Plus

上面的情況中，320 Point寬度的設備和375 Point款度的設備，他們都是2x，如果在兩種設備上需要使用不同的圖，該怎么命名圖片呢？ 這個帖子 ，還有 這個 里有說明該怎么做：

image-320@2x//iPhone 5
image-375@2x//iPhone 6
NSNumber screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString imageName = [NSString stringWithFormat:@quot;image-%@quot;, screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

參考