Android开发系列——实战篇5：自适应屏幕尺寸（超详细教程）

在实战篇4中构建了界面之后，在模拟器中完好的布局，在实际下载到手机上的时候，却出现了布局不协调的问题。

在模拟器Nexus6上的布局界面：

在真机HUWEI P10 Plus上的布局界面：

在真机HUAWEI matepad pro上的布局界面：

可以明显看出同一个布局界面在不同的手机屏幕上呈现的效果不同。
这是因为在用Android Studio开发APP的时候，有一个不同屏幕尺寸适配的问题，要解决这个问题，得了解Android的屏幕适配机制。

像素与屏幕

在具体进行屏幕尺寸适配之前，首先要对相关的基础知识进行了解，其中最重要也最常用的就是dp、dpi、px的概念。

• px： 像素，以具体像素为单位，是一个长度计量单位。
• dpi：点每英寸，也就是每英寸内的像素点，是一个密度单位。
• dp： 虚拟像素，是一个长度单位，用以在不同屏幕密度的设备上进行相应的具体长度的换算。具体的计算公式为：

px=dp*dpi/160，160dpi是标准密度

举个例子：1dp长度在标准密度160dpi的平台表示一个像素的长度，而在240dpi的平台则表示1.5个像素的长度。

屏幕尺寸：一般是以对角线的长度表示，单位是inch（英寸）。常见的有3.5、5.5、6.0等等。

屏幕分辨率：屏幕上显示的像素个数，单位尺寸内像素点越多，显示的图像就越清楚。
分辨率720*1280表示手机水平方向的像素为720，垂直方向为1280。常见的有480 * 800、 720 * 1280、 1080 * 1920等。

这些概念是基础知识，安卓与屏幕适配的主要有以下两个要素：

屏幕尺寸：small、normal、arge、xlarge。
分别表示小屏，中屏，大屏，超大屏45。

屏幕密度：ldpi、mdpi、hdpi、xhdpi。
标准值分别是：120dpi，160dpi，240dpi，320dpi。

如果对范围进行划分的话，大概是以下的图：

在Android studio的设备选择中可以看到不同屏幕尺寸与屏幕密度的选择

布局文件的配置

要对不同屏幕尺寸的文件进行适配，就要在res文件夹的设置不同的.xml文件，这样在遇到不同的屏幕尺寸时，Android会自动去相对应的文件夹下寻找相应的布局文件进行屏幕适配。Android Studio主要提供了一下几种不同大小的布局文件类型：

layout-small(屏幕尺寸小于3英寸左右的布局）
layout-normal(屏幕尺寸小于4.5英寸左右）
layout-large(4英寸-7英寸之间）
layout-xlarge(7-10英寸之间）

在初始工程文件中是只有一个layout文件夹的，也就导致只有一种类型的布局文件，在遇到不同大小的屏幕尺寸时不能进行自动适配。

在Android Studio的res文件夹下创建新的布局文件的流程：

右击res文件夹，点击New->Android resource directory。

Resource type中选择layout类型，然后点击下方的Size，并点击中间的右箭头。

在Size选择中选择一个Normal类型，点击OK。

此时res文件夹中就新生成了一个layout-normal文件，这个文件可以自动适配中等屏幕的尺寸。但这里有一个坑，在左侧导航栏中是看不到这个文件的，因为此时这个文件夹中没有任何文件，Android Studio会自动把空文件夹隐藏掉。这时就要点击上方的选择框进行切换，切换至Project视图，就可以在对应路径找到这个文件夹。

可以看到，此时的res文件夹下多了一个layout-normal文件夹，这个文件夹下没有任何文件。

创建新的布局文件

有了layout-normal文件夹，就需要在它下面创建新的布局文件，这样在遇到中等尺寸的屏幕，Android会自动读取layout-normal文件夹下的布局文件进行适配。

右击layout-normal文件夹，New->Layout Resource File创建文件，文件名还是activity_main。

可以看到，在layout-normal文件夹下出现了一个新的空白布局文件。

此时在这个布局文件中点击设备进行查看，可以看到small尺寸的设备已经被禁止了。

比较有意思的是，此时如果回看之前layout文件夹里的布局文件，发现它自动变成了小尺寸屏幕的布局适配。

多屏幕尺寸的适配

通过以上内容可以得知，要进行不同屏幕尺寸的适配，就只需要简历不同大小类型的布局文件，Android会自动在相应的布局文件夹下寻找布局文件对屏幕进行适配。

那么现在就可以对之前的布局文件进行不同尺寸的屏幕的适配了。

首先之前创立了一个layout-normal文件夹，此时把原先layout文件夹中的布局文件直接复制，粘贴到layout-normal文件夹下。

这样的话当遇到中尺寸的屏幕的时，安卓会自动调用layout-normal下的这个布局文件。

然后进行大尺寸屏幕的适配，按照上述方法同样创建一个新的layout文件夹，此时选择layout文件夹的尺寸为large，创建出layout-large文件夹，并复制布局文件进行布局调整。

为了适配Huawei matepad pro的屏幕尺寸10.8英寸，则需要创建一个layout-xlarge的文件夹，在该文件夹下调整布局文件。

这样的话，左侧导航栏就有了满足所有尺寸屏幕大小的布局文件。
当然，每个尺寸的布局文件还需要进行微调以适应布局。但是大致上已经完成了屏幕尺寸的适配。

可以看一下新的布局生成的APP在Huawei matepad pro真机上运行的效果。

在Huawei P10 Plus真机上的效果：

可以看到，效果比一开始好了很多。

但是在真机上运行时还有一点位置上的偏差，有些间距显得不正常，这里在模拟器中选用5.5英寸的视图编辑器，就可以优化。优化后在真机上的效果：

这里补充一个Android的UI适配机制：

UI界面在不同平台的适配受屏幕尺寸和屏幕密度影响，Android适配机制就是在资源后面添加对这两种因素的限定，通过不同的限定区分不同的平台资源，Android在使用资源的时候会优先选择满足本平台限定的资源，再找最接近条件的，再找默认（即不加限定），通过选择适合当前平台的资源来完成不同平台的适配。

这也是Android屏幕所谓的兼容性。

屏幕分密度适配

我们来看真机Huawei P10 Plus的屏幕相关参数：

再来看一下使用的Android模拟器Pixel XL（找了屏幕尺寸相同的便于比较。）

可以明显看到，两者屏幕尺寸都是相同的，但是同样的布局文件可能效果会不同，这就是屏幕密度的问题了。

有关屏幕密度的计算与解惑，这篇博客里完整详细的给出了解答。
http://www.apkbus.com/blog-719059-63176.html

了解了有关屏幕密度的知识后，就知道虽然都是5.5英寸大小，相同分辨率的屏幕，但是由于屏幕密度不同，所以对于相同分辨率的图片、按钮等等显示效果会造成大小的误差。

（当然这个例子中两者屏幕密度比较接近，所以误差不会特别明显，但实际过程中会有屏幕尺寸相同，但屏幕密度相差较大的情况。）

相同分辨率的图片面对不同屏幕密度时候，由于单位像素不同，所以图片大小不同，就像把电脑的分辨率调低，图片会变大一样，反之分辨率高，图片缩小。

要解决这个问题，一是设置多个屏幕分辨率的适配文件夹，也就是在res文件夹下创建不同类型屏幕密度的drawble文件夹，里面存放不同像素的图片。

• 36x36 (0.75x) - 低密度 (ldpi)
• 48x48（1.0x 基准）- 中密度 (mdpi)
• 72x72 (1.5x) - 高密度 (hdpi)
• 96x96 (2.0x) - 超高密度 (xhdpi)
• 144x144 (3.0x) - 超超高密度 (xxhdpi)
• 192x192 (4.0x) - 超超超高密度 (xxxhdpi)

然后，将生成的图片文件放在 res/ 下的相应子目录中，系统将根据运行应用的设备的像素密度自动选取正确的文件：

res/
  drawable-xxxhdpi/
    awesome-image.png
  drawable-xxhdpi/
    awesome-image.png
  drawable-xhdpi/
    awesome-image.png
  drawable-hdpi/
    awesome-image.png
  drawable-mdpi/
    awesome-image.png

这样在面对不同分辨率的屏幕时，Android会自动去相应文件夹下寻找对应的图片资源进行适配。

一些特殊情况：

但有的时候虽然分辨率相同，也用了dp进行设置，但是不同手机的宽度还是不一样。

这是一个比较细节的问题，最全面方法是找到市面上所有屏幕尺寸和屏幕密度的分辨率，对主流的每一种屏幕都设置相应的图片资源和布局文件，就算遇到偏僻的屏幕，由于自动适配机制的存在，会自动找到相应或者最接近的布局文件进行适配，但是总体来说还是一个比较复杂和庞大的工程。

在Android Studio的开发者文档中提到了这个问题的解决方法。

为了确保布局能够灵活地适应不同的屏幕尺寸，您应该对大多数视图组件的宽度和高度使用 “wrap_content” 和 “match_parent”，而不是硬编码的尺寸。

“wrap_content” 告知视图将尺寸设为让其能够容纳下相应内容所需的尺寸。

“match_parent” 使视图在父视图中尽可能地展开。

这些是对于相对布局Relativelayout来说的，这也是相对布局是应用比较广泛的原因。

在布局文件中的具体代码：

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />

在文档中提到的Constraintlayout布局能通过对距离的约束来自动保持一个屏幕尺寸的适应，这也是谷歌推出Constraintlauout的原因，技术的不断发展与进步的展现。
（但是在具体操作的过程中好像还是会遇到一些问题。）

最好去查阅官方文档，结合实际遇到的情况进行具体的分析。
官方文档：https://developer.android.com/training/multiscreen/screensizes

小结：

1.屏幕尺寸和屏幕密度的适配，是一个优秀的APP开发者最基本的素养。

2.在进行开发的时候，最好屏幕尺寸建立四个不同大小的layout适配文件夹，屏幕密度建立四个不同大小的drawable适配文件夹。

3.注意好像素单位的使用，尽量使用relativelayout进行布局。

4.在实际开发过程中，最好在不同屏幕尺寸和屏幕密度上进行调试，便于更直观的发现问题。