abstrait：由于android系統(tǒng)的開放性，以及IOS的相對封閉。第三方設備想要使用蘋果的OS，目前來說是不可能。所以，各廠商紛紛的投入了android的懷抱，android陣營也越來越強大，如今移動操作系統(tǒng)也就是android和ios的天下。也正是因為android的開放性，可定制度高，導致了各種屏幕尺寸、各種分辨率的android設備鋪滿了手機、平板、智能電視、手表、盒子、智能硬件...等各種應用場景。作

由于android系統(tǒng)的開放性，以及IOS的相對封閉。第三方設備想要使用蘋果的OS，目前來說是不可能。所以，各廠商紛紛的投入了android的懷抱，
android陣營也越來越強大，如今移動操作系統(tǒng)也就是android和ios的天下。也正是因為android的開放性，可定制度高，導致了各種屏幕尺寸、各種分辨率的android設備
鋪滿了手機、平板、智能電視、手表、盒子、智能硬件...等各種應用場景。

作為一名有逼格的程序猿，在面對如此眾多的尺寸和分辨率設備上，想要打造一款通吃的app，勢必是要花費一番功夫的。

還好google已經(jīng)為我們想好了對策，為不同的分辨率提供不同的drawable資源。

先來看看微信的android客戶端，在圖片資源的使用

在res目錄下，以drawable開頭的文件夾占了一大半，后面以-hdpi、-land、-mdpi、-xhdpi...等文件夾以適配不同分辨率的機型。

可能有人會說，開發(fā)應用只用適配hdpi或者xhdpi就可以了，同樣可以顯示出來嘛！干嘛搞這么多版本，浪費空間，還麻煩！

如果是這樣的想法，那只能說你的應用受眾群體還沒達到一定程度，或者不追求細節(jié)的完美。對于高逼格的應用來說，哪怕一個像素的缺失，都是不完美。

廢話了這么多，先來看卡google官方對dp的定義

dp是一個與屏幕密度有關系的單位，dp與像素的換算關系為 px = dp * (dpi / 160)。例如在240密度（dpi）的屏幕上一個dp等于1.5個像素。以后我們應該盡量使用dp單位布局，不要使用像素單位。這樣會使你的app屏幕兼容性更好

將同一張96x96像素的png圖片，分別放到hdpi、xhdpi、xxhdpi文件夾中，寬高均以wrap_content顯示

![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-b929ae8b-ace3-4e8d-ad2d-5cb311738b04.jpg)

可以看到，適配較低drawable-dpi的資源圖片，顯示尺寸相對較大，但是清晰度差。而適配高dpi的圖片，顯示尺寸相對較小，但是銳度高，比較清晰！

將像素分別為72x72、96x96、144x144像素的圖片，分別放置于hdpi xhdpi xxhdpi文件夾中，寬高以wrap_content顯示效果。

![](https://cscdn.maxleap.cn/2.0/download/NTgwZWMzNjA3ZWYyMGIwMDA3N2ViOGEx/zcf-bd311903-f4f9-4a40-baf5-0e8eaaf03e9d.jpg)

可以看到，不同大小的圖片，放到不同的資源文件夾下，最終在屏幕上顯示的大小居然一致！但是144x144像素對應的圖片顯示的最精致和清晰。

到這里，應該能看出圖片資源與drawable文件夾對應的關系了。即使不使用高質(zhì)量的圖片，仍然可在高分辨率的屏幕上進行對應的顯示，但是犧牲了控件顯示的精細度，屏幕dpi越高顯示越不清楚。如果一張高清晰度的照片，被放置在不恰當?shù)膁rawable下也不能準確的還原應有的尺寸和清晰度。

對比IOS對圖片的定義，2倍圖即-xhdpi密度，3倍圖即-xxhdpi密度。

所以，想要讓應用中的icon顯示的更加精致，那就需要對應的配置不同像素的圖片。

很多人在處理帶圖片的icon的時候，會指定其大小，如：

            <ImageView
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:src="@drawable/icon_hdpi" />

wrap_content可理解為包裹內(nèi)容，當控件被設置為wrap_content將會根據(jù)實際大小進行顯示。相比直接設置dip的方式，在圖片的顯示上或多或少的會存在縮放。也就會導致圖標會顯示的不夠精致。

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/voip_camerachat_xhdpi" />

下面以應用中常用的tabbar，作為對比：（以1920x1080屏幕像素截圖）

圖1

圖2

圖1中的icon統(tǒng)一被設置了固定的大小24dp，同時只在drawable-xhdpi中進行圖片的適配?？梢钥闯鰣D片被不同程度的拉伸，icon顯示較模糊。

圖2將icon的寬高均設置為wrap_content，同時在drawable-xxhdpi中進行了適配。圖2的icon銳度有所提高，因為wrap_content屬性的設置，本身icon圖片大小不同，導致icon顯示的大小不一致。所以完美的方案就是，需要UI提供尺寸均一的大圖片，適配到drawable-xxhdpi下.

相比微信的高清圖片資源，展現(xiàn)的精致效果：

SVG

Scalable Vector Graphics

在 Android 5.0（API 級別 21）及更高版本中，可定義矢量圖片，而且圖片可在不損失清晰度的情況下縮放。 只需一個資產(chǎn)文件即可創(chuàng)建一個矢量圖像，而位圖圖像則需要為每個屏幕密度提供一個資產(chǎn)文件。 如果要創(chuàng)建一個矢量圖像，在 <vector> XML 元素中定義形狀的詳情。

下列示例以定義一個矢量圖像：

在drawable文件夾下-->new-->vector Asset

可以選擇Material Icon，使用studio內(nèi)置的icon資源。這里選擇了Local SVG file，使用自己定義的svg文件。

確定保存文件的位置。svg文件會導出為xml文件：

生成的moon.xml內(nèi)容如下，path節(jié)點下的fillColor屬性，可以自定義顏色值。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="22.0"
    android:viewportWidth="22.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M16,10l0.8,-3.2L20,6l-3.2,-0.8L16,2l-0.8,3.2L12,6l3.2,0.8L16,10zM6,8c0,-2.17 0.867,-4.134 2.269,-5.575C4.634,3.581 2,6.982 2,11c0,4.971 4.029,9 9,9c4.018,0 7.419,-2.634 8.575,-6.269C18.134,15.133 16.17,16 14,16C9.582,16 6,12.418 6,8z" />
</vector>

layout中使用和普通圖片使用相同

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/moon" />

界面顯示效果：

控件的寬高可以任意以dp的方式設置，而清晰度并未受影響。

SVG除了可以用在矢量圖片上，也可以在android上用來顯示精美的動畫效果。

有時間再對svg的生成，以及使用做更詳細的介紹。