在我们的很多的应用中,我们非常希望得到实际设备的屏幕尺寸大小.这样很方便我们进行我们的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会有不同.
为了侦测到我们每个设备的特性,我做了如下的一个测试应用:
Main.qml
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
}
Label {
text: "1 dp = " + units.dp(1) + " pixels"
}
Label {
text: "1 gridUnit = " + units.gridUnit + " pixels"
}
}
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"
}
}
}
把该应用运行到我们的MX4手机上:
从上面的显示结果看出
1 units.gu = 23 pixels
同样的应用运行到我们的DELL电脑上(分辨率1920x1080):
从上面的输出可以看出来在电脑上:
1 units.gu = 8 pixels
当我们设计我们的电脑设计应用时,我们可以按照240ux135u来设计的话,就不会有任何的问题.
在我们的Ubuntu M10上运行的话: