iOS 適配

時間 2019-11-12

標籤 ios 適配欄目 iOS 简体版

原文原文鏈接

機型變化

座標：表示屏幕物理尺寸大小，座標變大了，表示機器屏幕尺寸變大了；php

像素：表示屏幕圖片的大小，跟座標之間有個對應關係，好比1:1或1:2等；html

ppi：表明屏幕物理大小到圖片大小的比例值，若是ppi不變，則座標和像素的比例不會變；ios

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和~@2x.png，系統根據機器的分辨率自動決定使用哪張圖片。
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 都不太行得通，怎麼辦？

引用一段文字說的很好： git

「不是現有的屏幕物理分辨率明顯超過了 @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 的屏幕上看到的永遠是被縮小了的圖像：github

這麼作使得設計和開發的過程大大簡化，且最後的實際縮放係數 @2.62x 很是接近理想的 @2.46x，使得一樣的素材在真機上看起來尺寸也很是合理：算法

其餘：xcode

代碼中的尺寸不要使用480、460這樣的絕對數值，使用的UIScreen取設備的尺寸。app

開啓適配？(手動/自動)

在某機型上，若是是自動適配，好比iPhone 5，老版程序就會在屏幕上、下倆端多出倆塊黑條；好比iPhone6/6plus，老版程序就會自動等比拉伸。那如何關閉自動適配？iphone

指定啓動圖(例如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的場景，導出成大圖片，再進行縮小，這樣就容易失真。

其餘：

--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的話，會有一堆警告，高度上面不作約束，自動變化調節不出來；若是高度上也作了約束，那麼就不是在一個方向上適配的前提了。