2

I am porting an iOS app to Qt/QML targeting an Android tablet.

I would like to keep the app's behavior similar to the original iOS version, which is based on a UISplitViewController.

In other words, I need to build a master-details view using the tablet in landscape mode.

In order to achieve this, I was thinking of using ListView backed by a ListModel as the master view so that whenever an item is selected in the ListView, a details view is dynamically displayed.

At the moment I am struggling to get even the basics right. Forgive me in advance if my questions seem too broad but here are a couple of stumbling blocks I am facing right away:

Most examples I have seen in QML seem to "hardcode" the device's screen size. For example, a typical skeleton project in Qt Creator will consist of the following code:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

        Page1 {
        }

}

  • As illustrated above the width and height properties of the window are hard-coded. In practice I need to set these values dynamically depending on the screen size of the physical device. How can I achieve this?

  • I also need to size my application screen in order to leave some space for the status bar area at the top of the screen (the area where the battery charge level is displayed).

Any code snippets to as well as pointers to online docs illustrating how to achieve this will be very appreciated!

Edit: Here is an updated main.qml, which sets the size of the application window using the device's screen size:

ApplicationWindow {
    id: appWindow
    visible: true
    width: Screen.width
    height: Screen.height
    title: qsTr("Hello World")

        Page1 {
        }

}

The width, height and position of the application window can be further adapted to not overlap on the status bar area of the device.

However I am still stuck with the layout orientation, which defaults to portrait. How do I change the orientation of the layout to landscape?

BigONotation
  • 4,406
  • 5
  • 43
  • 72
  • 1
    Remove setting size of the window explicitly, instead try setting this: http://doc.qt.io/qt-5/qml-qtquick-window-window.html#visibility-prop – hyde Feb 28 '17 at 23:24
  • Also, have you tried the example shown here: http://doc.qt.io/qt-5/qml-qtquick-controls-applicationwindow.html – hyde Feb 28 '17 at 23:26

1 Answers1

2

Here is what I use:

  // in the main window
  property bool desktop: {
    switch (Qt.platform.os) {
    case "android":
    case "ios":
    case "winphone":
    case "winrt":
      return false
    default: return true
    }
  }
  visibility: desktop ? Window.AutomaticVisibility : Window.Maximized

As for forcing landscape orientation, add the following to the AndroidManifest.xml file in your project folder / android (not the one in the build directory) in the manifest -> application -> activity properties section:

android:screenOrientation="landscape"
dtech
  • 47,916
  • 17
  • 112
  • 190
  • I checked my project and there is no AndroidManifest.xml. There is indeed an AndroidManifest.xml in the build folder but that one gets overwritten at each build. I am using Qt Creator 4.2.1 – BigONotation Mar 01 '17 at 01:16
  • So apparently you haven't generated a manifest stub, so each time it creates the default one. You need to go to Projects - build settings for the android kit - in the Build Steps - Build Android APK section there a button called `Create Template`. Click that and you will have a manifest in your project folder to make changes to. – dtech Mar 01 '17 at 01:24