Android屏幕适配全攻略(最权威的官方适配指导)

转载请注明出处：http://blog.csdn.net/zhaokaiqiang1992

Android的屏幕适配一直以来都在折磨着我们这些开发者，本篇文章以Google的官方文档为基础，全面而深入的讲解了Android屏幕适配的原因、重要概念、解决方案及最佳实践，我相信如果你能认真的学习本文，对于Android的屏幕适配，你将有所收获！

• Android屏幕适配出现的原因
• 重要概念
  • 屏幕尺寸
  • 屏幕分辨率
  • 屏幕像素密度
  • dpdipdpisppx
  • mdpihdpixdpixxdpi
• 解决方案
  • 支持各种屏幕尺寸
    • 使用wrap_contentmatch_parentweight
    • 使用相对布局禁用绝对布局
    • 使用限定符
      • 使用尺寸限定符
      • 使用最小宽度限定符
      • 使用布局别名
      • 使用屏幕方向限定符
      • 使用自动拉伸位图
  • 支持各种屏幕密度
    • 使用非密度制约像素
    • 提供备用位图
  • 实施自适应用户界面流程
    • 确定当前布局
    • 根据当前布局做出响应
    • 重复使用其他活动中的片段
    • 处理屏幕配置变化
  • 最佳实践
    • 关于高清设计图尺寸
    • ImageView的ScaleType属性
    • 动态设置
  • 更多参考资料

Android屏幕适配出现的原因

在我们学习如何进行屏幕适配之前，我们需要先了解下为什么Android需要进行屏幕适配。

由于Android系统的开放性，任何用户、开发者、OEM厂商、运营商都可以对Android进行定制，修改成他们想要的样子。

但是这种“碎片化”到底到达什么程度呢？

在2012年，OpenSignalMaps（以下简称OSM）发布了第一份Android碎片化报告，统计数据表明，

• 2012年，支持Android的设备共有3997种。
• 2013年，支持Android的设备共有11868种。
• 2014年，支持Android的设备共有18796种。

下面这张图片所显示的内容足以充分说明当今Android系统碎片化问题的严重性，因为该图片中的每一个矩形都代表着一种Android设备。

而随着支持Android系统的设备(手机、平板、电视、手表)的增多，设备碎片化、品牌碎片化、系统碎片化、传感器碎片化和屏幕碎片化的程度也在不断地加深。而我们今天要探讨的，则是对我们开发影响比较大的——屏幕的碎片化。

下面这张图是Android屏幕尺寸的示意图，在这张图里面，蓝色矩形的大小代表不同尺寸，颜色深浅则代表所占百分比的大小。

而与之相对应的，则是下面这张图。这张图显示了IOS设备所需要进行适配的屏幕尺寸和占比。

当然，这张图片只是4,4s,5,5c,5s和平板的尺寸，现在还应该加上新推出的iphone6和plus，但是和Android的屏幕碎片化程度相比而言，还是差的太远。

详细的统计数据请到这里查看

现在你应该很清楚为什么要对Android的屏幕进行适配了吧？屏幕尺寸这么多，为了让我们开发的程序能够比较美观的显示在不同尺寸、分辨率、像素密度(这些概念我会在下面详细讲解)的设备上，那就要在开发的过程中进行处理，至于如何去进行处理，这就是我们今天的主题了。

但是在开始进入主题之前，我们再来探讨一件事情，那就是Android设备的屏幕尺寸，从几寸的智能手机，到10寸的平板电脑，再到几十寸的数字电视，我们应该适配哪些设备呢？

其实这个问题不应该这么考虑，因为对于具有相同像素密度的设备来说，像素越高，尺寸就越大，所以我们可以换个思路，将问题从单纯的尺寸大小转换到像素大小和像素密度的角度来。

下图是2014年初，友盟统计的占比5%以上的6个主流分辨率，可以看出，占比最高的是480*800，320*480的设备竟然也占据了很大比例，但是和半年前的数据相比较，中低分辨率(320*480、480*800)的比例在减少，而中高分辨率的比例则在不断地增加。虽然每个分辨率所占的比例在变化，但是总的趋势没变，还是这六种，只是分辨率在不断地提高。

所以说，我们只要尽量适配这几种分辨率，就可以在大部分的手机上正常运行了。

当然了，这只是手机的适配，对于平板设备(电视也可以看做是平板)，我们还需要一些其他的处理。

好了，到目前为止，我们已经弄清楚了Android开发为什么要进行适配，以及我们应该适配哪些对象，接下来，终于进入我们的正题了！

首先，我们先要学习几个重要的概念。

重要概念

什么是屏幕尺寸、屏幕分辨率、屏幕像素密度？
什么是dp、dip、dpi、sp、px？他们之间的关系是什么？
什么是mdpi、hdpi、xdpi、xxdpi？如何计算和区分？

在下面的内容中我们将介绍这些概念。

屏幕尺寸

屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

屏幕分辨率

屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素，如1960*1080。

屏幕像素密度

屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

dp、dip、dpi、sp、px

px我们应该是比较熟悉的，前面的分辨率就是用的像素为单位，大多数情况下，比如UI设计、Android原生API都会以px作为统一的计量单位，像是获取屏幕宽高等。

dip和dp是一个意思，都是Density Independent Pixels的缩写，即密度无关像素，上面我们说过，dpi是屏幕像素密度，假如一英寸里面有160个像素，这个屏幕的像素密度就是160dpi，那么在这种情况下，dp和px如何换算呢？在Android中，规定以160dpi为基准，1dip=1px，如果密度是320dpi，则1dip=2px，以此类推。

假如同样都是画一条320px的线，在480*800分辨率手机上显示为2/3屏幕宽度，在320*480的手机上则占满了全屏，如果使用dp为单位，在这两种分辨率下，160dp都显示为屏幕一般的长度。这也是为什么在Android开发中，写布局的时候要尽量使用dp而不是px的原因。

而sp，即scale-independent pixels，与dp类似，但是可以根据文字大小首选项进行放缩，是设置字体大小的御用单位。

mdpi、hdpi、xdpi、xxdpi

其实之前还有个ldpi，但是随着移动设备配置的不断升级，这个像素密度的设备已经很罕见了，所在现在适配时不需考虑。

mdpi、hdpi、xdpi、xxdpi用来修饰Android中的drawable文件夹及values文件夹，用来区分不同像素密度下的图片和dimen值。

那么如何区分呢？Google官方指定按照下列标准进行区分：

名称像素密度范围mdpi120dpi~160dpihdpi160dpi~240dpixhdpi240dpi~320dpixxhdpi320dpi~480dpixxxhdpi480dpi~640dpi

在进行开发的时候，我们需要把合适大小的图片放在合适的文件夹里面。下面以图标设计为例进行介绍。

在设计图标时，对于五种主流的像素密度（MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI）应按照 2:3:4:6:8 的比例进行缩放。例如，一个启动图标的尺寸为48x48 dp，这表示在 MDPI 的屏幕上其实际尺寸应为 48x48 px，在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72x72 px)，在 XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96x96 px)，依此类推。

虽然 Android 也支持低像素密度 (LDPI) 的屏幕，但无需为此费神，系统会自动将 HDPI 尺寸的图标缩小到 1/2 进行匹配。

下图为图标的各个屏幕密度的对应尺寸

屏幕密度图标尺寸mdpi48x48pxhdpi72x72pxxhdpi96x96pxxxhdpi144x144pxxxxhdpi192x192px

解决方案

支持各种屏幕尺寸

使用wrap_content、match_parent、weight

要确保布局的灵活性并适应各种尺寸的屏幕，应使用 “wrap_content” 和 “match_parent” 控制某些视图组件的宽度和高度。

使用 “wrap_content”，系统就会将视图的宽度或高度设置成所需的最小尺寸以适应视图中的内容，而 “match_parent”（在低于 API 级别 8 的级别中称为 “fill_parent”）则会展开组件以匹配其父视图的尺寸。

如果使用 “wrap_content” 和 “match_parent” 尺寸值而不是硬编码的尺寸，视图就会相应地仅使用自身所需的空间或展开以填满可用空间。此方法可让布局正确适应各种屏幕尺寸和屏幕方向。

下面是一段示例代码

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>                  <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/linearLayout1"</span>                    <span class="hljs-attribute">android:gravity</span>=<span class="hljs-value">"center"</span>                  <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"50dp"</span>></span>        <span class="hljs-tag"><<span class="hljs-title">ImageView</span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/imageView1"</span>                   <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>                   <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>                   <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/logo"</span>                   <span class="hljs-attribute">android:paddingRight</span>=<span class="hljs-value">"30dp"</span>                   <span class="hljs-attribute">android:layout_gravity</span>=<span class="hljs-value">"left"</span>                   <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"0"</span> /></span>        <span class="hljs-tag"><<span class="hljs-title">View</span> <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>              <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/view1"</span>              <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>              <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"1"</span> /></span>        <span class="hljs-tag"><<span class="hljs-title">Button</span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/categorybutton"</span>                <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@drawable/button_bg"</span>                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>                <span class="hljs-attribute">android:layout_weight</span>=<span class="hljs-value">"0"</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"120dp"</span>                <span class="hljs-attribute">style</span>=<span class="hljs-value">"@style/CategoryButtonStyle"</span>/></span>    <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>    <span class="hljs-tag"><<span class="hljs-title">fragment</span> <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/headlines"</span>              <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"fill_parent"</span>              <span class="hljs-attribute">android:name</span>=<span class="hljs-value">"com.example.android.newsreader.HeadlinesFragment"</span>              <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span> /></span><span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li></ul>

下图是在横纵屏切换的时候的显示效果，我们可以看到这样可以很好的适配屏幕尺寸的变化。

weight是线性布局的一个独特的属性，我们可以使用这个属性来按照比例对界面进行分配，完成一些特殊的需求。

但是，我们对于这个属性的计算应该如何理解呢？

首先看下面的例子，我们在布局中这样设置我们的界面