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

对于一些应用来说,我们希望我们的手机的屏幕旋转时,它里面的内容也跟随着旋转。在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

时间: 2024-11-13 08:06:56

OrientationHelper让我们的UI随我们的屏幕的旋转而旋转的相关文章

iOS开发之UI——键盘弹出屏幕上移

平时在开发中,当有输入框时,弹出的键盘有时会遮挡住下方的屏幕,为此我们可以在对输入框进行操作时使屏幕上移,避免下方屏幕被遮挡.(也可以使用ScrollView进行滑动.) #pragma mark - 屏幕上弹 -( void )textFieldDidBeginEditing:(UITextField *)textField {      //键盘高度216           //滑动效果(动画)      NSTimeInterval animationDuration = 0.30f;

UI基础:视图控制器.屏幕旋转.MVC

UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewController对象: UIViewController *viewController=[[UIViewController alloc]init]; UIViewController 自身带了一个UiView,默认的大小和屏幕大小一样. 每一个window都带有一个根视图,如果不给根视图赋值,

iOS开发UI篇—ios手势识别(双击、捏、旋转、拖动、划动、长按, 上下左右滑动)

ios的手势操作之UIGestureRecognizer浅析 一.概述 iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由UIResponder而来的如下4种方式: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event - (void)touchesEnded:(NSSet

全面理解 Unity UI 系统

[狗刨学习网] 随着 Unity 4.6 发布,新 UI 系统终于与大家见面了. RectTransform Unity UI 系统使用 RectTransform 实现基本的布局和层次控制.RectTransform 继承于 Transform,所以 Transform 的所有特征 RectTransform 同样拥有.在 Transform 基础上,RectTransform 增加了 轴心(pivot).锚点(实际上是用 anchorMin.anchorMax 两个点定义的矩形区域).和 尺

iOS开发UI篇—Quartz2D使用(矩阵操作)

iOS开发UI篇-Quartz2D使用(矩阵操作) 一.关于矩阵操作 1.画一个四边形 通过设置两个端点(长和宽)来完成一个四边形的绘制. 代码: 1 - (void)drawRect:(CGRect)rect 2 { 3 //画四边形 4 //获取图形上下文 5 CGContextRef ctx=UIGraphicsGetCurrentContext(); 6 //绘图 7 CGContextAddRect(ctx, CGRectMake(20, 50, 100, 100)); 8 //渲染

Chromium硬件加速渲染的UI合成过程分析

在Chromium中,Render端和WebGL端绘制出来的UI最终是通过Browser端显示在屏幕上的.换句话说,就是Browser端负责合成Render端和WebGL端的UI.这涉及到不同OpenGL上下文之间的资源传递和同步问题.其中,资源传递问题通过Mailbox机制解决,同步问题通过Sync Point机制解决.本文接下来就分析Browser端合成Render端和WebGL端UI的过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! Rende

Android UI框架基本概念

Activity:基本的页面单元,Activity包含一个Window,window上可以绘制各种view View:最基本的UI组件,表示屏幕上的一个矩形区域: Window:表示顶层窗口,管理界面的显示和事件的响应:每个Activity 均会创建一个PhoneWindow对象,是Activity和整个View系统交互的接口 PhoneWindow类:该类继承于Window类,同时,PhoneWindow类内部包含了一个DecorView对象.简而言之,PhoneWindow是把一个Frame

Android官方开发文档Training系列课程中文版:多样屏幕之实现自适应UI

原文地址:http://android.xsoftlab.net/training/multiscreen/adaptui.html 基于程序当前所显示的布局来说,UI流程可能会有所不同.比如说,如果程序当前处于多面板模式,点击左面板中的项目会直接在右面版中显示具体的内容;如果当前是单面板模式,那么具体的内容则会在新的页面中显示. 检查当前的布局 因为每种布局的实现可能会有所不同,所以首先要做的事情就是检查用户当前使用的是哪种布局.比如说,你可能需要知道用户当前处于"单面板"模式还是&

ios开发-UI进阶-核心动画-时钟动画小案例

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/ 今天使用CALayer的"定位点(锚点)"实现了一个时钟动画,其实就是一个小的时钟,只是实现了功能,没有做出绚丽的效果.使用UIView实现的,其实只是单纯的使用layer也可以实现.主要用到了 Quartz2D画图\ 事件处理\核心动画方面的知识. 代码不是很多,直接附上源码,注释比较详细,在源码后面再进行解释其中的一些知识点和注意点. 下图为应用截图,使用gif,没有制作