前言

作為一個移動端開發(fā)者,切圖方面的知識我們還是需要了解滴.雖然不了解這方面的知識 也可以對照設(shè)計(jì)給的標(biāo)注圖而寫出界面,但是要做好適配,或者在設(shè)計(jì)給的圖標(biāo)注不清楚的情況下也能寫好美觀界面,我們必須了解標(biāo)注圖相關(guān)的姿勢.
當(dāng)然網(wǎng)絡(luò)上有很多相關(guān)的博客 例如:
一款A(yù)PP，從設(shè)計(jì)稿到切圖 ,
Android開發(fā)：最全面、最易懂的Android屏幕適配解決方案
支持多種屏幕谷歌官方
android版本 谷歌官方

一. 基礎(chǔ)概念

ps:概念一定要搞清楚,要不然后面白看.

手機(jī)分辨率：

分辨率就是手機(jī)屏幕的像素點(diǎn)數(shù),比如1080*1920. 寬有1080個像素點(diǎn),長有1920個像素點(diǎn).通過這寫像素點(diǎn)來顯示文字或者圖像.
通常說手機(jī)是5寸,5.5寸,是指手機(jī)屏幕的對角線的長度.如下圖,就是分辨率為1080P的5.0寸手機(jī)

dpi: 每英寸的像素點(diǎn)數(shù)

注意 "每英寸" 英寸是個長度單位. 谷歌規(guī)定標(biāo)準(zhǔn)的dpi是160,也就是說如果每英寸的長度上面有160個像素點(diǎn)的屏幕 才是一個標(biāo)準(zhǔn)的屏幕,為什么是160呢???? 原來 第一款A(yù)ndroid設(shè)備（HTC的T-Mobile G1）是屬于160dpi的。 當(dāng)時谷歌就是以這個手機(jī)的屏幕做范本的.

怎么計(jì)算每個屏幕的dpi呢?公式如下

htc G1 的屏幕尺寸 為 3.2英寸 分辨率320×480,大家可以自己算一下, 看是不是160.

dip: 像素密度 Density-independent pixel

160dpi的手機(jī) 1dip=1px。 具體公式 1dp=（屏幕dpi/ 160）px
先看下面這個表格

剛剛說了 在160dpi的屏幕上面1dp=1px 以此類推,在320dpi的屏幕上面(也就是在上圖720p的屏幕上面)1dp=2px. 對了 剛剛說的dip 和dp 是同一個概念,不信你去xml里面敲敲看.

疑惑

看了上面的圖 可能有童鞋 就困惑了. 為什么720p的手機(jī) 就是320dpi呢, 因?yàn)橥瑯臃直媛实氖謾C(jī),它的密度數(shù)是隨著手機(jī)尺寸的變大而變小的啊. 其實(shí)上面的 密度數(shù)和分辨率相對應(yīng)的值 是谷歌規(guī)定的一個規(guī)范值而已.這個值主要是要給設(shè)計(jì)人員看的. 設(shè)計(jì)人員做底圖的時候就得按照這個對應(yīng)值來,比如下圖PS 新建圖

紅框里面的寬度高度對應(yīng)手機(jī)的寬高,分辨率對應(yīng)的就是上面表中的密度數(shù). 比如設(shè)計(jì)現(xiàn)在要用720p的手機(jī)尺寸當(dāng)設(shè)計(jì)底圖,那么他就應(yīng)該在分辨率中填寫320.

二. 一張重要的表格

紅色的對應(yīng)關(guān)系 我覺得是最重要的,哪怕前面概念都不了解,記著這張圖就可以了.
比如: 在底圖為1080*1920上面,設(shè)計(jì)畫了一個按鈕的寬度為60px.他可能是個新手設(shè)計(jì),他直接標(biāo)注60px. 但是我們android用的單位是dp啊.腫么辦? 答案: 直接60除3 等于20dp(因?yàn)樵谶@種尺寸下,1dp=3px). 我們寫代碼的時候就寫20dp就好了.

三. 實(shí)際工作切圖

可能有童鞋又疑惑了, 如果底圖用1080乘1920, 設(shè)計(jì)畫了一個50dp的按鈕咋搞? 50除3 除不盡啊 啊啊啊.... 所以,一般設(shè)計(jì)是不會以1080p來作為底圖的, 一般如果只是一個做android的公司,就會用720p大小的底圖.因?yàn)槲覀円褕D上標(biāo)注的px直接換成dp的話 直接除2就好了.也不會發(fā)生除不盡的情況.
但是如果公司有ios和android呢?
設(shè)計(jì)會出兩套底圖嗎? 因?yàn)閕os和android的屏幕大小 有差異. 答案是否定的. 一般設(shè)計(jì)會用ios的 750 乘 1334 屏幕尺寸為4.7(iPhone 6) 尺寸. 為什么會用這套圖呢? 因?yàn)樗南袼孛芏群?20p的android屏幕是差不多的, 也是320dpi, 并且尺寸與android720p的差不多,所以在iPhone6為底圖的設(shè)計(jì)圖上標(biāo)注的px大小 除以2 就等于 我們android需要的dp值.

四.工作小技巧

Paste_Image.png

通過這兩張圖可以看出,如果地圖是用的750乘1334 的 則.xhdp的切圖尺寸和設(shè)計(jì)圖上面的是一樣大小的. 我們轉(zhuǎn)換成android的尺寸就是24dp乘24dp. 在設(shè)計(jì)忘記標(biāo)注圖標(biāo)尺寸時,我們直接拿xhdp的圖的px值除以2就可以了.

五.屏幕適配

很多人肯定很郁悶為毛在小屏幕上面會出現(xiàn)兩個按鈕重疊呢?(水平方向兩個按鈕).我們用的是dp啊 啊 啊啊
可以注意看下圖

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png