IOS:界面適配

  

機型變化

          座標:表示屏幕物理尺寸大小,座標變大了,表示機器屏幕尺寸變大了;

          像素:表示屏幕圖片的大小,跟座標之間有個對應關係,比如1:1或1:2等;

          ppi:代表屏幕物理大小到圖片大小的比例值,如果ppi不變,則座標和像素的比例不會變;

         iPhone 4以前

           iPhone、iPhone3/3G機型未採用retina,座標是320 x 480,屏幕像素320 x 480 ,他們一一對應,1:1關係。即一個座標對應1個像素。

         iPhone 4/4s

          機器採用了retina屏幕,座標是320 x 480,屏幕像素640 x 960,他們之間是1:2關係。即一個座標對應2個像素。

         iPhone 5/5s/5c

          機器採用了retina屏幕,座標是320 x 568,屏幕像素640 x 1136,他們之間關係式1:2關係。即一個座標對應2個像素。

         iPhone 6

          機器採用了retina屏幕,座標是375, 667,屏幕像素750 x 1334,他們之間關係式1:2關係。即一個座標對應2個像素。

         iPhone 6 plus

          機器採用了retina屏幕,座標是414, 736,屏幕像素1080 x 1920,他們之間關係式1:2.6關係。即一個座標對應2.6個像素。

       適配方法:

  • iPhone 4s之後,不同機型,屏幕大小座標不變,跟實際圖片大小比例不是1:1就是1:2關係。因爲座標不變,所以在開發中可以使用絕對定位,確定每個視圖位置,同時提供倆套圖片,~.png和[email protected],系統根據機器的分辨率自動決定使用哪張圖片。
  • iPhone 5/5s/5c之後,因爲屏幕大小座標已變,高度增加568 - 480 = 88個點,再使用絕對定位的方式,會導致程序高度不夠,如果程序未做適配,系統會將多出來的88個點將會將會被自動均分爲上下兩部分,使得上下出現黑邊。對應不同機型,屏幕座標大小改變了,不能再絕對定位了,爲了解決這個問題,ios出現了一種新技術:AutoLayout。AutoLayout可以解決不同機型,屏幕大小的變化,至於圖片的適配,因爲5/5s/5c,座標:像素 = 1:2,所以直接使用@2x.png圖片就行。
            至於@2x圖片大小,是按照640 x 960 還是 640 x 1136 的大小,一個是拉伸效果,一個是壓縮效果,因爲比例差不多,推薦使用大圖的。
  • 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爲[email protected])或者使用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的場景,導出成大圖片,再進行縮小,這樣就容易失真。
其他:
--1.假如是那種導航欄,工具欄之類的背景圖,需要橫跨整個屏幕。可以只切一小塊,讓程序拉伸,拉伸方式是保持兩邊的像素不動,只拉伸最中間的一列像素。需要拉伸的話,橫方向就不要出現一些漸變色。
--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的話,會有一堆警告,高度上面不做約束,自動變化調節不出來;如果高度上也做了約束,那麼就不是在一個方向上適配的前提了。
------------------------------------
參考:
《詳解 iPhone 6 Plus 的奇葩分辨率》http://j.news.163.com/docs/99/2014091214/A5V1I08A9001I08B.html
《iPhone屏幕適配,歷史及現狀》http://hjcapple.github.io/2014/10/10/iphone-screen.html
《APP設計師必讀-快速適配iPhone6及plus的訣竅》http://www.ui.cn/project.php?id=25685
《iPhone6分辨率與適配》http://www.cocoachina.com/ios/20140912/9601.html
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章