文档章节

屏幕设配介绍

voxer
 voxer
发布于 2016/04/16 08:36
字数 1159
阅读 6
收藏 0

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


© 著作权归作者所有

下一篇: 日程日历示例
voxer
粉丝 4
博文 15
码字总数 17624
作品 0
海淀
私信 提问
android 屏幕适配问题

看了很多关于屏幕适配的方法,可是还是没有解决。 我是建文件夹 适配屏幕的,可是现在遇到的问题是:6.1寸 分辨率 1280x720 的手机 适配的始终是 values-mdpi 里面的 适配数值,我已经建了一...

黛曦葛溪
2013/07/18
3K
4
小米 Max 3 通过中国工信部认证!外型 规格全曝光!

小米 Max 3 通过中国工信部的认证,除了将其规格全面曝光外,更代表小米 Max 3 快将登场!小米 Max 系列向来都以宽屏幕作主打,而小米 Max 3 当然也不会例外,从中国工信部网站可见,小米 Ma...

小七里外
2018/06/21
0
0
从 WP7 到 WP8 开发者的无差别转变

编注:这是一篇来自开发者@王博_Nick的技术博客文章,转载来与所有Windows Phone开发者分享。 想必有很多朋友是Windows Phone 7 的开发者都在担心同一个问题就是 Windows Phone7 移植Windows...

oschina
2012/11/18
3.4K
11
UIScrollView 和UIPageControl 实现app启动滑动图

一、使用NSUserDefaults 判断滑动图有没有出现过,加载滑动图 NSUserDefaults 简介: NSUserDefaults可以将数据永久的保存在手机中,他是一个单例,用起来很方便,所以很适合用于保存简单的数...

lady-奕奕
2014/07/23
17.4K
4
小米笔记本Pro发布,高性价比有亮点也有遗憾!

2017年9月11日下午两点,小米召开了新品发布会,开场雷军首先就发布了这款小米笔记本Pro。 配置方面采用了第八代i7处理器,NV MX150显卡,16G2400双通道内存,256G的NvMe固态硬盘,同时还是1...

科技大魔王
2017/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ES5

什么是ES5:比普通js运行要求更加严格的模式 为什么:js语言本身有很多广受诟病的缺陷 如何:在当前作用域的顶部添加:"use strict" 要求: 1、禁止给未声明的变量赋值 2、静默失败升级为错误...

wytao1995
53分钟前
7
0
c++ 内联函数调用快的原因

见图片分析

天王盖地虎626
今天
4
0
微服务之间调用控制器注解类型的差异

今天在一个业务服务通过Feign调用文件服务上传文件时遇到了几个问题: 1. 提示http请求头过大的问题; 此时需要修改bootstrap.yml,加入 server: max-http-header-size: 10000000 用以放大...

不再熬夜
今天
7
0
用 4G 工作是什么体验

七月开始,因为工作原因,在公司附近租了个住处,方便工作。离公司近了,感觉就是不一样,之前每天 5:30 就要起床赶地铁,现在可以睡到自然醒,一看才 7 点,悠闲的起床洗漱,踱步到公司,都...

zzxworld
今天
9
0
sonar报错volatile

问题发生 原先代码如下: //认证授权码private static volatile String AUTHORIZATION_CODE = "init"; git push 之后,sonar认为这是个bug检测报告截图如下: 分析排查 解释说明: Markin...

开源小菜鸟2333
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部