iPhone 適配之路

標籤：iphone   ios開發   ios   ios裝置   適配   

（1）1x時代

2007年，初代iPhone發布，螢幕的寬高是320*480像素。這個解析度一直到iPhone3GS也保持不變。

那時編寫iOS的App應用程式，只支援絕對位置。比如一個按鈕(x, y, width, height) = (10, 20, 30, 40)，就表示它的寬度是30像素，高度是40像素，放在(10, 20)像素的位置。

（2）Retina來臨

2010年，iPhone 4發布，率先採用Retina顯示屏，在螢幕的物理尺寸不變的情況下，像素成倍增加，達到640*960像素。

我們可以簡單算算，iPhone 4是640*960像素，對角線就是1154像素，除以3.5英寸，應該是330ppi。而官方給出的數字是326ppi。當像素太密，超過300ppi的時候，人眼也就不能區分出每個像素。因此iPhone 4的螢幕叫作Retina顯示屏。Retina在英文中，是視網膜的意思。

為了讓原有的App運行在新的手機上面，引入一個新的概念point(點)。在iPhone 3GS中，1個點等於1個像素；在iPhone 4中，1個點等於2個像素。點這個概念在iOS開發中十分重要，而非開發人員很少關注。

將之前以像素作為單位自動轉換成以點作為單位，使得iPhone 3GS的應用程式，不用修改也可運行在iPhone 4上面。

iPhone 4之後(x, y,width, height) = (10, 20, 30, 40)，就表示寬度為30個點，高度為40個點，放在(10, 20)個點的位置。

文字，顏色等是向量資料，放大不會失真。原有的iPhone 3GS程式，在iPhone 4上面運行，文字顯示也十分清晰。而圖片並非向量資料，開發的時候，為使得圖片清晰，需要進行圖片適配。這時需要準備兩張內容相同的圖片，放在同一目錄下。

example.png      // 30x 40像素

[email protected]   // 60 x 80像素

當程式中使用example.png的時候，會根據螢幕模式自動選擇對應的圖片。螢幕1x模式，就會選擇example.png, 2x模式就會優先選擇[email protected]。而沒有適配的舊程式，[email protected]不存在，就選擇example.png，產生大小為30 x 40個點，1x模式的圖片，展開到60x80像素，所以看起來比較模糊，但它們佔據的螢幕點數是一樣的。

（3）加長的iPhone

2012年，蘋果發布iPhone 5。跟iPhone 4相比, iPhone 5的寬度保持不變。高度增加568- 480 = 88個點。

在iOS開發中，44這個數字比較特殊。《iOS介面互動指南》中寫道，人類的手指有一定大小，點擊地區低於44個點的時候，就難以點中。44的兩倍就是88。

當原有程式沒有適配iPhone 5的時候，也可以正常運行，但多出來的88個點將會將會被自動均分為上下兩部分，使得上下出現黑邊。

那麼怎樣才能告訴iOS系統，應用程式已經適配了iPhone 5呢？這個時候，蘋果想到了啟動圖。每個機型，比如同時支援iPhone和iPad的程式，需要分別為iPhone跟iPad指定啟動圖片。那麼同時支援iPhone 4和iPhone 5的程式也可以使用這個辦法解決。

當舊的iPhone 4的程式，運行在iPhone 5上面，沒有iPhone 5的啟動圖片，就採用相容模式，上下留黑邊。當為iPhone 5指定了新的啟動圖片，系統就認為這個應用程式是已經適配了iPhone 5的，上下就不會留黑邊了。這個時候開發人員擷取到的螢幕高度就是568。

（4）改朝換代

iOS 7的出現，個人覺得，有點兒“老喬駕崩，天下大亂”的感覺。喬布斯於2011年辭世，2012年僅是加長的iPhone讓有些人甚至懷疑庫克的能力。但是蘋果公司在2013年發布的iOS 7作業系統告訴世人，其實上一年，庫克在憋大招。

iOS 7徹底顛覆了老喬堅持多年的擬物化，開始進入扁平化的新紀元。

如果說以前的適配都是軟體工程師的工作，這次的變化讓設計師也不得不站到了前線。質感的背景、凸起的button統統都得拍平。不僅僅是換張圖片這麼簡單，連視覺風格、操作習慣甚至都要重新設計。

還有一個更頭疼的問題是iOS 7上狀態列是透明的，可用於程式展示的空間多出了20像素。庫克簡單粗暴的直接讓所有程式都在iOS 7下運行，不需要說你是否已經適配了。一時間，頁面頂部的標題與狀態列重疊的現象成了大多數應用的無奈和尷尬。這更加表明了他改朝換代的決心，逼得所有應用不得不對iOS 7進行適配。

朝代更替時總是充滿著混亂。因為這個時候使用iOS 7以下作業系統的使用者仍然比例不小。堅持擬物化的設計，在iOS 7手機上看著很格格不入；設計扁平化的介面，在iOS 6手機上感覺也很奇怪。有的開發人員宣稱自己的應用已經適配iOS 7，也有的開發人員主張開發iOS 7應用併兼容iOS 6，更有一些有魄力的新公司一刀切，專為iOS 7而設計，低版本的使用者沒法安裝就只能幹瞪眼。連相容方法也是百家爭鳴，代碼布局還是xib依然爭論不休，iOS 6時代遭到冷落的Autolayout也漸漸成為熱門。八仙過海各顯神通，究竟誰對誰錯就等曆史來評判了。

（5）蘋果也要大屏

2014年iPhone 6和6 Plus的問世，讓使用者們再也沒有為了大螢幕而舍蘋果買三星的煩惱了。但這同時也讓開發人員和設計師陷入了更加痛苦的適配黑洞。

請看下面這張圖：

iPhone的裝置尺寸更加多樣化，甚至還出現了406ppi的高精度螢幕。由於像素密度太大，也是為了開發方便，蘋果將iPhone 6 Plus上的縮放比例增加到了3x。不過iPhone 6 Plus的實際像素是1080*1920，是比3x理想值（1284*2208）要少一點的。iPhone 6 Plus的處理方式是將程式整體稍微縮小一點。解析度很高，這點區別，實際上也看不出來。這樣處理，可以使得44個點的點擊地區約束，在物理上的真實長度，基本保持不變。

我們再比較一下iPhone 5和iPhone 6的寬高比。

可以看出雖然螢幕尺寸改變了，但是它們的比例是不變的。都是9÷16 = 0.5625 的螢幕。這可以算作是一個重大利好吧。當舊的iPhone 5程式運行在iPhone 6上面，即使沒有經過適配，舊程式也可以自動等比放大，鋪滿新手機，正常運行。也有人稱之為自動適配。但因為舊程式展開了，整體看起來有點模糊，也不能更好的利用大屏空間。

當需要開發人員手動適配的時候，跟iPhone 4過渡到iPhone 5一樣，在新程式中，指定一張新的啟動圖片。當指定了啟動圖，螢幕解析度就已經變成應有的大小，新手機的螢幕更大，有更多的虛擬點，可以顯示更多的內容。

這時候利用AutoLayout進行布局，同一份代碼，就可以支援多個機型。如果使用代碼布局，則可以判斷當前裝置或者螢幕解析度而做出不同的設定；或者把代碼中設定位置和大小的絕對數值都改成self.view.width之類的相對值，也能夠獲得更好的相容性。

由分析可以看到，慢慢的為了適配多個機型，程式的啟動圖片也逐漸增多，為解決這個問題。Xcode 6之後，可以使用xib來搭建啟動介面，這樣就可以同一個啟動介面，適配多個機型，減少啟動圖片佔用的空間。

同時，蘋果在iOS 8問世時還推出了Size Class支援對橫屏和豎屏做不同的適配。在Size Class中，蘋果將裝置的寬和高都分為常規（Regular）和緊湊（Compact）兩種狀態，如所示：

可以看出，Size Class甚至將iPad也納入其適配範圍內，讓程式的適應性更加強大。而iPhone 6 Plus的橫屏版無論在使用和外形上都像極了再小一號的iPad mini。

給一個使用Size Class布局的例子：

使用Size Class可以不加一行代碼就實現所示的布局轉換。是不是很強大？

隨著曆史的發展，出現了越來越多的裝置，iOS的功能頁越來越強大。望著在世界前沿一路狂奔的蘋果，到底是先設計3x壓縮到2x還是先設計2x放大到3x真的還重要嗎？

（6）iOS 9還有什嗎？

雖然iOS 9還沒有正式推送，但是已經可以在蘋果官方網站申請安裝試用版了。

蘋果這次終於成功的把服務端的開發人員也拉入到了適配的黑洞之中。

iOS9系統發送的網路請求將統一使用TLS 1.2SSL。把所有的HTTP請求都改為HTTPS了。如不更新，雖然暫時也可以通過在Info.plist中聲明，倒退回不安全的網路請求。但是就如iOS 7的普及一樣，誰又能擋住曆史的車輪呢？還是準備伺服器更新，以解析相關資料，獲得更安全的網路通訊吧。

另外，iOS 9在iPad上新增加的分屏功能也是一大亮點。本文主要講iPhone的適配，故在此不予贅述。

iOS 9即將破繭，大家密切關注吧。也許蘋果還會給我們帶來更多的驚喜呢。

參考文獻：
（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）其他，不記得了……

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

iPhone 適配之路