轉:http://blog.csdn.net/houseq/article/details/40051207
對於不同蘋果設備,各個參數查看《iOS:機型參數、sdk、xcode各版本》。
機型變化
坐標:表示屏幕物理尺寸大小,坐標變大了,表示機器屏幕尺寸變大了;
像素:表示屏幕圖片的大小,跟坐標之間有個對應關系,比如1:1或1:2等;
ppi:代表屏幕物理大小到圖片大小的比例值,如果ppi不變,則坐標和像素的比例不會變;
iPhone 4以前
iPhone 4/4s
iPhone 5/5s/5c
iPhone 6
iPhone 6 plus
適配方法:
- 在iPhone 4s之后,不同機型,屏幕大小坐標不變,跟實際圖片大小比例不是1:1就是1:2關系。因為坐標不變,所以在開發中可以使用絕對定位,確定每個視圖位置,同時提供倆套圖片,~.png和~@2x.png,系統根據機器的分辨率自動決定使用哪張圖片。
- iPhone 5/5s/5c之后,因為屏幕大小坐標已變,高度增加568 - 480 = 88個點,再使用絕對定位的方式,會導致程序高度不夠,如果程序未做適配,系統會將多出來的88個點將會將會被自動均分為上下兩部分,使得上下出現黑邊。對應不同機型,屏幕坐標大小改變了,不能再絕對定位了,為了解決這個問題,ios出現了一種新技術:AutoLayout。AutoLayout可以解決不同機型,屏幕大小的變化,至於圖片的適配,因為5/5s/5c,坐標:像素 = 1:2,所以直接使用@2x.png圖片就行。
- iPhone 6之后,因為屏幕大小坐標已變,寬、高都增大,但是寬、高比例不變,類似之前的處理方式,使用AutoLayout自動適配,坐標:像素 = 1:2,使用@2x.png圖片。
綜合之前的,@2x圖片可以按照750 x 1334規格來。 - iPhone 6 plus,類似之前使用AutoLayout,在使用圖片的時候,因為 坐標:像素 = 1:2.6,理論上使用@2.6x.png圖片即可,但是這不是整數,實際使用很不方便,而@2x 和 @3x 都不太行得通,怎么辦?
引用一段文字說的很好:
“不是現有的屏幕物理分辨率明顯超過了 @2x 但還達不到 @3x 的水平么?那我們歪歪一個滿足 @3x 的屏幕總可以吧?
對的,歪歪。
程序在 iPhone 6 Plus 上運行的時候,iOS 會騙它說,你運行在一個超大的 @3x Retina 顯示屏上,物理分辨率高達 1242 x 2208,邏輯分辨率是 414 x 736,兩者都比 iPhone 6 要大。然后作為設計師和開發人員,也跟着一起歪歪。設計師畫圖的時候要把屏幕當成 1242 x 2208 來畫圖(而且要提供@3x 的高清圖),開發人員也按照 414 x 736 的邏輯分辨率來寫程序。
但借來的總要還的。等咱們歪歪結束了以后,iOS 拿到這個假大的 UI 繪制結果,實時地再縮小到實際的 1080 x 1920 分辨率(系統通過某種算法)。於是,用戶在 iPhone 6 Plus 的屏幕上看到的永遠是被縮小了的圖像:
這么做使得設計和開發的過程大大簡化,且最后的實際縮放系數 @2.62x 非常接近理想的 @2.46x,使得同樣的素材在真機上看起來尺寸也非常合理:
其他:
代碼中的尺寸不要使用480、460這樣的絕對數值,使用的UIScreen取設備的尺寸。
開啟適配?(手動/自動)
在某機型上,如果是自動適配,比如iPhone 5,老版程序就會在屏幕上、下倆端多出倆塊黑條;比如iPhone6/6plus,老版程序就會自動等比拉伸。那如何關閉自動適配?
指定啟動圖(例如iPhone 5為Default-568h@2x.png)或者使用Launch Screen File.xib,即程序使用手動適配,不會做拉伸等,但是程序內部必須已做處理,否則使用自動適配方案。
總結:
- 不同機型適配可看成兩部分,一是屏幕大小適配(坐標),一是像素適配;前者根據不同的機型大小,視圖大小自動適應(AutoLayout);后者根據機型的分辨率和坐標比率,提供合適@xx圖片;
- 目前4s、5/5s/5c、6的適配,使用圖片部分,都是使用@2x的圖片,在不同的機器上肯定會有一定的拉伸、縮小,目前沒看到什么好的解決方案,推薦圖片按大圖標准做;
- 趨勢:機器屏幕的大小可能會越來越多,絕對定位的方式肯定不行,使用AutoLayout,自動適配屏幕大小,類似網頁的思想來設計界面;
- 趨勢:xcode 6中已經可以使用矢量圖了,可以使用矢量圖,避免各種規格圖片;
- 對於設計師:
(1)非矢量素材,就可以做尺寸最大的,之后再進行縮小。比如你需要兼容3x的屏幕,就直接做最高那種圖片。因為之后幾種機型長寬比都是9:16,可以直接拉伸。
(2)已有非矢量素材,直接拉伸放大到@3x。
(3)而當使用Flash之類的矢量工具來做素材的時候,應該直接做點那個尺寸。比如44 x 66個點的按鈕。就建立一個44 x 66的場景。之后再導出成2倍圖,3倍圖,因為矢量放大不失真。不要建立一個3x的場景,導出成大圖片,再進行縮小,這樣就容易失真。
--2.按鈕的點擊區域,不應該少於44pt(太小不易點中),就算按鈕的圖片看起來比較小,也應該使得點按鈕周圍的透明區也有反應。
實際操作方案:
- 方案(1):
效果:(高)各視圖、按鈕、cell、bar高度,高度間距固定(坐標),不同屏幕高度顯示的cell多少不同,各bar,btn離屏幕頂部,或者占屏幕底部位置不變;(寬)各視圖、按鈕、cell、bar的寬度隨屏幕大小變化而變化。
實現方法:
(高):代碼中用#define定義各控件高度,xib中直接寫死各控件高度,父視圖用ScreenHeight調節高度;
(寬):
1.代碼中各控件寬度用效果圖里“控件寬度/圖寬度.00”這個比例x,x*ScrrenWeight計算控件的寬度,父視圖用ScrrenWeight調節;
2.xib中使用autoRisizing約束寬度;父視圖代碼中用ScrrenWeight調節寬度; - 方案(2):
效果:各視圖、按鈕、cell、bar寬高隨着不同屏幕大小,合適縮放。
實現方法:
1.高度適配參考上文中寬度適配;
2.代碼中手寫Autolayout的約束條件,NSLayoutConstraint相關類或者xib中使用AutoLayout,父視圖用ScrrenSize調節寬度; - 說明:
1.(對於控制器創建完,不同屏幕控制器xib初始大小為多少,是屏幕大小還是xib設置的某個大小,未研究過,不知道,在代碼中用ScrrenSize調節保險)。
2.對於高度固定,只是在寬度一個方向做適配的話,如果用Autolayout的話,會有一堆警告,高度上面不做約束,自動變化調節不出來;如果高度上也做了約束,那么就不是在一個方向上適配的前提了。