屏幕设配介绍

移动开发的屏幕适配是一个难题,特别是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中定义好即可。

原文地址:https://www.cnblogs.com/andbut/p/5397590.html