码迷,mamicode.com
首页 > 其他好文 > 详细

OrientationHelper让我们的UI随我们的屏幕的旋转而旋转

时间:2015-05-25 16:34:23      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

对于一些应用来说,我们希望我们的手机的屏幕旋转时,它里面的内容也跟随着旋转。在iPhone里其实我们也可以看到这样类似的应用,无论你怎么旋转你的屏幕,在任何一个方向,你都可以玩你的游戏。


在Ubuntu平台里,有一个OrientationHelper的API。它实现了上面的要求。具体的API的接口地址为:


http://developer.ubuntu.com/api/apps/qml/sdk-14.10/Ubuntu.Components.OrientationHelper/


我们来通过一个实验来完成:


import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "orientationhelper.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
//    automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("")

        Item {
            anchors.fill: parent

            OrientationHelper {
//                orientationAngle: 90

                Column {
                    spacing: units.gu(3)
                    Label {
                        text: "Automatically rotated"
                    }
                    Button {
                        text: "Automatically rotated"
                    }

                    Image {
                        width: units.gu(10)
                        height: units.gu(17)
                        source: "images/pic1.jpg"
                    }
                }
            }
        }
    }
}

在上面的OrientationHelper里面,我们放置了三个Control:Label, Button及Image。运行的效果如下:


技术分享  技术分享


  技术分享 技术分享


在这里,我们关掉了Main.qml中的:


//    automaticOrientation: true

如果这个开关打开,可能不是这个效果。


整个项目的源码在:git clone https://gitcafe.com/ubuntu/orientationhelper.git





OrientationHelper让我们的UI随我们的屏幕的旋转而旋转

标签:

原文地址:http://blog.csdn.net/ubuntutouch/article/details/45970935

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!