iOS巔峯之iPhone適配的相關內容以及機型適配時的注意事項

  各機型參數對比

  

一、機型的適配;

1.機型的變化:

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

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

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


iPhone 4 以前

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

iPhone4/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個像素.


2.適配方法:

2.1.1圖片適配

  • 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,使得同樣的素材在真機上看起來尺寸也非常合理。

2.1.2代碼適配

(1)根據屏幕的寬和高寫相關的frame

        在新特性界面中,根據:[UIScreen mainScreen].bounds.size.height.來判斷用戶的屏幕長度,來判斷時3.5寸,4     寸,4.7寸,5.5寸,以此來設置新特性中圖片選用哪套。

  常用寫法:

  #define kScreenWidth [UIScreen mainScreen].bounds.size.width

  CGFloat btnW =kScreenWidth * 1/4;


(2)存代碼實現AutoLayout,一般使用第三方封裝好的Masonry
         


機型適配總結:

  • 不同機型適配可看成兩部分,一是屏幕大小適配(座標),一是像素適配;前者根據不同的機型大小,視圖大小自動適應(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.iOS9網絡適配,改爲更爲安全的HTTPS

在Info.plist的source code中添加一段代碼即可:
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章