Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP

The article on the audio player in Qt we learned how to play the audio tracks and switch between them in the playlist.

How about to customize the look of the player so that he looked like, for example, AIMP? Just for comparison, look at the original and AIMP appearance of the player after customization.

The main problem of such customization Qt applications is that Qt has no means to customize the frame of the application window. That is, in the case of Windows, you must use for decorating windows WinAPI, and in case of unix and linux systems use the appropriate API decorators windows.

The only thing that can make Qt - it's completely disable the window frame. Then you need to write a completely decorating the windows by means of the Qt, without using the operating system's capabilities, write the logic of the collapse buttons, and maximize the window, as well as the logic of moving and changing the application window is resized. Well and, accordingly, to paint all styles of interface elements using the mechanism QSS StyleSheet. An alternative design is QPalette, but not always occurs correctly processing styles as opposed to the application of QSS Stylesheet.

Disabling the frame of the application window

To correctly handle the application's interface, you'll need:

to disable the window frame;

make transparent the main widget of the window in which the entire interface;

and interface elements themselves placed inside another widget, which will be located inside the main and at the same time is not transparent;

also need to make to create a shadow around the widget interface to emulate the shadow of the application window, as is done in conventional windows and that those windows have AIMP.

Before turning off the window frame and the installation of the main widget in transparency mode in the Graphics Designer interface itself some changes were made.

As you can see the tree of elements, there is a main widget, which should be transparent, as well as the widget GUI. The area enclosed between two rectangular border highlighted in red - is the visible part of the main widget. It will be located on the shadow of the application window, as well as an area that will be used to change the size of the application window.

To turn off the frame of the window you have to set a flag
Qt::FramelessWindowHint
. To install the widget's background in a completely transparent mode you must set the attribute
Qt::WA_TranslucentBackground
.

The installation of the shade should be done not on the very basic widget, and the widget that contains the application interface. To create a shadow effect is used
QGraphicsFropShadowEffect
object class.

All this is done in the class constructor Widget, which is responsible for the application window.

/// Настройка UI
this->setWindowFlags(Qt::FramelessWindowHint); // Disable window decoration
this->setAttribute(Qt::WA_TranslucentBackground); // Making the background transparent main widget
this->setStyleSheet(StyleHelper::getWindowStyleSheet()); // Set the widget style
// We create a shadow effect
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect(this);
shadowEffect->setBlurRadius(9); // Set the blur radius
shadowEffect->setOffset(0); // Set the shadow offset
ui->widgetInterface->setGraphicsEffect(shadowEffect); // Set the shadow effect on the box
ui->widgetInterface->layout()->setMargin(0); // Set the margins
ui->widgetInterface->layout()->setSpacing(0); // Set the size of the space between the elements in the placement of the widget

QSS Stylesheet

As you have already noticed, in a piece of code resulted above used
StyleHelper
class, which is a static
getWindowStyleSheet()
method. This class is a complementary and returns
QString
, describing the style of interface design for the widget. These methods also do the installation icon buttons of resource files, some of these icons is shown below.

QSS styles are made on the basis of CSS styles in the web-imposition. They are responsible for exactly the same parameters. For example, padding, margin, etc.

To implement the design of the application window used
StyleHelper
class with the following contents.

stylehelper.h

I draw your attention that the class uses two methods, with the styles that are applied to one and the same element (button maximization / normalization of the application window size) under certain conditions. These methods
getMaximizeStyleSheet()
and
getRestoreStyleSheet()
.

stylehelper.cpp

As you can see, the methods described in the class style of an entire application interface, as well as the styles of the so-called pseudo-responsible for the state of the object when it was clicked or when the mouse cursor is over the object. For these states, and the connection is also made of different icons, buttons with regard to the application.

widget.cpp

To implement the move and change the size of the application window, you need to keep track of exactly where there was a click. If we clicked inside the widget interface (but where there is no control that intercepts click events, such as a button), then we are able to move the application window. If you clicked on one of the four areas to resize, then we carry out the resizing respectively.

The figure below shows the red area to resize, and blue highlighted area to move the application window.

And now we shall understand with the code, all the points in it commented.

Conclusion

Thus, it is possible to create a fully customized application interface in Qt. It remains only to decide, and if it is necessary for you. If you are not particularly straining the system frame of the application window, it is possible and does not cost much to bother with it, but if you still really want to do with their own appearance even close button of the application window, note that the figures shown in this code, the article is not enough, to cover all the nuances of the application window. For example, there is no change in the size of both the width and height. And occasionally not entirely correct changes the appearance of the cursor when you move. However, I think that the basic idea of ​​customization is now clear.