(13)[Xamarin.Android] 不同分辨率下的图片使用概论

原文 [Xamarin.Android] 不同分辨率下的图片使用概论

设计Android App的时候，其尺寸众多也是一个挑战之一。要针对不同尺寸设计Android App时，就要先来了一下dpi(dots per inch,每一英吋的点数量) 与ppi(pixel per square inch,每平方英吋的像素量)计算方式。这一篇研究就来讨论一下在设计Android APP，如何因应不同的尺寸来作呈现。

首先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;

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

原生的java会是这样写

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

下方式列出来的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"]

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

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

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

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

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会去哪一个文件夹里面取用资源。

参考信息

• supports-screenssupports-screens
  http://developer.android.com/guide/topics/manifest/supports-screens-element.html
• Devices and Displays
  http://developer.android.com/design/style/devices-displays.html
• Supporting Multiple Screens
  http://developer.android.com/guide/practices/screens_support.html
• Devices and Displays
  http://developer.android.com/design/style/devices-displays.html
• Part 4 - Creating Resources for Varying Screens
  http://docs.xamarin.com/guides/android/application_fundamentals/resources_in_android/part_4_-_creating_resources_for_varying_screens/
• List of displays by pixel density
  http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density