【Android】用Studio完成多设备多分辨率的适配

最近研究了一下Android中的自动适配，加上Studio便捷的实时预览功能，总结一下如何在Android Studio中快速方便适配多种屏幕。

先来补习一下基础知识，来看几个名词解释：

分辨率：整个屏幕的像素数目，为了表示方便一般用屏幕的像素宽度（水平像素数目）乘以像素高度表示，形如1280x720，反之分辨率为1280x720的屏幕，像素宽度不一定为1280

屏幕密度：表示单位面积内的像素个数，通常用dpi为单位，即每英寸多少个像素点

px：长度单位，以具体像素为单位

dp：长度单位，与具体屏幕密度无关，显示的时候根据具体平台屏幕密度的不同最终转换为相应的像素长度，具体转换规则是: 1dp = （目标屏幕密度/标准密度）*px,标准密度为160dpi，例如，1dp长度在密度为160dpi的平台表示一个像素的长度，而在240dpi的平台则表示1.5个像素的长度

屏幕尺寸：屏幕的大小，通常用屏幕对角线的长度表示，一般单位是inch

这些是最基本的概念，懂了这些，再来看Android中是如何来定义屏幕的大小的：

屏幕尺寸分为：small,normal,large,xlarge分别表示小，中，大，超大屏

屏幕密度分为：ldpi,mdpi,hdpi,xhdpi，它们的标准值分别是：120dpi，160dpi，240dpi，320dpi

我们用一个图来直观地看一下

以上内容转自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/0627/1393.html

基本上3inch以下的归为small，而normal据我通过Studio实际操作的到的结果是：几乎3-6inch之间（不包括6inch）的都算是normal（除了个别5.x的WVGA属于Large等个例），在后面的实际操作中我们还会进一步看到。

而屏幕密度其实也是和屏幕大小相对应的，一般来说，屏幕越大的，密度也越高。如果你非得说我的6英寸的大手机，分辨率是800x600，那我的dpi也就160，那是可以的，但是那么大的屏幕，分辨率却很低，这样的设备估计也没人买单，所以，市场的主流也反映出来，屏幕密度越大，屏幕也相对来说要大一些。

好了，介绍完基础知识，我们来看如何在Studio中完成多种设备的屏幕适配。

我们打开工程默认的Layout文件夹，然后选中一个XML布局文件，然后在Studio的右上角，我们能看到列出了很多设备

我们能看到这里面有各种各样大小和密度的设备。那我们知道在实际过程中，为了适配不同的屏幕，需要设置相应的XML文件夹（layout-normal,layout-large等），这样程序在读取到相应的设备的时候，能自动去不同的文件夹中读取。如果大家没有设置，那我们的程序当前就只有一个默认的文件夹，叫做layout，来存放XML页面布局文件，当然，我们的程序也就不能适配不同大小和DPI的设备了。那我们就来创建相应的文件夹吧。

如上图中的红框所示，我们选择Create Other...

在弹出的界面中，依次点中Size 和 >>

然后我们先选择一个Normal来看一下效果吧

这个时候，在左侧的导航栏，其实多了一个文件夹layout-normal，里面自动复制了一份activity_my.xml文件，并自动选中了当前的这个文件，也就是如果我们接着编辑，就是对Normal尺寸大小的设备的activity_my.xml文件进行修改了，如果你点击右上角查看设备，会发现基本没有什么变化啊，但是其实不然，点击Generic Phones and Tablets按钮，在弹出的更多的设备中，我们能看到有两个设备前面打了x号，因为这两个设备是2.7inch的，之前我们也说过，3inch以下的设备都是small类型的。

那有同学就有疑问了，那不可能剩下的所有设备都是normal的啊？当然不是，但是因为我们现在已经对layout做了区分，但是还没有分那么细，所以Studio就默认“向下兼容”了。

我们可以接着来创见一个layout-xlarge来试验一下就ok了

我们看到Studio直接给我们提供了xlarge的菜单选项，直接点击一下就OK了。

我们看到在左侧导航栏又多出来一个文件夹 layout-xlarge，这下再来看设备列表。基本上所有的设备前面都是x了，只有少数几个8,9inch的设备被包含了进来，剩下的大部分还是处在normal文件夹中，而large的设备（6-7inch之间）因为向下兼容，换句话说，没有资格进入到xlarge文件夹中，所以还是留在了normal文件夹中。

之前我们也说过，因为3-6inch的很多设备都算是Normal的，那就很容易出现5.x英寸xxhdpi的设备和3.7英寸hdpi的设备都归到normal文件中

如上图所示，Nexus One 和Nexus6P明显设备大小差很多，但是却都属于Normal的，所以就可能出现下面的情况

如上图所示，我们添加了一个图片，图片的长宽都是300dp。

说到这里我们再回顾一下吧，基本上有个定论大家都知道：

在XML文件中控件的大小单位用dp，文字的大小单位用sp。

因为这样子可以保证在不同的设备上显示同样大小的控件；这里说的同样大小指的是控件的绝对大小，而dp单位设置的目的也就是如此。

而这样就容易出现一个问题，就是因为屏幕尺寸的不同，导致同样大小的控件在不同是屏幕下面显示的相对大小发生很大的变化。

我们还是看个实际的例子吧。

上图里面300x300dp的图片在Nexus One（3.7 inch）上面看起来比较和谐，在屏幕中间占的位置也很合适，

但是在大一点的屏幕上面呢？

我们可以发现在Nexus 6（6 inch）里面图片相对于手机来说变小了。那因为Nexus One（3.7inch）和Nexus6（6inch）都属于Normal范围之内的，我们似乎不能通过设置不同的文件夹来处理的。

事实真的是这样么？

别忘记了我们还有不同的屏幕密度可以作为区分。

让我们先清理一下layout系列文件，删除我们之前创建好的layout-normal和layout-large文件夹

用同样的方法创建新的layout文件夹，只不过这次文件夹的名字是layout-normal-ldpi

同样的方法再创建一个文件夹 layout-normal-mdpi

我们来看右侧所有设备的列表，当我们选中layout-normal-mdpi时，我们能看到有几个设备前面是x，也就是不属于这个文件夹的，而我们也能看到他们属于的文件夹的位置，图中我用两个红圈表示了出来。

因为现在layout的文件夹只有3个：一个默认的layout，一个layout-normal-mdpi还有一个是layout-normal-ldpi，那我们能看到两个2.7 inch的设备是处在默认的layout文件夹中，而两个虽说屏幕大小达到了normal，但是密度却没有达到mdpi的设备则处在了layout-normal-ldpi文件夹中。

这里同样的，屏幕密度也符合上面说的“向下兼容”的原则。因为我们还没有创建比mdpi更高的屏幕密度，所以包括hdpi，xhdpi，xxhdpi等都放在当前的mdpi文件夹下面。

让我们接着创建layout-normal-hdpi文件夹，可以看到有很多设备从mdpi中移了出来，因为当前有了更适合他们呆的地方---hdpi

最后当我们创建好layout-normal-xhdpi之后，我们发现终于，两个小屏幕但是密度是hdpi的设备 Nexus S和Nexus One终于和上面的那些同样是normal屏幕大小但是密度也大的设备分离开来了。

这样我们就能分开来调整界面了~

让我们修改layout-normal-xhdpi文件夹下面的XML页面布局文件，然后将图片的大小改为400dp，在来看一下，同样的Nexus 6 的屏幕 是不是看起来更和谐一点了？

这样基本上我们就成功实现了对多设备的支持。

总结下来：

1. Android Studio可以很方便地为我们创建多个文件夹，只需要选中想要完成多设备适配的XML文件，然后点击右上角的菜单，创建自己想要实现的屏幕大小，就OK了，文件就会自动被复制到相应的文件夹下面。

2. 在程序运行时，会自动寻找最接近当前屏幕大小分类的文件夹中的XML布局文件去显示。

所以，之后再开发的话，我的步骤是：

1. 先创建4个不同的layout文件夹  layout-small, layout-normal, layout-large, layout-large,

2. 如果在开发过程中有遇到进一步适配（不同的DPI），就另外创建新的文件夹出来，因为即便同时有layout-normal和layout-normal-hdpi文件夹，当你的设备是normal大小、高密度的屏幕时，也能自动显示layout-normal-hdpi中的XML文件，就是这么智能。

3. 虽然文中我举的例子是用图片，但是实际开发中，如果要添加的内容是图片，就要在drawable文件夹下面做出不同设备大小的分类了，然后在XML文件中设置长宽分别是wrap-content；但是我们总会遇到要填充比如第三方控件的情况，那这种类型就不适用了。

4. 尽量用RelativeLayout来完成页面的布局，这样子可以更好的做适配，相对布局在大部分情况下比绝对布局要容易很多

最后不知道同学们有没有发现，Studio除了能动态实时地显示不同的屏幕布局之外，还能够在代码区的左侧，实时地显示你的资源文件中的缩略图，就像上图中ImageView的background一样，在那一行代码的左侧，能看到一个小的缩略图，颜色也是一样，当你在代码中写入#e0e0e0这样的代码时，能自动显示出来颜色呦，有没有很舒服？

期待在使用的过程中，Studio带给我们越来越多的surprise