Privacy policyContactsAbout siteOpinionsGitHubDonate
© EVILEG 2015-2018
Recommend hosting

QML - Lesson 009. Scalable interface in Qt QML Android

Android, Desktop, QML, Qt, scalable, scalable interface, масштабируемый интерфейс

If we talk about Scalable interface, that is scalable interfaces for developing applications on Qt, this is the main problem is that you need to create an interface that will be read perfectly on all screens, whether computer screen or a smartphone screen.

Parameters of the GUI, such as the width and height are specified in pixels in Qt , but with the same screen resolution on your computer and on your phone (for example, 1366 x 768 pixels) get completely different results. On your computer, button size 40 by 60 pixels would be convenient, I would even say a large, and on the screen of the smartphone is already on it will be difficult to get a finger.

Therefore the development of a single application interface for multiple platforms and screens must be some way to solve the interface problem of scalability.

Scalable interface

The fundamental decision on how to create a scalable interface, is to determine the size of the elements depending on the density of pixels per millimeter or inch.

dpi - the number of pixels per inch. This feature is used much more often than the number of pixels per mm. Using this feature, you can recalculate the pixels that will be in the key of 1 to 2 centimeters, and thus create an interface application, which will look absolutely the same on all devices, under which you will lead the development. Regardless of the size of the application will display.

After recalculation of pixels you get an abstract value, which is called:

dip or dp - Density-independent Pixels . Pixel is independent of density. That will allow the interface to write applications without worrying about how many pixels is the width and height of the screen on a smartphone or tablet.

Development of a scalable interface for Android

As is known, devices running Android are many large and they all have a variety of screen resolutions, so, Google gives the following recommendation on the development of a scalable interface:

  • The interface must be created on the basis of dip (independent of the density of pixels)
  • And, in general, use the following formula to convert a dip in the number of pixels:

px = dp * (dpi / 160)

This formula takes the ratio of the density of the pixels of the target device to the pixel density devices mdpi screen, that is, medium dpi . The formula works perfectly for a 5-inch full HD screen.

If we talk specifically about Qt , then in this case it should be noted that Qt does not allow setting the interface parameters directly into the dip. It is necessary to produce the recalculating of a pixel density of dpi in pixels relative dip. That is, the reduced use of the above formula.

When developing Scalable interface to the Qt QML You can use a separate entity that will take your dip pixels and return the equivalent in the physical screen pixels, as in the code below.

pixelDenstity function returns the density of pixels per millimeter, so the resulting value we multiply by 25.4 to convert to inches. And then the function of the object receiving dip pixels already scaled back the number of physical pixels on the screen of the target device. At the same time I added a check on the pixel density is less than 120 dpi . It is necessary for normal dekstopov, such as my laptop with a diagonal of 15.6 inches and a resolution of 1366 by 768. In this case, the density is equal to 72 dpi. And if this value more and divide by 160, then the interface will be a very small size, which is not acceptable for a desktop PC. Therefore it is not produced in the dip transfer px for desktops. dip in this case is equal to px .

import QtQuick 2.0
import QtQuick.Window 2.0

Item {

    property int dpi: Screen.pixelDensity * 25.4

    function dp(x){
        if(dpi < 120) {
            return x; // For the usual computer monitor
        } else {
            return x*(dpi/160);

Conclusion. Scalable interface

As a result, the work function of the object I was able to get the following picture of your application on the screen of the smartphone Meizu m1 note with full HD screen of 5.5 "and 15.6" screen notebook


Only authorized users can post comments.
Please, Log in or Sign up
Jan. 22, 2019, 9:22 p.m.

C++ - Test 001. The first program and data types

  • Result:40points,
  • Rating points-8
Jan. 22, 2019, 2:15 p.m.

Qt - Test 001. Signals and slots

  • Result:89points,
  • Rating points6
Jan. 20, 2019, 6:39 p.m.
Ivan Otreshko

C++ - Тест 003. Условия и циклы

  • Result:0points,
  • Rating points-10
Last comments
Jan. 22, 2019, 1:17 p.m.
Евгений Легоцкой

Создайте тогда тему здесь на форуме в разделе Qt с выкладками кода и вашими попытками внедрения делегата, позже гляну или может кто-то ещё глянет из опытных пользователей.
Jan. 22, 2019, 1:13 p.m.

Не проще тогда использовать сразу кастомный делегат с чекбоксом? Я попробовал, но там засада в том, что чекбокс показывается только при щелчке на ячейку, а дефолтно показывается значение. Как ...
Jan. 22, 2019, 12:15 p.m.
Евгений Легоцкой

Если будет не приемлемо потом, то тогда через кастомный Item Delegate нужно будет перерисовать ячейки в той колонке.
Jan. 22, 2019, 12:09 p.m.

Получилось приемлемо. Спасибо!Нюанс только в том, что поле рядом с чекбоксом не пропадает, оно просто пустое, что видно при выделении ячейки. Но этого достаточно.
Jan. 22, 2019, 11:50 a.m.
Евгений Легоцкой

Переопределить метод data для той колонки и роли Qt::DisplayRole, чтобы в том случае возвращался QVariant() я так думаю... Но возможно, что у вас там будут нюансы, если вы туда чекбокс за...
Now discuss on the forum
Jan. 23, 2019, 7:54 a.m.

Зарание спасибо.А еще на эту тему можно будет сделать статью. Это контент будет уникальным.
Jan. 23, 2019, 7:37 a.m.
Евгений Легоцкой

Hello. Maybe the English will be better for you? I think russian is not native language for you, or did I mistake? Did I undesrtood rightly, that you mean this documentation ( ...
Jan. 22, 2019, 1:45 p.m.

Всем добрый день. Суть задачи: надо, чтобы в одной из колонок QTableView вместо хранимого в QSqlTableModel значения выводился чекбокс и при смене состояния чекбокса значения в базе тоже ...
Jan. 22, 2019, 1:15 p.m.

Евгений, огромное спасибо, все работает!
Join us in social networks

For registered users on the site there is a minimum amount of advertising