和手机屏幕一样,高分屏在PC上使用越来越多。传统的桌面程序都是像素为单位进行UI布局,而且是适配传统的96dpi的显示器的。这就导致这些程序在高分屏上显示很小,用户用起来很难受。

虽然windows系统提供了桌面程序自动放大功能,但这个放大效果是以牺牲显示效果为代价的,一个在普屏上显示很好的软件到了高分屏上显示变得非常粗糙。

要解决这个问题非常麻烦,对于有些项目甚至变成不可能完成的任务:

如果使用同一套布局,布局系统需要支持放大时使用的字体的重建,还需要支持放大时使用的图片资源的重新获取,还需要支持放大时布局位置的自动调整,然而上述3条实现任意一条都不容易。

如果使用不同的布局,就是说为普屏配置一套布局,为高分屏配置另一套布局,尽管麻烦,理论上也是可行的,但还有新的问题:维护成本高,一个地方UI元素的调整可能需要修改两个不同的布局文件;不适应动态调整,对于多显示器有不同DPI的情况,很难做到DPI的动态切换。

Android系统对于DPI的支持比较理想(IOS没有研究):

首先Android的布局语言使用的坐标一般都用dp,sp为单位,也就是说在布局的时候,UI的位置,字体的大小都是dpi无关的,无论在高分屏还是普屏下显示的大小都是一样的。

对于图片,Android系统提供适配多种DPI的图片资源包,如果开发者只提供一种资源包,则使用这个资源包适配目标屏幕的dpi进行缩放,同样达到类似dpi无关的显示效果。

当然Android系统适配手机通常只有一个屏幕,不需要做动态DPI切换,这一点是和PC不同的地方。

鉴于我对于Android还有些经验,SOUI的dpiaware工作主要是参考Android的设计。

如前所述,要在一套UI布局中支持dpiaware,SOUI需要支持DPI变化时的字体重建,布局坐标重排,图片资源重新获取3部分工作。

首先明确DPI是布局元素相关的,SOUI中最基本的布局元素就是SWindow对象,要在SOUI实现DpiAware, 我们在DPI变化时给每个SWindow发一个UM_DIPCHANGED消息,SWindow对象收到这个消息后处理自己持有的字体,图片的重建,完成后请求宿主重新执行布局操作。

1 字体重建:SOUI有一个UI中使用的字体Pool,在窗口中保存有使用的字体的描述,DPI变化后直接使用保存的字体描述重新创建新的字体。

2 图片重建:SOUI中使用ISkinObj来代表一个绘制对象,系统内的绘制对象保存在SkinPool中,每一个绘制对象有两个属性:name, scale (scale属性是新增加的),DPI变化时,一个窗口持有的ISkinObj对象到SkinPool中查询name相同但scale不同的ISkinObj,找到了就使用这个新对象绘制,如果没有找到则使用当前图片自动缩放出一个Clone对象,并把它加入到SkinPool里去。

3 重新布局:相对于2.6以前版本的SOUI的布局,2.6版本的坐标描述增加了坐标单位dp,在窗口的位置及大小描述中加上dp就代码这个值是dpi相关的坐标,窗口的DPI变化后自动使用新DPI重新布局。

上面是DPIAware的基本解决方案,当然细节还有很多,具体参见系统代码。

下面我们看一下MultiLangs这个demo如何处理dpiaware。

首先演示图片的自动dpi适配。

1 在资源中增加适配不同DPI的4个图片资源,如下图:

2 在uires.idx里引入这4个图片。

<img>
<file name="pic_100" path="image\pic_100.png"/>
<file name="pic_125" path="image\pic_125.png"/>
<file name="pic_150" path="image\pic_150.png"/>
<file name="pic_200" path="image\pic_200.png"/>
</img>

3 在skin.xml中增加4个skin对象, 注意它们使用相同的name,不同的scale

<skin>
<imglist name="scale_pic" scale="100" src="img:pic_100"/>
<imglist name="scale_pic" scale="125" src="img:pic_125"/>
<imglist name="scale_pic" scale="150" src="img:pic_150"/>
<imglist name="scale_pic" scale="200" src="img:pic_200"/>
</skin>

4 最后就是在布局XML中引用该skin对象,直接使用name引用即可,不需要关注scale

<page title="page1">
<img skin="scale_pic" pos="|0,|0" offset="-0.5,-0.5"/>
<window pos="20,20,@100dp,@30dp" colorBkgnd="rgba(255,0,0,128)">100dp*30dp</window>
</page>

到此完成了图片的配置。

字体和布局的DPIAware很简单,只需要在那些需要dpi自动缩放的位置或者字体大小数字后加上dp即可,可参考上面的XML, pos,size,width, height等属性都可以通过加dp来实现dpiaware。

DpiAware至此完成!

启程软件  2017年5月4日

在SOUI中支持高分屏显示的更多相关文章

  1. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  2. SystemUI中设置横竖屏显示

    SystemUI中快捷菜单有 “方向锁定” . RotationLockTile protected void handleClick() { if (mController == null) ret ...

  3. mui禁止横屏显示,仅支持竖屏显示

    mui.plusReady(function () { plus.screen.lockOrientation("portrait-primary"); });

  4. c# Winform 开发分屏显示应用程序

    分屏显示即可把一台主机内运行的多个程序分别显示在不同的两个(或多个)屏幕上.目前市面上主流的显卡都支持分屏显示(显示双屏幕),如果需要显示2个以上的屏幕,则应使用“拖机卡”类的硬件. 设置分屏显示的两 ...

  5. iOS 中各种横竖屏切换总结

    iOS 中横竖屏切换的功能,在开发iOS app中总能遇到.以前看过几次,感觉简单,但是没有敲过代码实现,最近又碰到了,demo尝试了几种情况,这里就做下总结.注意 横屏两种情况是反的你知道吗? UI ...

  6. Android开发中的全屏背景显示方案

    引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...

  7. C# WinForm中 让控件全屏显示的实现代码

    夏荣全 ( lyout(at)163.com )原文 C#中让控件全屏显示的实现代码(WinForm) 有时候需要让窗口中某一块的内容全屏显示,比如视频播放.地图等等.经过摸索,暂时发现两种可行方法, ...

  8. QT中关于窗口全屏显示与退出全屏的实现

    近期在学习QT时遇到了很多问题这也是其中一个,个人通过在各种书籍和网络上的查阅找到了一些关于这方面的答案,希望能给大家一些帮助. 首先,在QT中对于窗口显示常用的有这么几个方法可以调用: Qt全屏显示 ...

  9. 在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

    此场景适用于移动端百分比布局,背景全屏显示. 在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut; 原因: ...

随机推荐

  1. quartz任务时间调度入门使用

    Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目,完全基于 Java 实现. 作为一个优秀的开源调度框架,Quartz 具有以下特点: 强大的调度功能,例如支持丰富多样 ...

  2. Linux系统启动过程详解

    启动第一步--加载BIOS当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬盘 ...

  3. windows phone 8.1开发SQlite数据库操作详解

    原文出自:http://www.bcmeng.com/windows-phone-sqlite1/ 本文小梦将和大家分享WP8.1中SQlite数据库的基本操作:(最后有整个示例的源码)(希望能通过本 ...

  4. java 文件操作(二)---Files和Path

    自从java 7以来,引入了FIles类和Path接口.他们两封装了用户对文件的所有可能的操作,相比于java 1的File类来说,使用起来方便很多.但是其实一些本质的操作还是很类似的.主要需要知道的 ...

  5. [转载]或许您还不知道的八款Android开源游戏引擎

    或许您还不知道的八款Android开源游戏引擎         分类:             技术文章              2010-08-04 20:27     17430人阅读     ...

  6. java实现微信红包分配算法

    红包算法分析 有人认为,抢红包的额度是从0.01到剩余平均值*N(N是一个系数,决定最大的红包值)之间,比如一共发了10块钱,发了10个红包:第一个人可以拿到(0.01~1*N)之间的一个红包值,当然 ...

  7. 关于View Link

    当需要表格之间的父子结构的时候需要展示时,这个时候就需要建立View Link来实现Table之间的关联.在建立ViewLink时需要现将JDev关闭然后再进行创建自己需要的ViewLink.

  8. java中的==、equals()、hashCode()源码分析

    转载自:http://www.cnblogs.com/xudong-bupt/p/3960177.html 在Java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际 ...

  9. WPF 杂谈——开篇简言。

    这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...

  10. Redis数据类型之列表List

    Redis列表简介 Redis列表是简单的字符串列表,一个列表最多可以包含 232 - 1 个元素.列表按照插入顺序排序,可以从列表的头部或者尾部添加元素 上图演示了使用LPUSH向列表中插入元素,并 ...