iOS 設備的屏幕尺寸,分辨率及其屏幕邊長比例


1.從iPhone3GS開始,寬高像素點分別是320*480,屏幕尺寸3.5寸,屏幕比例4:3

2.iPhone4和4S,寬高像素點變成是640*960,但是從程序角度依然是320*480(這是因為蘋果的retina顯示屏的原因,在retina中,一個程序像素對應的是可見像素的兩倍)屏幕尺寸3.5寸,屏幕比例4:3

3.iPhone5和5S,寬高像素點是640*1136(程序角度是320*568),屏幕尺寸4寸,屏幕比例16:9

4.iPhone6分辨率375x667點,像素750x1334 屏幕4.7寸

5.iPhone6Plus分辨率414x736點,像素1242x2208 屏幕5.5寸

典型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個點的點擊區域約束,在物理上的真實長度,基本保持不變。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM