Android 屏幕适配相关解决方案

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

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

dip单位详解

Android规定一个dip的大小相当于160dpi屏幕上的一个像素，它是系统为“中等的”密度屏设定的基准密度，在不同dpi屏幕上dp对应的像素数是不同的。需要时，基于当前屏的实际密度，系统会透明地放缩dip单。dip单位根据公式像素值 = [dip*(dpi/160)](px)（其中px是单位）转化为屏幕像素。根据此公式可以计算出一个dip分别在120dpi、160dpi、240dpi、320dpi屏幕中对应的像素数分别为0.75、1、1.5、2.0，比例为3:4:6:8，如下图。因此，在不同屏幕密度上，以mdpi作为基准，对位图进行3:4:6:8比例的放缩会达到适配的效果。

图2：

dip与一般的px不太一样，它是独立于屏幕密度的。什么是独立于密度？

先来说下一般的px，如果将一个相同长宽像素的图片放在不同屏幕密度大小的屏幕中，那么，在低密度屏幕中图片会显示的很大，在高密度屏幕中则会显示的很小；但是，如果使用dip为单位的图片显示的效果则是，屏幕密度越大的手机，图片显示的像素也相应增大，这样在屏幕密度大的手机和屏幕密度小的手机上，图片看上去大小基本相同。有了上文对dip的讲解，是否对这个现象有所理解呢？

       举个例子来说一下：

现在有三个物理长宽分别为3寸、4寸，屏幕密度分别为120dpi、160dpi、240dpi的手机,则三个屏幕的分辨率分别为360px*480px、480px*640px、

将三个手机屏幕的宽分为三等份，则根据dpi的定义，三个屏幕中每等份分别容纳120px、160px、240px。现在假设有一个控件imageview 它的长宽分别为160px、160px，还有一个160px*160px的图片资源，当程序运行时，该图片在三个屏幕上会呈现以下效果：

                       在这三个屏幕上，图片占据的都是160px*160px的大小范围

如果将imageview的长宽分别改为160dip、160dip，图片将在三个屏幕上呈现以下效果:

上文提到在这三种屏幕密度下一个dip分别对应0.75px、1px、1.5px，所以在三种屏幕上该图片占据120px、160px、240px,各自占屏幕的三分之一，所以看起来是一样大的。

 

由上文可总结出Android在适配不同屏幕密度时，可以用dip作为控件的单位，视情况放缩dip单位。

当应用没有指出图片对应的控件的大小，Android是如何让图片适配不同屏幕的呢？

 

在Android2.1之前，开发应用时只有一个放图片资源的drawable文件夹，这样程序在不同屏幕密度的手机上运行时，系统只会从drawable这个文件夹下调图片资源，并且系统会默认认为这个文件夹下的所有资源是为mdpi屏幕提供的，所以在hdpi屏幕上系统会按比例将drawable下的图片扩大为原来的1.5倍，在ldpi屏幕上系统会按比例将drawable下的图片缩小为原来的0.75倍。这样会大大降低页面效果。

在Android2.1以及之后，出现了drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi。在这些文件下提供的图片大小最好是3:4:6:8:12。程序在不同的屏幕密度下运行时，会首先去符合当前屏幕密度的文件夹下找对应的资源，如果没有，系统会以最省力为前提去别的文件夹下找对应的资源并对其进行相应的缩放，如果还没有，就回去默认的drawable文件夹下找，然后按照2.1之前的规则缩放。如果还没有找到，应用就会报错或者直接crash掉了。

 

 

举个例子：现在有一个ldpi的手机屏幕，有一个应用在其上运行(假如只有ldpi、mdpi、hdpi还有drawable四个存放图片的文件夹)，并需要调用一个图片a.png（在下文中用a来代替a.png）。Android系统会经历以下流程：

注：

将hdpi中的图片大小缩小为原来的一半相比将mdpi中的图片大小缩小为原来的3/4，计算机要省力，只需进行简单地右移一位操作。所以系统在ldpi下找不到a的时候会首先去hdpi下去找。当存在xhdpi、xxhdpi时，系统会按相同的规则去调用资源。

       Drawable-ldpi 3、Drawable-mdpi  4、Drawable-hdpi  6中的3、4、6指的是同一个图片在三个文件夹下的大小之比。

 

 

 

u  总结

Android开发者在做图片适配时需要注意一下两点

1、盛放图片的控件要用dip单位来定义其长宽。

2、  最好在ldpi、mdpi、hdpi、xhdpi、xxhdpi文件夹下提供大小比例为3:4:6:8:12的图片。当然如果有质量好的.9.png图片的话，提供一个也可以。

屏幕尺寸

屏幕尺寸指屏幕的对角线的长度，单位是英寸，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，以此类推。计算公式如：px = dp * (dpi / 160)，屏幕密度越大，1dp对应 的像素点越多。 

假如同样都是画一条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官方指定按照下列标准进行区分：

名称	像素密度范围
mdpi	120dpi~160dpi
hdpi	160dpi~240dpi
xhdpi	240dpi~320dpi
xxhdpi	320dpi~480dpi
xxxhdpi	480dpi~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 进行匹配。

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

屏幕密度	图标尺寸
mdpi	48x48px
hdpi	72x72px
xhdpi	96x96px
xxhdpi	144x144px
xxxhdpi	192x192px

解决方案

支持各种屏幕尺寸

使用wrap_content、match_parent、weight

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

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

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

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

android:layout_weight的真实含义是:如果View设置了该属性并且有效，那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比。

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

我们在布局里面设置为线性布局，横向排列，然后放置两个宽度为0dp的按钮，分别设置weight为1和2，在效果图中，我们可以看到两个按钮按照1：2的宽度比例正常排列了，这也是我们经常使用到的场景，这是时候很好理解，Button1的宽度就是1/(1+2) = 1/3，Button2的宽度则是2/(1+2) = 2/3

但是假如我们的宽度不是0dp(wrap_content和0dp的效果相同)，则是match_parent呢？

下面是设置为match_parent的效果

我们可以看到，在这种情况下，占比和上面正好相反，这是怎么回事呢？说到这里，我们就不得不提一下weight的计算方法了。

android:layout_weight的真实含义是:如果View设置了该属性并且有效，那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比。

Button1的weight=1， Button2的weight=2，剩余宽度占比为1/(1+2)= 1/3，所以最终宽度为L+1/3*(-2L + L)=2/3L，Button2的计算类似，最终宽度为L+2/3(-2L + L)=1/3L。

在版本高于 3.2 的 Android 设备上屏幕属于“较大”的尺寸引入“最小宽度”限定符sw600dp显示不同的布局，但 Android 版本低于 3.2 的设备不支持此技术，原因是这些设备无法将 sw600dp 识别为尺寸限定符，因此我们仍需使用 large 限定符。这样一来，就会有一个名称为 res/layout-large/main.xml 的文件（与 res/layout-sw600dp/main.xml 一样）。

res/layout-sw600dp/main.xml

• res/layout/main.xml: 单面板布局
• res/layout-large: 多面板布局
• res/layout-sw600dp: 多面板布局

后两个文件是相同的，因为其中一个用于和 Android 3.2 设备匹配，而另一个则是为使用较低版本 Android 的平板电脑和电视准备的。

要避免平板电脑和电视的文件出现重复（以及由此带来的维护问题），您可以使用别名文件。例如，您可以定义以下布局：

• res/layout/main.xml，单面板布局
• res/layout/main_twopanes.xml，双面板布局

然后添加这两个文件：

res/values-large/layout.xml

res/values-sw600dp/layout.xml

后两个文件的内容相同，但它们并未实际定义布局。它们只是将 main 设置成了 main_twopanes 的别名。由于这些文件包含 large 和 sw600dp 选择器，因此无论 Android 版本如何，系统都会将这些文件应用到平板电脑和电视上（版本低于 3.2 的平板电脑和电视会匹配 large，版本高于 3.2 的平板电脑和电视则会匹配 sw600dp）。

每种屏幕尺寸和屏幕方向下的布局行为方式如下所示：

• 小屏幕，纵向：单面板，带徽标
• 小屏幕，横向：单面板，带徽标
• 7 英寸平板电脑，纵向：单面板，带操作栏
• 7 英寸平板电脑，横向：双面板，宽，带操作栏
• 10 英寸平板电脑，纵向：双面板，窄，带操作栏
• 10 英寸平板电脑，横向：双面板，宽，带操作栏
• 电视，横向：双面板，宽，带操作栏

res/values/layouts.xml:

res/values-sw600dp-land/layouts.xml:

res/values-sw600dp-port/layouts.xml:

res/values-large-land/layouts.xml:

res/values-large-port/layouts.xml:

假如我们以Nexus5作为书写代码时查看效果的测试机型，Nexus5的总宽度为360dp，我们现在需要在水平方向上放置两个按钮，一个是150dp左对齐，另外一个是200dp右对齐，中间留有10dp间隔，那么在Nexus5上面的显示效果就是下面这样

但是如果在Nexus S或者是Nexus One运行呢？下面是运行结果

可以看到，两个按钮发生了重叠。

我们都已经用了dp了，为什么会出现这种情况呢？

虽然说dp可以去除不同像素密度的问题，使得1dp在不同像素密度上面的显示效果相同，但是还是由于Android屏幕设备的多样性，如果使用dp来作为度量单位，并不是所有的屏幕的宽度都是相同的dp长度，比如说，Nexus S和Nexus One属于hdpi，屏幕宽度是320dp，而Nexus 5属于xxhdpi，屏幕宽度是360dp，Galaxy Nexus属于xhdpi，屏幕宽度是384dp，Nexus 6 属于xxxhdpi，屏幕宽度是410dp。屏幕宽度和像素密度没有任何关联关系，在320dp宽度的设备和410dp的设备上，还是会有90dp的差别。当然，我们尽量使用match_parent和wrap_content，尽可能少的用dp来指定控件的具体长宽，再结合上权重，大部分的情况我们都是可以做到适配的。

下面看百分比：

• 百分比 
  这个概念不用说了，web中支持控件的宽度可以去参考父控件的宽度去设置百分比，最外层控件的宽度参考屏幕尺寸设置百分比，那么其实中Android设备中，只需要支持控件能够参考屏幕的百分比去计算宽高就足够了。

比如，我现在以下几个需求：

• 对于图片展示的Banner，为了起到该有的效果，我希望在任何手机上显示的高度为屏幕高度的1/4
• 我的首页分上下两栏，我希望每个栏目的屏幕高度为11/24，中间间隔为1/12
• slidingmenu的宽度为屏幕宽度的80%

当然了这仅仅是从一个大的层面上来说，其实小范围布局，可能百分比将会更加有用。

那么现在不支持百分比，实现上述的需求，可能需要

1、代码去动态计算（很多人直接pass了，太麻烦）;

2、利用weight（weight必须依赖Linearlayout，而且并不能适用于任何场景）

再比如：我的某个浮动按钮的高度和宽度希望是屏幕高度的1/12，我的某个Button的宽度希望是屏幕宽度的1/3。

上述的所有的需求，利用dp是无法完成的，我们希望控件的尺寸可以按照下列方式编写：

[html]  view plain copy print ?

1. <Button  
2.         android:text="@string/hello_world"  
3.         android:layout_width="20%w"  
4.         android:layout_height="10%h"/>  

利用屏幕的宽和高的比例去定义View的宽和高。

好了，到此我们可以看到dp与百分比的区别，而百分比能够更好的解决我们的适配问题。

我们再来看看一些适配的tips：

1. 多用match_parent
2. 多用weight
3. 自定义view解决

其实上述3点tip，归根结底还是利用百分比，match_parent相当于100%参考父控件；weight即按比例分配；自定义view无非是因为里面多数尺寸是按照百分比计算的；

通过这些tips，我们更加的看出如果能在Android中引入百分比的机制，将能解决大多数的适配问题，下面就来看看如何能够让Android支持百分比的概念。

3、百分比的引入

1、引入

其实我们的解决方案，就是在项目中针对你所需要适配的手机屏幕的分辨率各自简历一个文件夹。

如下图：

然后我们根据一个基准，为基准的意思就是：

比如480*320的分辨率为基准

• 宽度为320，将任何分辨率的宽度分为320份，取值为x1-x320
• 高度为480，将任何分辨率的高度分为480份，取值为y1-y480

例如对于800*480的宽度480：

可以看到x1 = 480 / 基准 = 480 / 320 = 1.5 ;

其他分辨率类似~~ 

那么，你可能有个疑问，这么写有什么好处呢？

假设我现在需要在屏幕中心有个按钮，宽度和高度为我们屏幕宽度的1/2，我可以怎么编写布局文件呢？

[html]  view plain copy print ?

1. <FrameLayout >  
2.   
3.     <Button  
4.         android:layout_gravity="center"  
5.         android:gravity="center"  
6.         android:text="@string/hello_world"  
7.         android:layout_width="@dimen/x160"  
8.         android:layout_height="@dimen/x160"/>  
9.   
10. </FrameLayout>  

可以看到我们的宽度和高度定义为x160，其实就是宽度的50%； 

那么效果图：

可以看到不论在什么分辨率的机型，我们的按钮的宽和高始终是屏幕宽度的一半。

• 对于设计图

假设现在的UI的设计图是按照480*320设计的，且上面的宽和高的标识都是px的值，你可以直接将px转化为x[1-320]，y[1-480]，这样写出的布局基本就可以全分辨率适配了。

你可能会问：设计师设计图的分辨率不固定怎么办？下文会说~

• 对于上文提出的几个dp做不到的

你可以通过在引入百分比后，自己试试~~

那么实现需要以下步骤：

1. 分析需要的支持的分辨率

对于主流的分辨率我已经集成到了我们的程序中，当然对于特殊的，你可以通过参数指定。

关于屏幕分辨率信息，可以通过该网站查询：http://screensiz.es/phone

1. 自动生成文件的程序

到此，我们通过编写一个工具，根据某基准尺寸，生成所有需要适配分辨率的values文件，做到了编写布局文件时，可以参考屏幕的分辨率；在UI给出的设计图，可以快速的按照其标识的px单位进行编写布局。基本解决了适配的问题。

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.PrintWriter;

/**
 * Created by zhy on 15/5/3.
 */
public class GenerateValueFiles {

    private int baseW;
    private int baseH;

    private String dirStr = "./res";

    private final static String WTemplate = "<dimen name=\"x{0}\">{1}px</dimen>\n";
    private final static String HTemplate = "<dimen name=\"y{0}\">{1}px</dimen>\n";

    /**
     * {0}-HEIGHT
     */
    private final static String VALUE_TEMPLATE = "values-{0}x{1}";

    private static final String SUPPORT_DIMESION = "320,480;480,800;480,854;540,960;600,1024;720,1184;720,1196;720,1280;768,1024;800,1280;1080,1812;1080,1920;1440,2560;";

    private String supportStr = SUPPORT_DIMESION;

    public GenerateValueFiles(int baseX, int baseY, String supportStr) {
        this.baseW = baseX;
        this.baseH = baseY;

        if (!this.supportStr.contains(baseX + "," + baseY)) {
            this.supportStr += baseX + "," + baseY + ";";
        }

        this.supportStr += validateInput(supportStr);

        System.out.println(supportStr);

        File dir = new File(dirStr);
        if (!dir.exists()) {
            dir.mkdir();

        }
        System.out.println(dir.getAbsoluteFile());

    }

    /**
     * @param supportStr
     *            w,h_...w,h;
     * @return
     */
    private String validateInput(String supportStr) {
        StringBuffer sb = new StringBuffer();
        String[] vals = supportStr.split("_");
        int w = -1;
        int h = -1;
        String[] wh;
        for (String val : vals) {
            try {
                if (val == null || val.trim().length() == 0)
                    continue;

                wh = val.split(",");
                w = Integer.parseInt(wh[0]);
                h = Integer.parseInt(wh[1]);
            } catch (Exception e) {
                System.out.println("skip invalidate params : w,h = " + val);
                continue;
            }
            sb.append(w + "," + h + ";");
        }

        return sb.toString();
    }

    public void generate() {
        String[] vals = supportStr.split(";");
        for (String val : vals) {
            String[] wh = val.split(",");
            generateXmlFile(Integer.parseInt(wh[0]), Integer.parseInt(wh[1]));
        }

    }

    private void generateXmlFile(int w, int h) {

        StringBuffer sbForWidth = new StringBuffer();
        sbForWidth.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
        sbForWidth.append("<resources>");
        float cellw = w * 1.0f / baseW;

        System.out.println("width : " + w + "," + baseW + "," + cellw);
        for (int i = 1; i < baseW; i++) {
            sbForWidth.append(WTemplate.replace("{0}", i + "").replace("{1}",
                    change(cellw * i) + ""));
        }
        sbForWidth.append(WTemplate.replace("{0}", baseW + "").replace("{1}",
                w + ""));
        sbForWidth.append("</resources>");

        StringBuffer sbForHeight = new StringBuffer();
        sbForHeight.append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
        sbForHeight.append("<resources>");
        float cellh = h *1.0f/ baseH;
        System.out.println("height : "+ h + "," + baseH + "," + cellh);
        for (int i = 1; i < baseH; i++) {
            sbForHeight.append(HTemplate.replace("{0}", i + "").replace("{1}",
                    change(cellh * i) + ""));
        }
        sbForHeight.append(HTemplate.replace("{0}", baseH + "").replace("{1}",
                h + ""));
        sbForHeight.append("</resources>");

        File fileDir = new File(dirStr + File.separator
                + VALUE_TEMPLATE.replace("{0}", h + "")//
                        .replace("{1}", w + ""));
        fileDir.mkdir();

        File layxFile = new File(fileDir.getAbsolutePath(), "lay_x.xml");
        File layyFile = new File(fileDir.getAbsolutePath(), "lay_y.xml");
        try {
            PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
            pw.print(sbForWidth.toString());
            pw.close();
            pw = new PrintWriter(new FileOutputStream(layyFile));
            pw.print(sbForHeight.toString());
            pw.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static float change(float a) {
        int temp = (int) (a * 100);
        return temp / 100f;
    }

    public static void main(String[] args) {
        int baseW = 320;
        int baseH = 400;
        String addition = "";
        try {
            if (args.length >= 3) {
                baseW = Integer.parseInt(args[0]);
                baseH = Integer.parseInt(args[1]);
                addition = args[2];
            } else if (args.length >= 2) {
                baseW = Integer.parseInt(args[0]);
                baseH = Integer.parseInt(args[1]);
            } else if (args.length >= 1) {
                addition = args[0];
            }
        } catch (NumberFormatException e) {

            System.err
                    .println("right input params : java -jar xxx.jar width height w,h_w,h_..._w,h;");
            e.printStackTrace();
            System.exit(-1);
        }

        new GenerateValueFiles(baseW, baseH, addition).generate();
    }

}

存在一些问题，比如：

• 对于没有考虑到屏幕尺寸，可能会出现意外的情况；
• apk的大小会增加；

android-percent-support可以解决这些问题

PercentRelativeLayout、PercentFrameLayout

不过貌似没有LinearLayout，有人会说LinearLayout有weight属性呀。但是，weight属性只能支持一个方向呀~~哈，没事，只能自定义一个PercentLinearLayout。


新增PercentLinearLayout的github 链接