Qt on Android: Create a scalable interface, qtandroid

Qt on Android: Create a scalable interface, qtandroid

To use Qt to develop Android applications, you also need to adapt to different mobile devices and adapt to a variety of screens and resolutions. This time we will discuss how to use the mechanism provided by Qt to create a scalable interface.

DPI

DPI must be explained.

DPI, dot per inch, that is, the number of points contained in each inch. Another concept is PPI, that is, the number of records per inch.

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

DPI affects the interface: For images with the same resolution (in pixels), the larger the DPI, the smaller the screen.

Three types of scalable Elements

A Qt mobile app has three types of scalable UI elements:

 

• Text
• Image
• Background

 

Let's take a look at it separately.

Text

For text, you only need to set the pointSize of the font (QFont) used by the specific text display and input control. Such methods as QLabel, QPushButton, and QLineEdit are applicable.

QFont has two expressions: pixelSize and pointSize. PointSize will adjust the font Based on the DPI of the device where the application is located, so that the effects on devices with different DPI levels are consistent.

In Qt, the font used by a Widget can be changed separately, or the global font can be provided through QApplication. In this way, widgets without specific settings will use the global font.

Image

As we have mentioned above, the larger the screen DPI for images with the same resolution, the smaller the screen DPI will be.

Qt can handle this situation. Let's take QPixmap as an example.

QPixmap has two methods:

 

• Void setDevicePixelRatio (qreal scaleFactor)
• Qreal QPixmap: devicePixelRatio () const

 

These two methods operate on a property called device pixel ratio, which specifies the conversion ratio between device-related pixels and device-independent pixels. We can adjust it to change the effect of an image on the mobile phone screen.

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

How can I obtain the devicePixelRation of a device?

QScreen has a method to return this value: qreal QScreen: devicePixelRatio () const

QGuiApplication and QWindow classes also have methods of the same name.

We can also use the logicalDotsPerInch () method of QScreen to calculate by using a common DPI (such as 72). The following is the sample code:

 

[Cpp]View plaincopy

1. Float SizeUtil: dpiFactor ()
2. {
3. QScreen * screen = qApp-> primaryScreen ();
4. Return 72/screen-> logicalDotsPerInch ();
5. }

 

The above method is used in the following example.

It should be noted that when using QPixmap and QImage, the built-in control of Qt determines the size of the Control Based on devicePixelRation. In our example, QLabel is used to display the image.

Background

The background is either a certain color or an image. When using an image as the background, the image is stretched. Android uses the 9 patch image to solve this problem. Qt also provides something similar: border-image.

In applications based on Qt Widgets, we can set border-image through qss to construct a scalable background.

 

In the help of Qt, the four lines cut an image into nine parts. during use, the four corners can be kept unchanged, and other parts can be stretched or tiled to adapt to the interface space size.

 

Well, there are so many basic backgrounds. Let's look at a simple example.

Scalable interface Example

Let's first look at the results and then look at the code.

Is the running effect on the PC:

 

Is the effect on the phone. At this time, devicePixelRatio is not set for the image.

 

The devicePixelRatio is not set, and the image looks much smaller. Comparing the devicePixelRatio with the text, we can see that the picture is out of proportion.

Is the effect of setting devicePixelRatio, it looks consistent.

Code Analysis

Created an application based on Qt Widgets, named scalabeUI, and created two files: sizeUtil. h and sizeUtil. cpp.

Two image resources are used in the project:

I added the image to qrc.

 

SizeUtil. h is as follows:

 

[Cpp]View plaincopy

1. # Ifndef SIZEUTIL_H
2. # Define SIZEUTIL_H
3. # Include <QFont>
4. # Include <QString>
6. Class SizeUtil
7. {
8. Private:
9. SizeUtil (){}
10. SizeUtil (const SizeUtil &);
11. SizeUtil & operator = (const SizeUtil &);
12. Public:
13. ~ SizeUtil (){}
14. Static SizeUtil & instance ();
15. Int defaultFontHeight ();
16. Int widthWithDefaultFont (const QString & text );
17. Int widthWithFont (const QString & text, int fontPointSize );
18. Int fontHeight (int fontPointSize );
19. Float dpiFactor ();
20. };
22. # Endif // SIZEUTIL_H

SizeUtil. cpp is as follows:

 

 

[Cpp]View plaincopy

1. # Include "sizeUtil. h"
2. # Include <QApplication>
3. # Include <QFontMetrics>
4. # Include <QScreen>
6. SizeUtil & SizeUtil: instance ()
7. {
8. Static SizeUtil util;
9. Return util;
10. }
12. Int SizeUtil: defaultFontHeight ()
13. {
14. Return qApp-> fontMetrics (). height ();
15. }
17. Int SizeUtil: widthWithDefaultFont (const QString & text)
18. {
19. Return qApp-> fontMetrics (). boundingRect (text). width ();
20. }
22. Int SizeUtil: widthWithFont (const QString & text, int fontPointSize)
23. {
24. QFont f = qApp-> font ();
25. F. setPointSize (fontPointSize );
26. QFontMetrics fm (f );
27. Return fm. boundingRect (text). width ();
28. }
30. Int SizeUtil: fontHeight (int fontPointSize)
31. {
32. QFont f = qApp-> font ();
33. F. setPointSize (fontPointSize );
34. QFontMetrics fm (f );
35. Return fm. height ();
36. }
38. Float SizeUtil: dpiFactor ()
39. {
40. QScreen * screen = qApp-> primaryScreen ();
41. Return 72/screen-> logicalDotsPerInch ();
42. }

The SizeUtil class is mainly used to calculate the pixel size of text.

 

The new project wizard generates Widgets. cpp and widgets. h. I modified the widgets. cpp and processed the text, images, and backgrounds. The Code is as follows:

 

[Cpp]View plaincopy

1. # Include "widget. h"
2. # Include <QVBoxLayout>
3. # Include <QHBoxLayout>
4. # Include <QLabel>
5. # Include <QPushButton>
6. # Include "sizeUtil. h"
8. Widget: Widget (QWidget * parent)
9. : QWidget (parent)
10. {
11. QVBoxLayout * layout = new QVBoxLayout (this );
13. // Case 1. background
14. QLabel * label = new QLabel ("Hello Scalable Label ");
15. Layout-> addWidget (label, 1 );
16. /* Top right bottom left */
17. Label-> setStyleSheet (
18. "QLabel {border-image: url (:/bkgnd.9.png) 38 6 6 16 ;"
19. "Border-left-width: 16; border-top-width: 38 ;"
20. "Border-right-width: 6; border-bottom-width: 6 }");
22. // Case 2. image
23. QLabel * head = new QLabel;
24. QPixmap orig (":/head.png ");
25. Orig. setDevicePixelRatio (SizeUtil: instance (). dpiFactor ());
26. Head-> setPixmap (orig );
27. Layout-> addWidget (head );
29. // Case 3. text button
30. QHBoxLayout * hlayout = new QHBoxLayout;
31. Layout-> addLayout (hlayout );
32. QPushButton * button = new QPushButton ("Text Button ");
33. Hlayout-> addWidget (button );
34. Hlayout-> addStretch (1 );
35. }
37. Widget ::~ Widget ()
38. {
40. }

 

This is all about the code. Although simple, the problem can be explained.

 

Blog Star Selection, click to vote for me, thank you. You can also vote once. You can vote every day.

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

Other brilliant articles

 

Using Autocompletetext in android dialog for large-scale website architecture design-Solr mysql hash index android learning notes (32) grid view (GridView) and graphic switcher (ImageSwi... android learning notes (31) List component (ExpandableListView)