iPhone 開發(fā)中的屏幕適配問題總結(jié)
前言
隨著iPhone的屏幕越來越多，各種尺寸讓開發(fā)也需要跟Android一樣，要做屏幕適配了。在開發(fā)過程中，跟設(shè)計師經(jīng)常因為調(diào)整像素而爭吵。為了解決這種問題，我寫下此文，讓開發(fā)跟設(shè)計可以歡樂的做朋友了。
此文將從以下幾個方面出發(fā)，解決問題。
iPhone的幾種屏幕
iPhone屏幕中的概念
設(shè)計稿到代碼的過程
結(jié)合設(shè)計原則給出具體的實現(xiàn)方案
iPhone的幾種屏幕
以上兩張圖完全介紹了現(xiàn)在所有的iPhone的屏幕。包括即將出現(xiàn)的iphone se它也是4寸屏。
從第一張圖中發(fā)現(xiàn)，只有6p是3x的圖，其余屏幕都是2x圖。再次解釋一下為什么6p是3x圖。因為6p的實際像素是1080 * 1920. 1080 / 414 = 2.6。 但是讓設(shè)計出一張2.6x的圖，那豈不是要瘋了。所以，蘋果為了方面開發(fā)者，做出了3x的標(biāo)準(zhǔn)。然后蘋果會自動給你縮放。詳見第二張圖。
iPhone屏幕中的概念
-
point（點）
這個點是一個邏輯概念，是脫離屏幕而存在的。開發(fā)在寫代碼的時候，就用point來確定位置。
在2x模式下， 1point = 2pixel。
在3x模式下， 1point = 3pixel。
-
pixel （像素）
像素是顯示成像的最小單位。個人理解。
設(shè)計給的圖的標(biāo)注，都是按照像素標(biāo)的。 -
ppi （pixel per inch）
解釋一下就是每英寸的像素數(shù)量。ppi越高，說明屏幕越精細(xì)。
-
inch
其實這個概念是最好理解的。直譯就是英寸。是屏幕的物理單位。但是
這個確是肉眼最直觀的單位，上面說的3種概念，你都不能用肉眼看出來。例如，他說靠左了，那么它的參照物一定是整個屏幕的，這種直觀的感覺都可以統(tǒng)一到屏幕的實際大小上來。而且，設(shè)計在拿著手機(jī)看效果的時候，給他直觀的感覺也是以inch論的。1 inch = 2.54cm
設(shè)計稿到代碼的過程
設(shè)計稿 --->代碼
從一個完整的設(shè)計稿，到代碼。我們需要以下兩種元素的具體標(biāo)注。
-
圖
其實圖片，我們需要設(shè)計給出對應(yīng)屏幕模式的圖片。2x的，需要在正常像素基礎(chǔ)上乘以2。 3x的，需要在正常像素基礎(chǔ)上乘以3。
-
frame，間距
各種元素間需要間距，元素自身需要frame。設(shè)計給的稿的標(biāo)注一般都是按照像素標(biāo)注的。而在蘋果中的單位是point。所以我們要進(jìn)行一次換算。如果設(shè)計按照2x模式給的標(biāo)注。那么我們在用的時候就要除以2。按照3x（6p）模式給的標(biāo)注，那我們得除3，得出相應(yīng)的point然后再寫入代碼。
理想狀態(tài)是設(shè)計針對各種模式（2x ， 3x），各種屏幕（3.5，4，4.7，5.5）分別做出設(shè)計稿。這樣就完美了。其實這種方案不僅僅給設(shè)計帶來的大量的工作量，而對開發(fā)也帶來了很大的工作量?，F(xiàn)在基本的做法都是，設(shè)計會針對一種主流的屏幕給出設(shè)計稿，然后開發(fā)按照上面的說換算完畢后，進(jìn)行編碼。在然后根據(jù)具體運行效果做出微調(diào)。其實在開發(fā)過程中，這些微調(diào)是最耗費工時的。
問題來源，設(shè)計會根據(jù)看到的實際運行效果進(jìn)行微調(diào)。
那么微調(diào)，是靠什么感知的呢？當(dāng)然是肉眼觀察。當(dāng)然，設(shè)計的眼睛都可以達(dá)到像素級。不過，他們靠的還是感知。
下面我舉一個例子：
在屏幕兩個View間距10point。那么這個10point，在2x與3x下究竟會不會有很大差別呢？
按照常理推斷。10point 在2x下對應(yīng) 20 pixel。在3x 對應(yīng)30 pixel。 這樣對比的話那簡直差別太大了。
其實如果代碼里寫就是10，不針對2x，3x做區(qū)分。那他的效果是啥樣的。
既然設(shè)計靠肉眼去看，那么咱們就統(tǒng)一換算乘inch，這種最接近肉眼的單位。
2x：
10 * 2 / 326 = 0.061
3x:
10 * 3 / 1.15 * 401 = 0.065 (1.15是上面蘋果給你縮放的倍數(shù))
綜上例子說明，同樣10p ， 在肉眼看起來其實沒有多大差別。
結(jié)合設(shè)計原則給出具體的實現(xiàn)方案
在上面已經(jīng)提到了，如果設(shè)計針對2x給的標(biāo)注，你完全可以用在3x模式下，基本看不出來。但是這里面有一個潛在的問題。
我把設(shè)計的排版布局總結(jié)為：
橫向直排；也就是從左到右進(jìn)行布局。
兩頭擠；也就是先定死兩邊的間距，然后往中間布局元素。
如果設(shè)計給的圖是從左向右的布局，只是看兩者間距。按照上述是沒有問題的。
但是，如果設(shè)計是從兩頭往中間布局，先定死2邊間距，然后再按照屏幕的寬適當(dāng)調(diào)整元素間布局，這樣就麻煩了。因為元素的個數(shù)是定死的，屏幕的寬是不一樣的。這就導(dǎo)致了不同的屏幕寬度，元素的間距或者元素大小就要做適配了。
如果真的出現(xiàn)了從兩頭往中間布局的設(shè)計方案，就應(yīng)該使用autolayout了。把元素的位置根據(jù)屏幕比例定死。比如3個元素，第一個元素就在屏幕的1/3處，第二個就在3/4,第三個就在4/5，這樣，這些定死了。他們的間距就相應(yīng)的定死了。這樣的結(jié)果是，各種屏幕元素間的間距肯定是不一樣的。所以，這個要跟設(shè)計在實際過程中探討他們的設(shè)計方案。優(yōu)先選用橫向直排。其實選用兩頭擠。
在插一句，其實屏幕大了，應(yīng)該是在能看清的前提下，一行多放點元素。而不是說各種屏幕都放同樣多的元素。
比如說：
3.5inch 放10個元素
4inch 也放10個
5.5inch 也放10個
這種，我感覺應(yīng)該是不合理的。5.5inch就應(yīng)該放20個，或者更多。
