iOS 的 APP 如何適應 iPhone 5s/6/6Plus 三種屏幕的尺寸？

2014-10-21 19:03| 發佈者: 鳥哥筆記-饅頭 |來自: 知乎 黃兢成

初代iPhone 2007年，初代iPhone發佈，屏幕的寬高是 320 x 480 像素。下文也是按照寬度，高度的順序排列。這個分辨率一直到iPhone 3GS也保持不變。 那時編寫iOS的App(應用程序)，只支持絕對定位。好比一個按鈕(x, y, width, height) = (20, 30, 40, 50)，就表示它的寬度是40像素，高度是50像素，放在(20, 20)像素的位置。 iPhone 4 2010年，iPhone 4發佈，率先採用Retina顯示屏，在屏幕的物理尺寸不變的狀況下，像素成倍增長，達到 640 x 960 像素。 這樣就出現一個問題，怎麼讓原有的App運行在新的手機上面？iPhone手機一個優點，就是有衆多優秀的App，假如不兼容原有的App，就至關於放棄這個得來不易的優點，是很不明智的。 每當iPhone的屏幕有所變化，好比iPhone 3GS過渡到iPhone 4, iPhone 4過渡到iPhone 5, iPhone 5過渡到iPhone 6，蘋果公司都須要想辦法來解決上述的兼容問題。 爲了運行以前的App，引入一個新的概念point(點)。點這個概念在iOS開發中十分重要，而非開發者不多關注。iPhone 4屏幕尺寸繼續保持320 x 480，不過單位並不是是像素，而是點。 在iPhone 3GS中，1個點等於1個像素。也就是說，點跟像素能夠直接互換。 在iPhone 4中，1個點等於2個像素。 iPhone 4和iPhone 3GS的屏幕尺寸其實是同樣的，都是3.5英寸。一樣一個點，實際上看起來是同樣的。只是iPhone 4在單位英寸上像素更多，看起來更細膩。 開發iOS的時候，使用點做爲基本單位會更加方便。列表對比 這裏的屏幕模式能夠初步理解成，一個點等於多少個像素。2x，就是1個點等於2個像素。 總結一下單位 手機屏幕的物理長度，使用英寸做爲單位。好比iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，這裏的數字是指手機屏幕對角線的物理長度。 屏幕像素，好比iPhone 3GS屏幕是320 x 480像素，iPhone 4是640 x 960像素，這裏的像素能夠想象成屏幕上真正用來顯示顏色的發光小點。 點，開發App時候使用的單位，是一個虛擬的單位，並不是實際存在的，所以點有時也叫虛擬點。點這個單位，用於屏蔽各個屏幕設備的不一樣，兼容之前的程序。 每英寸有多少個像素，稱爲ppi(pixel per inch)。咱們能夠簡單算算，iPhone 4是640 x 960像素，對角線就是1154像素，除以3.5英寸，應該是330ppi。而官方給出的數字是326ppi。當像素太密，超過300ppi的時候，人眼也就不能區分出每一個像素。所以iPhone 4的屏幕叫做Retina顯示屏。Retina在英文中，是視網膜的意思。 iPhone 4以後(x, y, width, height) = (20, 30, 40, 50)，就表示高度爲40個點，寬度爲50個點，放在(20, 20)個點的位置。這種處理方法，將以前以像素做爲單位自動轉換成以點做爲單位，使得iPhone 3GS的應用程序，不用修改也可運行在iPhone 4上面。 文字，顏色等是矢量數據，放大不會失真。原有的iPhone 3GS程序，在iPhone 4上面運行，文字顯示也十分清晰。 而圖片並不是矢量數據，處理方式有所不一樣。假設圖片 example.png，大小爲 30 x 40像素（這裏的單位是像素，數字圖片的單位一般都爲像素）。當這張example.png在iPhone 3GS和iPhone 4中使用時候，都佔據屏幕上30 x 40個點。而由於iPhone 4中1個點等於2個像素，也就是30 x 40像素的圖片，佔據了60 x 80像素的屏幕，所以這圖片在iPhone 4中看起來就會模糊。 開發的時候，爲使得圖片清晰，須要進行圖片適配。這時須要準備兩張內容相同的圖片，放在同一目錄下。 example.png      // 30 x 40像素 example@2x.png   // 60 x 80像素 當程序中使用example.png的時候，會根據屏幕模式自動選擇對應的圖片。屏幕1x模式，就會選擇example.png, 2x模式就會優先選擇example@2x.png，假如example@2x.png不存在，就選擇example.png。 圖片跟屏幕同樣，也有1x模式，2x模式。在iPhone 6 Plus中，還出現3x模式，原理是同樣的。 當iPhone 4選中example@2x.png的圖片，就會生成一張大小爲30 x 40個點，2x模式的圖片。這個時候，圖片看起來就會很清晰了。而沒有適配的舊程序，example@2x.png不存在，就選中example.png，生成大小爲30 x 40個點，1x模式的圖片，看起來比較模糊。但它們佔據的屏幕點數是同樣的。 iPhone 5 2012年，蘋果發佈iPhone 5。咱們將全部機型對比，依然採用點做爲單位。 跟iPhone 4作比較, iPhone 5的寬度保持不變。高度增長568 - 480 = 88個點。 在iOS開發中，44這個數字比較特殊。iOS界面指南寫着，人類的手指有必定大小，點擊區域低於44個點的時候，就難以點中。44的兩倍就是88。 當原有程序沒有適配iPhone 5的時候，也能夠正常運行，但多出來的88個點將會將會被自動均分爲上下兩部分，使得上下出現黑邊。我找不到好看的圖片。 那麼怎樣才能告訴iOS系統，應用程序已經適配了iPhone 5呢？在這裏，咱們先扯開一下，談一下啓動圖片。 點擊主屏幕的圖標，進入App的時候，會當即顯示一張圖片，這張圖片就是啓動圖片(Launch Image)。App在正式啓動的時須要作一些初始化處理，這一般比較費時。先出現啓動圖片，可使用戶以爲系統當即有響應，減小等待的焦慮感。 每一個機型，好比同時支持iPhone和iPad的程序，須要分別爲iPhone跟iPad指定啓動圖片。當舊的iPhone 4的程序，運行在iPhone 5上面，沒有iPhone 5的啓動圖片，就採用兼容模式，上下留黑邊。當爲iPhone 5指定了新的啓動圖片，系統就認爲這個應用程序是已經適配了iPhone 5的，上下就不會留黑邊了。下面是微信啓動圖片，應該都很熟悉了。 微信啓動圖片中出現的那個地球，叫藍色彈珠（The Blue Marble），是在1972年12月7日由阿波羅17號太空船的船員所拍攝的。這張照片當年很震撼，是普通人第一次能夠經過照片直接看到地球的全貌。見問題爲何微信啓動界面的地球圖片沒有轉到中國這部分？這是否有損用戶體驗？ 微信的啓動圖，爲適配iPhone 5，相比與iPhone 4, 很明顯狹長了。 典型iPhone應用程序（遊戲除外），不少是上面一個導航欄，下面一個工具欄或者標籤欄, 中間一大塊用於顯示的內容區。iPhone 5拉長了，對於程序的適配，也不算麻煩，內容區的內容基本是動態生成的。適配時候能夠簡單上下不變，中間的內容區拉長就好了。注意，導航欄和工具欄的高度也是44個點。下面是同一程序，在iPhone 4跟iPhone 5的對比。 AutoLayout 到了這個時候，傳統絕對定位的弱點就顯露出來了。這時iPhone按照點做爲單位，已經出現了兩種不一樣尺寸的屏幕，算上iPad, 就有3種尺寸（有些App能夠同時兼容iPhone和iPad，稱爲Universal）。 從iOS 6系統發佈後，iOS開發中能夠採用一種AutoLayout的技術。AutoLayout就像網頁同樣，指定View，Button，Text之間的相對位置，好比靠左多少，靠右多少，居中多少等等。舉個例子，像下面的簡單佈局。 假設左上角的區域爲view1, 右上角的區域爲view2, 下面的區域爲view3。AutoLayout會說: view1.left = 20               // View1的左邊距離邊界20個點 view1.top = 20                // View1的上邊距離邊界20個點 view2.right = 20              // View2的右邊距離邊界20個點 view2.top = 20                // View2的上邊距離邊界20個點 view2.left = view1.left + 20  // View2的左邊距離View1右邊20個點 view2.width = view1.width     // View1的寬度等於View2的寬度 view2.height = view1.height   // view1高度等於view2高度 view3.left = view1.left       // view3的跟view1左對齊 view3.right = view2.right     // view3跟view2右對齊 view3.top = view1.bottom + 20 // view3的上邊距離view1下邊20個點 view3.bottom = 20             // view3下邊距離邊界20個點 view3.height = view1.height   // view3高度等於view1高度 指定上面的約束條件後，AutoLayout就會自動算出對應的佈局。上面我寫得比較繁瑣，事實上不少操做都是可使用鼠標拖拉來指定的，並不必定須要使用代碼。但就算用代碼，也有簡寫的方法。下面是在xib中，拖拉鼠標指定約束時的界面。 而絕對定位，會直接說 view1.frame = (x1, y1, width1, height1) view2.frame = (x2, y2, width2, height2) view3.frame = (x3, y3, width3, height3) 絕對定位並不是指定約束條件，而是開發者本身來精確指定View，Button, Text等的實際座標大小。 對於一個屏幕，絕對定位可能跟AutoLayout的區別不算大，甚至絕對定位會更方便些。但當須要同時適配多個屏幕，AutoLayout根本不須要更改。而絕對定位就須要根據屏幕大小，一個個算出來。好比橫屏，在AutoLayout下面，就自動變成。 這裏不過是3個控件的佈局，當出現的控件數越多，屏幕尺寸越多，AutoLayout的優點就顯露出來了。另外AutoLayout有個好處是容易支持多語言，不一樣語言下，同一個意思文字的長度是不一樣的，使用AutoLayout也能夠自動適配。 在iOS 6的時候，AutoLayout還比較少人使用，當時屏幕尺寸還比較少。iOS 7的時候，就開始不少人使用了。而到如今iOS 8了, 更加上iPhone 6, iPhone 6 Plus須要適配，AutoLayout大勢所趨，不用不行了。 iPhone 6, iPhone 6 Plus 2014年，iPhone 6, iPhone 6 Plus發佈後，狀況又有新的變化。再次比較全部iPhone機型。 屏幕尺寸再度分裂。可是咱們比較iPhone 5 跟 iPhone 6的寬高比例。 能夠看出，iPhone 6跟iPhone 5雖然屏幕尺寸改變了，可是它們的比例是不變的。都是 9 ÷ 16 = 0.5625 的屏幕。 當舊的iPhone 5程序運行在iPhone 6上面，假如沒有通過適配。舊程序自動等比放大，鋪滿新手機，舊程序也能夠正常運行。這種方案可算是自動適配。但由於舊程序拉伸了，總體看起來有點虛，也不能更好利用大屏空間。 當須要開發者手動適配的時候，跟iPhone 4過渡到iPhone 5同樣，在新程序中，指定一張新的啓動圖片。當指定了啓動圖，屏幕分辨率就已經變成應有的大小，這時候利用AutoLayout進行佈局，同一份代碼，就能夠支持多個機型。新手機的屏幕更大，有更多的虛擬點，能夠顯示更多的內容。 值得注意一點是，iPhone 6 Plus。它的寬高是414 × 736個點，3x模式，理想上來講，應該有1242 × 2208像素。但iPhone 6 Plus的實際像素是 1080 × 1920，是比理想值要少一點的。iPhone 6 Plus的處理方式是將程序總體稍微縮小一點。分辨率很高，這點區別，實際上也看不出來。這樣處理，可使得44個點的點擊區域約束，在物理上的真實長度，基本保持不變。 由分析能夠看到，慢慢的爲了適配多個機型，程序的啓動圖片也逐漸增多，爲解決這個問題。iOS以後，可使用xib來搭建啓動界面，這樣就能夠同一個啓動界面，適配多個機型，減小啓動圖片佔用的空間。 建議 一、之後的應用程序，都使用AutoLayout, 不要再用絕對定位。 二、使用相似網頁的方式來設計界面。 三、設計師好，程序員也好，儘可能使用點這個單位進行思考，而不要使用像素。好比，你須要作44 x 66個點的按鈕，2x模式，就乘以2, 3x模式就乘以3。這樣的思考方式能夠大體估計到真實的物理長度。44個點，就是手機上導航欄，工具欄的高度。假如用像素思考，容易使得作出的圖片過大或者太小。 四、非矢量素材，就能夠作尺寸最大的，以後再進行縮小。好比你須要兼容3x的屏幕，就直接作最高那種圖片。 五、而當使用Flash之類的矢量工具來作素材的時候，應該直接作點那個尺寸。好比44 x 66個點的按鈕。就創建一個44 x 66的場景。以後再導出成2倍圖，3倍圖，由於矢量放大不失真。不要創建一個3x的場景，導出成大圖片，再進行縮小，這樣就容易失真。更理想的是直接使用矢量圖。 六、假如是那種導航欄，工具欄之類的背景圖，須要橫跨整個屏幕。能夠只切一小塊，讓程序拉伸，拉伸方式是保持兩邊的像素不動，只拉伸最中間的一列像素。須要拉伸的話，橫方向就不要出現一些漸變色。 七、按鈕的點擊區域，不該該少於44像素，就算按鈕的圖片看起來比較小，也應該使得點按鈕周圍的透明區也有反應。 八、能夠按照你當前最方便測試機子的型號來作一些主要預覽圖，效果圖。好比你手頭有iPhone 5，能夠按照iPhone 5的尺寸，320 x 568個點，須要兼容iPhone 6 Plus，就使用3x的模式。這樣方便將圖片放進手機裏面看實際的效果。有多個測試機，就選較大的，以後再進行一些細調。假如支持iPhone 6 Plus的橫屏模式，須要另外處理。 九、上面說的是應用的處理方式，遊戲會有些特殊。如今不少遊戲，按照1136 x 768的像素尺寸來設計場景，這樣能夠同時兼容iPad和iPhone，並只使用一份圖。iPad 1x模式下尺寸是1024 x 768像素，iPhone 6在2x模式下，是1136 * 640。這種尺寸，能夠簡單將場景居中顯示，各自將場景拉伸到最大。