QT Mobile Application Development (i): Adaptation to different screens

QT Mobile Application Development (i): Adaptation to different screens

So far, Qt5.3 has been there for a long time, and some applications have been built using QT, and I have completed my first mobile game, "take Medicine", built using QT. So the next few articles are mainly to share with you how I use QT for mobile development. QT Mobile application development is divided into a number of blog posts, each article is trying to streamline not wordy, and strive to provide a quick reference for everyone. I will also mainly use QT to make "take medicine" method of the technique one by one to share to everyone.

When it comes to mobile app development, the first thing to think about is Android, indeed. Digia is actually taking the current mobile market into account when it comes to developing a mobile approach to QT. First of all, Android is open source, can win a lot of hardware and software manufacturers, followed by iOS is an excellent mobile operating system, finally Windows Phone 7/8 is ready to go, So Digia introduced the concept of QPA mainly in Qt5.0, which made it easy to fit the platform, Qt5.1 the adaptation of the Android operating system, and Qt5.2 the adaptation of the iOS system; Qt5.3 when the Windows Phone's adaptation. Of course, some niche mobile development platforms such as BB10, Ubuntu phone and Jolla are daotie to Qt. So now QT has been able to adapt to most mobile platforms, coupled with the embedded field of a single show, QT in fact has become the most suitable platform for the framework.

However, even if it is a platform for Android, due to the fragmentation of Android and the exclusive screen size of Android apps, developers have to consider the screen resolution when developing the application. So how does QT adapt to different screens? If you are using pure C + + developed QT framework, then my other article can help you. Now I will mainly introduce how QML is solved.

1. Use Anchor Layout method

QML uses a layout called Anchor layout (anchorlayout), which is like knowing the relative position of a control, and then another control uses the anchor layout to quickly know how to place it based on the control. For example, this:

The "[email protected]" in the lower right corner is arranged using the anchor layout:

text{         anchors.bottom:parent.bottom         anchors.right:parent.right         text: "Copyright©jcystudio"}

2. Use screen to get the resolution

The use of anchor layout may not be enough, because the picture and other elements once encountered a small resolution of the screen will be displayed incomplete, such a user experience is very poor, need to zoom. So the question is how do you know the resolution size of the screen? Here we use the screen class in Qtquick.window 2.2, which uses the Screen.width and screen.height to get the size of the screenshot.

Finally, I'll share some of the ways I've developed the "Take It" Android and desktop version to fit the screen resolution:

window{   id:root   Width:Qt.platform.os = = = "Android"? screen.width:320   Height:Qt.platform.os = = = "Android"? screen.height:480 ...}

This code means that if the current operating system is Android, then using the original resolution of the Android screen, otherwise the use of the 320x480 configuration. Here is a comparison of the two graphs:

Here's another application I've developed to adapt to different resolutions:

         This article has participated in "CSDN Bowen Contest", please vote for me, support more QT Mobile development of original content!