在我们的很多的应用中,我们非常希望得到实际设备的屏幕尺寸大小.这样很方便我们进行我们的UI设计工作.在我们的Ubuntu应用设计中,我们经常会使用一个虚拟的尺寸单位units.gu.这对很多的已经习惯使用pixel的开发者来说,可能一下子并不容易理解.其实在我们的Ubuntu应用设计中,我们需要尽量来使用units.gu来设计我们的应用.这样我们的应用就可以在不同的屏幕尺寸中可以进行自动的适配.
分辨率无关:
Ubuntu的用户界面工具包的重要功能是把用户定义多个设备尺寸进行匹配。采取的方法是定义一个新的单元类型,网格单元(简写为gu)。网格单位转换为像素值取决于应用程序运行在屏幕上和设备的类型。下面是一些例子:
Device | Conversion |
Most laptops | 1 gu = 8 px |
Retina laptops | 1 gu = 16 px |
Smart phones | 1 gu = 18 px |
更多的关于分辨率无关的知识可以在链接找到。
比如目前我们公司出的MX4的手机的分辨率如下:
当我们的应用只使用units.gu为长度单位来编程的话,那么无论将来我们的屏幕尺寸变得多大,我们的应用的长宽比不会发生变化,也就是说我们的应用的布局不会发生变化.对我们的MX4来说,宽度为50gu,高度为80gu.如果我们的平板的宽度及高度还是这么定义的话,那么我们的手机应用在平板上的运行将没有任何的变化.只是在平板上每个units.gu对应的pixel的数值将和我们现在的MX4会有不同.
为了侦测到我们每个设备的特性,我做了如下的一个测试应用:
import QtQuick 2.4 import Ubuntu.Components 1.3 MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "pagesizeingu.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true width: units.gu(100) height: units.gu(75) Page { header: Item { visible: false } Rectangle { id: rect anchors.fill: parent Component.onCompleted: { console.log("rect: " + rect.width + " " + rect.height) client.text = "client area width: " + rect.width/units.gu(1) + "gu height: " + rect.height/units.gu(1) + "gu" } onWidthChanged: { console.log("rect: " + rect.width + " " + rect.height) clientgu.text = "client area width: " + Math.round(rect.width/units.gu(1)) + "gu height: " + Math.round(rect.height/units.gu(1)) + "gu" client.text = "client area (" + rect.width + ", " + height + ")" } onHeightChanged: { console.log("rect: " + rect.width + " " + rect.height) client.text = "client area (" + rect.width + ", " + height + ")" clientgu.text = "client area width: " + Math.round(rect.width/units.gu(1)) + "gu height: " + Math.round(rect.height/units.gu(1)) + "gu" } } Column { anchors.centerIn: parent Label { id: info } Label { id: resulution } Label { id: gutopixel } Label { id: clientgu } Label { id: client } } Component.onCompleted: { console.log("screen: " + screensize.width + " " + screensize.height) resulution.text = "screen resolution: (" + screensize.width + ", " + screensize.height + ")" info.text = "screen width: " + Math.round(screensize.width/units.gu(1)) + "gu height: " + Math.round(screensize.height/units.gu(1)) + "gu" gutopixel.text = "1 units.gu = " + units.gu(1) + " pixels" } } }