(13)[Xamarin.Android] 不一樣分辨率下的圖片使用概論

時間 2019-11-16

標籤 xamarin.android xamarin android 不一樣分辨率圖片使用概論欄目 Android 简体版

原文原文鏈接

設計Android App的時候，其尺寸衆多也是一個挑戰之一。要針對不一樣尺寸設計Android App時，就要先來了一下dpi(dots per inch,每一英吋的點數量) 與ppi(pixel per square inch,每平方英吋的像素量)計算方式。這一篇研究就來討論一下在設計Android APP，如何因應不一樣的尺寸來做呈現。java

首先dpi的定義是指每一英吋下，有多少像素(pixel)。

舉例來講，若是個人屏幕分辨率設定成800X600pixel(72dpi)，72dpi的意思就是每個英吋裏面有72個像素(pixel)。因此先把屏幕分辨率換算成英吋，(800/72)X(600/72)pixel = 11.1X8.3(英吋)。

屏幕的尺寸是如何計算公式

目前屏幕的尺吋是根據對角線的長度來定義。因此套用到數學勾股定理的對角線計算公式就是 [長平方＋寬平方=斜邊平方]。

ppi計算公式(pixel per square inch,每平方英吋的像素量)

ppi = √長度像素平方＋寬度像素平方÷屏幕尺寸

接下來參考一下Android官方網站提供的分辨率尺寸對照圖表，這是Android Device不一樣分辨率對應到所存取的資源列表。

以分辨率240x320的手機來講，若在APP開發中有針對低分辨率的Device製做低分辨率的圖片，則系統就會使用Low density的圖片。
＊假設有一隻屏幕規格爲3吋而分辨率爲(240X320)的手機，那咱們就能夠推算出它的ppi值， √240⌃2+320⌃2/3=133，因此咱們能夠獲得這個手機的ppi值是133。

Android會自動根據你的手機尺寸來決定要用的圖檔是哪個。

在設計支持多尺寸的App時，能夠設計讓Android手機依照分辨率的不一樣來存取不一樣的資源。在Android項目中，圖片資源是被放在Drawable文件夾下。而咱們能夠依據不一樣的分辨率需求來製做相對應的圖片資源，讓Android裝置去讀取適合他的圖片資源。在Android 項目中Resource下的文件夾結構有下列幾個文件夾，分別是[drawable-ldpi]，[drawable-mdpi]，[drawable-hdpi] ，[drawable-xhdpi] 。這幾個文件夾是用來放置不一樣分辨率所相對應的圖片資源文件。

再來看到這些圖片的比較基準。若是咱們把放在mdpi文件夾下的圖片當作基準，假設這個圖片的比例是1的話。則存放在ldpi裏面裏的圖片檔案相對比例就是0.75x。而hdpi的相對應檔案就是1.5x，以此類推。
res/drawable-mdpi/my_icon.png // bitmap for medium density
res/drawable-hdpi/my_icon.png // bitmap for high density
res/drawable-xhdpi/my_icon.png // bitmap for extra high density

以Android官方網站提供的這個圖表來看，能夠提供下列的比例參照方式去換算在製做圖檔時應該注意的尺寸比例。
36x36 for low-density
48x48 for medium-density
72x72 for high-density
96x96 for extra high-density

瞭解Android如何判斷目前Device該用哪個文件夾裏面資源的方式

得知目前Device上的Density。Density數值是Android Device用來判斷它該用哪個文件夾下的資源。能夠用底下方法列出目前Device的Density值。

var dp = Resources.DisplayMetrics.Density;android

Console.WriteLine ("density = "+ dp);架構

原生的java會是這樣寫

float scale = getApplicationContext().getResources().getDisplayMetrics().density;app

下方式列出來的Density值對應到所參照的資源取用依據。
0.75 means low density
1.0 means standard (medium) density
1.5 means high (large) density
2.0 means extra high density

除了圖片文件外，layout下的檔案也是能夠依照分辨率的不一樣來作區分

在Android架構中負責顯示layout的View畫面能夠依據不一樣的分辨率來作不一樣的呈現。參考下方，Android有定義不一樣分辨率對應到的layout尺吋，以及這個尺寸該被放在哪一個相對應的文件夾下。

res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-small/my_layout.xml // layout for small screen size
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

在AndroidManifest檔案新增支持不一樣分辨率Device的XML語法。

〈supports-screens android:resizeable=["true"| "false"]ide

android:smallScreens=["true" | "false"]工具

android:normalScreens=["true" | "false"]測試

android:largeScreens=["true" | "false"]網站

android:xlargeScreens=["true" | "false"]ui

android:anyDensity=["true" | "false"]

android:requiresSmallestWidthDp="integer"

android:compatibleWidthLimitDp="integer"

android:largestWidthLimitDp="integer"/>

在Xamarin studio中針對不一樣的分辨率來創建相對應的View畫面。

Xamarin Studio的Android項目，在Layout設計工具中，在設計畫面的左上角，能夠針對不一樣的分辨率尺吋新增Layout中的View畫面。而後能夠經由點選預設的一些尺寸對應來mapping到不一樣分辨率的畫面設計。

在編輯畫面左邊按下[Mulit-edit]，這三個Layout畫面會被連結起來，假如你拖拉一個Button進到其中一個畫面裏面，三個Layout都會自動新增起一個button控件。這樣實在滿方便的。

當你編譯這個項目的時候，能夠看到Xamarin自動幫你創建出不一樣layout畫面下的Main.axml檔案。

依照不一樣的分辨率來放置圖片資源文件

在Android的系統規範下，不一樣分辨率的Device會自動存取適合本身分辨率的圖片資源，因此在設計圖片檔案的時候，就須要針對不一樣的分辨率來設計圖片。而這些圖片資源必須以相同的文件名存在於不一樣的相對應的文件夾，這樣在Android執行你的App的時候，會自動在相對應的路徑下去存取適合他的圖片。

在不一樣的分辨率下，這邊我新增了三個主要的控件，兩個文字卷標以及一個Imageview。

1.第一個文字卷標上面會在不一樣的View上顯示[手機]，[平板]，[大平板]用來分辨咱們如今到底加載了那一個Layout進來。

2.第二個文字卷標是要顯示出目前Device的Density，來看看Android目前判斷出來的Device Density值。

3.而ImageView是用來加載圖片，這裏Android系統會依據不一樣的Device分辨率來加載相對應的圖片。

新增程序到對應layout的Activtiy

雖然這邊有三個不一樣的layout來對應不一樣分辨率的Device，可是實際上，這三個Layout的名稱都叫作Main.axml。而且裏面的控制相名稱也都相同，這樣你並不須要用程序來爲不一樣的Layout作判斷，這部分的設計還真是很不錯。因此能夠看到底下的程序，在讀取圖片檔案到imageview的時候，這邊不須要在程序上作任何判斷。Ａndroid會依照Device的分辨率來選擇最適合它的圖片資源。

在Genymotion仿真器中創建了創建三個不一樣分辨率的Android Device 與個人實機一塊兒來測試。

這四個不一樣分辨率與尺寸的設備分別以下

- 分辨率(480x800,240dpi )的Nexus One。

- 分辨率(1024x600,160dpi)的WSVGA 7.0 Tablet。

- 分辨率(1024x800,160dpi)的WXGA 10.1 Tablet。

- 分辨率(1080x1776,480dpi)的Htc new one實機。

編譯程序

在WXGA 10.1 Tablet的仿真器上，因爲它的分辨率是1280x800，因此係統會自動抓到適合他的layout。在圖片資源的部分，這個仿真器的dpi是160，因此這邊會抓到存放於mdpi裏面的圖片檔案。

在Nexus One的仿真器上，雖然它的分辨率是480x800，可是它的dpi值爲240，因此在圖片資源的部分，它是自動抓取Ldpi文件夾裏面的圖片。

在個人手機上實測這支APP，我手機的分辨率是1080x1776，而dpi值是480，因此在這個裝置上，他會取得xhdpi文件夾裏面的圖片支持。

最後在這邊下一個結論

Android在判斷該存取哪個layout中的View以及那一個文件夾中的圖片資源，並非單單由屏幕尺寸來判斷。Android實際在判斷時會依據你的屏幕分辨率還有dpi值來作判斷。而分辨率影響的是會從那一個Layout取出相對應的View顯示在裝置的畫面上。而dpi值決定着Android會去哪個文件夾裏面取用資源。

參考信息