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

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

Until now. Qt5.3 has been there for a very long time. And some applications have been built using QT. I'm done myself. The first mobile game built using QT, "take medicine". 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. Strive to provide you with a quick reference. 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 in fact taking into account the current mobile market when it comes to developing a mobile-only path for QT. First of all, Android is open source, can get a lot of hardware and software manufacturers, followed by iOS is an excellent mobile operating system. Finally, Windows Phone 7/8 is poised to be ready, so Digia introduced the concept of QPA mainly in Qt5.0. This makes the platform adaptable and easy to match, Qt5.1 the Android operating system, Qt5.2 The iOS system, and Qt5.3 the Windows Phone when it comes to the 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.

Just, even if it's a platform for Android, because the fragmentation of Android and Android apps is exclusive screen size, developers have to consider the screen resolution when developing the application. So how does QT adapt to different screens? Suppose you are a QT framework that is developed using pure C + +. Then another article of mine can help you. Now I'm going to focus on 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 very quickly to know what to do with this control. Let's say 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, as the picture and other elements once encountered a small resolution of the screen will be displayed incomplete. This kind of user experience is very poor. It needs to be scaled. So the question is how do you know the resolution size of the screen? Here we use the screen class in Qtquick.window 2.1. Get the size of the screen even with Screen.width and screen.height.

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 to assume that the current operating system is Android. Then use the original resolution of the Android screen. Otherwise, the 320x480 configuration is used.

The following is a comparison of two pictures:

Here's a comparison of the applications I've developed to fit different resolutions:

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

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