天天看點

iPhone 适配之路

(1)1x時代

2007年,初代iPhone公布,螢幕的寬高是320*480像素。這個分辨率一直到iPhone3GS也保持不變。

那時編寫iOS的App應用程式。僅僅支援絕對定位。

比方一個button(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徹底颠覆了老喬堅持多年的拟物化,開始進入扁平化的新紀元。

假設說曾經的适配都是軟體project師的工作。這次的變化讓設計師也不得不站到了前線。

質感的背景、凸起的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 适配之路

iPhone的裝置尺寸更加多樣化。甚至還出現了406ppi的高精度螢幕。因為像素密度太大,也是為了開發友善,蘋果将iPhone 6 Plus上的縮放比例添加到了3x。隻是iPhone 6 Plus的實際像素是1080*1920,是比3x理想值(1284*2208)要少一點的。iPhone 6 Plus的處理方式是将程式總體略微縮小一點。分辨率非常高。這點差别,實際上也看不出來。這樣處理,能夠使得44個點的點選區域限制。在實體上的真實長度。基本保持不變。

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

iPhone 适配之路

能夠看出盡管螢幕尺寸改變了,可是它們的比例是不變的。都是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)兩種狀态。例如以下圖所看到的:

iPhone 适配之路

從圖中能夠看出,Size Class甚至将iPad也納入其适配範圍内,讓程式的适應性更加強大。而iPhone 6 Plus的橫屏版不管在使用和外形上都像極了再小一号的iPad mini。

給一個使用Size Class布局的樣例:

iPhone 适配之路
iPhone 适配之路

使用Size Class能夠不加一行代碼就實作上圖所看到的的布局轉換。是不是非常強大?

随着曆史的發展,出現了越來越多的裝置,iOS的功能頁越來越強大。

望着在世界前沿一路狂奔的蘋果,究竟是先設計3x壓縮到2x還是先設計2x放大到3x真的還重要嗎?

(6)iOS 9還有什麼?

盡管iOS 9還沒有正式推送,可是已經能夠在蘋果官方站點申請安裝試用版了。

蘋果這次最終成功的把服務端的開發者也拉入到了适配的黑洞之中。

iOS9系統發送的網絡請求将統一使用TLS 1.2SSL。

把全部的HTTP請求都改為HTTPS了。如不更新。盡管臨時也能夠通過在Info.plist中聲明,倒退回不安全的網絡請求。可是就如iOS 7的普及一樣,誰又能擋住曆史的車輪呢?還是準備server更新,以解析相關資料,獲得更安全的網絡通信吧。

另外。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 适配之路