屏幕设配介绍

移动开发的屏幕适配是一个难题，特别是Android的手机种类太多，屏幕差异性很大。iOS在iPhone6之后也增加了很多种分辨率，也需要更多的考虑屏幕适配问题。不同的系统都提供了不少屏幕适配的机制和方法，但是需要很多繁琐细致的设计和实现，DeviceOne统一了屏幕适配的方式，开发者无需对这种细节了解。

Deviceone提供3种级别的屏幕适配，绝大部分情况，开发者使用DeviceOne开发App完全不需特意去考虑屏幕适配，Deviceone的运行引擎可以确保在任何一款设备上自动适配屏幕大小。

1.基本适配方式：

DeviceOne的基本适配本质上就是等比缩放，用户在DeviceOne Studio的设计区通过可视化方式拖拽UI组件，其设计区是有大小的，UI组件的宽和设计区的宽，高和设计区的高的比值是不会变的,永远是w2/w1和h2/h1，到不同的手机上运行，会根据屏幕的分辨率自动等比例缩放从而达到屏幕的适配。同时字体的大小在不同的屏幕上也会自动适配。如下图：

自动适配满足大部分的UI展示，开发者无须关注适配问题。但是有一些特殊情况，比如按钮在设计区是正圆，在不同的手机屏幕上就有可能会变成椭圆，这一点不能依靠基本的适配方式，DeviceOne也提供了很简单的方法来解决这个问题。

2. ALayout内的不变形缩放：

这种适配机制就是解决上面提到的局部变形问题而设计的。ALayout是DeviceOne的一个基础布局，通常它也是一个基础UI，也适应于基础适配，也就是等比例缩放。但是它有一个属性isStretch表明ALayout里的子UI是否遵循等比例缩放，缺省这个属性是true，如果设置为false，则这个ALayout自身包括它内部的所有子UI不再遵循等比例缩放的原则，而是遵循最大比例缩放原则，比如上面的例子，如果正圆所在的ALayout的isStretch属性设置为false，则这个正圆在手机屏幕上的缩放会先保证宽高比也就是1不变的基础上，再在ALayout内部实行最大比例缩放，从而保证在任何手机屏幕上都是正圆。如下图，我们可以看到正圆在设计区和移动屏幕区都是正圆：

以上二种适配机制能解决绝大部分的适配问题，开发者并不需要做太多工作。但是我们还提供一个更精确的适配方式，但是需要开发者做不少额外的工作。

3. 特殊页面适配机制：

我们DeviceOne还提供另外一种手动适配的方案，能让部分屏幕尺寸不是主流比例的设备也能完美展现UI页面。
下面说明一下这种方案：

在新建应用时，我们提供选择一种最佳适配机型的屏幕尺寸，默认是iPhone6的750x1334的大小，此时所有.ui页面的尺寸都是按照这个比例来布局的；此时用一台iPhone4的设备来安装该应用，在某些视觉效果要求极高的页面中，比如应用的引导页source://index.ui 会看出在iPhone4的屏幕中页面稍微有些挤压变形，因为iPhone4的屏幕尺寸是640x960的，如果想要完美适配iPhone4，可以在需要增加手动适配的页面同级目录下增加对于iPhone4的适配页面，只要在页面名称后加上下划线和需要适配屏幕的尺寸即可，即在source:// 目录下增加与index.ui同级的index_640x960.ui，里面的展示换成根据iPhone4尺寸定制的内容就完成了手动适配:

注意是640x960而不是640*960

只要手机是640x960分辨率的屏幕进入应用时，就会自动去解析index_640x960.ui，而不是去解析index.ui，从而达到完美的适配效果；更棒的是，增加的手动适配页面与原页面是公用一套逻辑代码的，不需要写两套代码，在index.ui.js里调用的API，在index_640x960.ui页面也可调用，只需在index.ui.js中定义好即可。