在SOUI中支持高分屏显示

和手机屏幕同样，高分屏在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日