如何得到屏幕和可用显示区域的大小尺寸及运用分辨率无关的编程

Elastic 中国社区官方博客

于 2016-03-03 10:22:51 发布

阅读量1.7k

点赞数

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/UbuntuTouch/article/details/50785795

版权

移动开发同时被 2 个专栏收录

268 篇文章 1 订阅

订阅专栏

QML

185 篇文章 7 订阅

订阅专栏

在我们的很多的应用中，我们非常希望得到实际设备的屏幕尺寸大小．这样很方便我们进行我们的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手机上：