iOS螢幕适配精華版

iOS:界面适配(三)--iPhone不同機型适配 6/6plus 前

分類： iOS iOS.Language&Mech 2014-10-14 15:44  620人閱讀  評論(0)  收藏  舉報 iphone6 iPhone6plus 适配 設計 界面

目錄(?)[+]

           對于不同蘋果裝置，各個參數檢視《iOS:機型參數、sdk、xcode各版本》。

       機型變化

          坐标：表示螢幕實體尺寸大小，坐标變大了，表示機器螢幕尺寸變大了；

          像素：表示螢幕圖檔的大小，跟坐标之間有個對應關系，比如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