iOS:(接口適配器3)--iPhone適應不一樣型號 6/6plus 前

時間 2019-11-12

標籤 ios 接口適配器 iphone 適應不一樣型號 6plus 欄目 iOS 简体版

原文原文鏈接

對於不一樣的蘋果設備。檢查每一個參數《iOS:機型參數、sdk、xcode各版本號》。php

機型變化

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

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

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

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個像素。github

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 都不太行得通，怎麼辦？

引用一段文字說的很是好：算法

「不是現有的屏幕物理分辨率明顯超過了 @2x 但還達不到 @3x 的水平麼？那咱們歪歪一個知足 @3x 的屏幕總可以吧？
對的。歪歪。
程序在 iPhone 6 Plus 上執行的時候，iOS 會騙它說，你執行在一個超大的 @3x Retina 顯示屏上，物理分辨率高達 1242 x 2208，邏輯分辨率是 414 x 736，二者都比 iPhone 6 要大。而後做爲設計師和開發者，也跟着一塊兒歪歪。設計師繪圖的時候要把屏幕當成 1242 x 2208 來繪圖（而且要提供@3x 的高清圖），開發者也依照 414 x 736 的邏輯分辨率來敲代碼。
但借來的總要還的。xcode

等我們歪歪結束了之後。iOS 拿到這個假大的 UI 繪製結果。實時地再縮小到實際的 1080 x 1920 分辨率(系統經過某種算法)。因而，用戶在 iPhone 6 Plus 的屏幕上看到的永遠是被縮小了的圖像：app

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

其它：工具

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

開啓適配？(手動/本身主動)

在某機型上，假設是本身主動適配，比方iPhone 5，老版程序就會在屏幕上、下倆端多出倆塊黑條；比方iPhone6/6plus。老版程序就會本身主動等比拉伸。那怎樣關閉本身主動適配？

指定啓動圖(好比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個點的button。
就創建一個44 x 66的場景。
以後再導出成2倍圖，3倍圖，因爲矢量放大不失真。不要創建一個3x的場景，導出成大圖片，再進行縮小，這樣就easy失真。

其它：

--1.假如是那種導航欄。工具欄之類的背景圖，需要橫跨整個屏幕。可以僅僅切一小塊，讓程序拉伸，拉伸方式是保持兩邊的像素不動，僅僅拉伸最中間的一列像素。

需要拉伸的話，橫方向就不要出現一些漸變色。
--2.button的點擊區域，不該該少於44pt(過小不易點中)。就算button的圖片看起來比較小，也應該使得點button周圍的透明區也有反應。

實際操做方案：

下面是我的觀點，有沒有更好的或者不正確的。有待驗證、提高。

方案(1)：
效果：(高)各視圖、button、cell、bar高度。高度間距固定(座標)。不一樣屏幕高度顯示的cell多少不一樣。各bar。btn離屏幕頂部。或者佔屏幕底部位置不變；(寬)各視圖、button、cell、bar的寬度隨屏幕大小變化而變化。

實現方法：
(高)：代碼中用#define定義各控件高度，xib中直接寫死各控件高度。父視圖用ScreenHeight調節高度。
(寬)：
1.代碼中各控件寬度用效果圖裏「控件寬度/圖寬度.00」這個比例x，x*ScrrenWeight計算控件的寬度，父視圖用ScrrenWeight調節；
2.xib中使用autoRisizing約束寬度；父視圖代碼中用ScrrenWeight調節寬度。
方案(2):
效果：各視圖、button、cell、bar寬高隨着不一樣屏幕大小，合適縮放。

實現方法：
1.高度適配參考上文中寬度適配；
2.代碼中手寫Autolayout的約束條件，NSLayoutConstraint相關類或者xib中使用AutoLayout。父視圖用ScrrenSize調節寬度。
說明：
1.(對於控制器建立完，不一樣屏幕控制器xib初始大小爲多少，是屏幕大小仍是xib設置的某個大小，未研究過，不知道，在代碼中用ScrrenSize調節保險)。
2.對於高度固定，僅僅是在寬度一個方向作適配的話，假設用Autolayout的話，會有一堆警告，高度上面不作約束，本身主動變化調節不出來；假設高度上也作了約束，那麼就不是在一個方向上適配的前提了。