Qt on Android: Creating a Scalable interface

Using Qt to develop Android apps also requires different mobile devices to fit a wide range of screens and resolutions. This time we'll probably talk about how to use the mechanisms provided by Qt to create a scalable interface.

Blog Star selection, Click Vote me a vote, thank you . If you have voted, you can also point oh, every day can cast a vote.

Dpi

You have to explain the DPI.

DPI, dot per inch, which is the number of dots per inch. Another concept is the PPI, which is the number of pixels per inch.

The larger the value, the larger the pixel density, and the smaller screen size can have a large resolution. For example, some Android phones, 3.7-inch screen can provide 960x540 resolution, while some phones, 5-inch screen provides 800x480 resolution. These two different screen sizes and resolutions of the phone, the 5-inch screen will look grainy, while 3.7 inches looks very delicate. This is the difference in pixel density.

The effect of DPI on the interface is Jiangzi: the same resolution (in pixels), the larger the DPI screen, the smaller it looks.

Three types of scalable elements

For a Qt mobile app, there are probably three types of scalable UI elements:

• Text
• Image
• Background

Let's take a look at each other.

Text

For text, we only need to set the pointsize of the specific text display and the font (QFONT) used by the input control. Like Qlabel, Qpushbutton, Qlineedit and so on are all applicable this way.

The size of the Qfont is expressed in two ways: Pixelsize and pointsize. The pointsize adjusts the font based on the DPI of the device on which it is located, making it look the same on devices at different DPI.

Qt can individually change the font used by a widget, or you can use Qapplication to provide a global font, so those widgets that don't have a specific setting will have a global font.

Image

We said earlier, the same resolution of the picture, screen DPI, the larger the people see the past, the smaller.

Qt can handle this situation, we use qpixmap as an example to illustrate.

There are two methods of Qpixmap:

• void Setdevicepixelratio (qreal scalefactor)
• Qreal Qpixmap::d evicepixelratio () const

These two methods manipulate a property called device pixel ratio, which specifies the conversion ratio between devices-related pixels and device-independent pixels. We can adjust it to change the effect that a picture looks on the phone screen.

The Qimage class also has these two methods. You can refer to the Qt help to see the details of the API.

So how do you get a devicepixelration of a device?

QScreen there is a way to return this value: Qreal qscreen::?devicepixelratio () const

Qguiapplication, Qwindow These two classes also have a method of the same name.

We can also calculate by ourselves, using QScreen's Logicaldotsperinch () method combined with a common DPI (such as 72) to calculate, here is the sample code:

Float sizeutil::d pifactor () {    QScreen *screen = Qapp->primaryscreen ();    return 72/screen->logicaldotsperinch ();}

I used the above method in the following example.

To illustrate, Qt's built-in controls, when used with Qpixmap and qimage, combine devicepixelration to determine the size of the control, and our example uses Qlabel to display the image.

Background

The background is either a color or a picture. When you use a picture to make a background, you face stretching problems. Android uses 9patch images to solve this problem, Qt also offers something similar: Border-image.

In Qt Widgets-based applications, we can set up border-image with QSS to construct a scalable background.

Is the Qt help, four lines to cut a picture into 9 parts, when used, you can maintain four corners, the other parts by stretching or tiling to accommodate the size of the interface space.

Well, the basic background is so much, let's look at a simple example.

Example of a scalable interface

Let's look at the code before we look at the effect.

is the operating effect on the PC:

is the effect on the phone, when the picture is not set devicepixelratio.

Without setting the Devicepixelratio, the picture looks much smaller, compared with the text, it can be clearly seen that the imbalance.

The Devicepixelratio effect is set and looks the same.

Code Analysis

A Qt Widgets-based application was created, with the name Scalabeui, creating two files SizeUtil.h and sizeUtil.cpp.

Two image resources are used in the project:

I added the picture to the QRC.

SizeUtil.h as follows:

#ifndef sizeutil_h#define sizeutil_h#include <QFont> #include <qstring>class sizeutil{private:    Sizeutil () {}    sizeutil (const sizeutil &);    Sizeutil & operator= (const sizeutil&);p ublic:    ~sizeutil () {}    static Sizeutil & Instance ();    int defaultfontheight ();    int Widthwithdefaultfont (const QString &text);    int Widthwithfont (const QString &text, int fontpointsize);    int fontheight (int fontpointsize);    float Dpifactor ();}; #endif//Sizeutil_h

SizeUtil.cpp as follows:

#include "sizeUtil.h" #include <QApplication> #include <QFontMetrics> #include <qscreen>sizeutil & Sizeutil::instance () {    static sizeutil util;    return util;} int Sizeutil::d efaultfontheight () {    return qapp->fontmetrics (). Height ();} int Sizeutil::widthwithdefaultfont (const QString &text) {    return qapp->fontmetrics (). Boundingrect (text). Width ();} int Sizeutil::widthwithfont (const QString &text, int fontpointsize) {    Qfont f = qapp->font ();    F.setpointsize (fontpointsize);    Qfontmetrics FM (f);    return Fm.boundingrect (text). width ();} int sizeutil::fontheight (int fontpointsize) {    Qfont f = qapp->font ();    F.setpointsize (fontpointsize);    Qfontmetrics FM (f);    return Fm.height ();} Float sizeutil::d pifactor () {    QScreen *screen = Qapp->primaryscreen ();    return 72/screen->logicaldotsperinch ();}

The Sizeutil class is primarily used to calculate the pixel size of the text.

New Project Wizard for us to generate widget.cpp and widget.h, I modified a bit widget.cpp, for text, pictures, background three cases, did the processing. The code is as follows:

#include "widget.h" #include <QVBoxLayout> #include <QHBoxLayout> #include <QLabel> #include < qpushbutton> #include "sizeUtil.h" Widget::widget (Qwidget *parent): Qwidget (parent) {Qvboxlayout *layout = new QVB    Oxlayout (this); Case 1.    Background Qlabel *label = new Qlabel ("Hello Scalable label");    Layout->addwidget (label, 1);                 /* top Right bottom Left */Label->setstylesheet ("Qlabel{border-image:url (:/bkgnd.9.png) 38 6 6 16;" "BORDER-LEFT-WIDTH:16; border-top-width:38; "BORDER-RIGHT-WIDTH:6;    Border-bottom-width:6} "); Case 2.    Image Qlabel *head = new Qlabel;    Qpixmap Orig (":/head.png");    Orig.setdevicepixelratio (Sizeutil::instance (). Dpifactor ());    Head->setpixmap (orig);    Layout->addwidget (head); Case 3.    Text button Qhboxlayout *hlayout = new Qhboxlayout;    Layout->addlayout (hlayout);    Qpushbutton *button = new Qpushbutton ("Text button"); Hlayout->addwIdget (button); Hlayout->addstretch (1);} Widget::~widget () {}

This is all of the code, although simple, basically can explain the problem.

Blog Star selection, Click Vote me a vote, thank you . If you have voted, you can also point oh, every day can cast a vote.

The complete project code can be downloaded here: click to download .

------------Review the Qt on Android series:

Qt on Android: text-to-detail Hello world whole process

Introduction to the development of Qt 5.2 for Android under Windows

Qt for Android deployment process Analysis

QT on Android: output qt Debug information to Logcat

Qt on ANDROID:QT 5.3.0 released for Android improvement instructions

Qt on Android episode 1 (translation)

Qt on Android episode 2 (translation)

Qt on Android episode 3 (translation)

Qt on Android episode 4 (translation)

Qt for Android compiled pure C project

Windows under Qt for Android compiled Android C language executable program

Qt on Android:android SDK installation

Qt on android:http download and JSON parsing

Qt on Android Settings app is named Chinese

QT on Android: let Qt Widgets and QT Quick apply full screen display

Qt on Android: How to adapt to different screen sizes

Qt on Android: Using JNI with third-party jar packages

Introduction to "Qt on Android Core programming"

Qt on Android: Resource file system QRC and assets

Qt on Android: Creating a Scalable interface