Explanation for Using QLabel

Let’s begin by using the empty window script you created in Chapter 1 and use it as the foundation for creating Listing 2-1.

First, let’s import the modules we need. To create the window, we need to import another PyQt class from the QtWidgets module, the QLabel class.

This time we also need to import the QtGui module. The QtGui module handles numerous graphic elements used in GUIs. QPixmap is a Qt class that is optimized for showing images on the screen and is useful for displaying an image on a QLabel object.

You’ll need to create a MainWindow class that inherits from the QWidget. If you copied the script from Chapter 1, simply change the name of the EmptyWindow class to MainWindow. Next, initialize the size of the window with setGeometry() and set the title of our GUI using setWindowTitle().

Next, call the method setUpMainWindow(), which is used for not only setting up and arranging the widgets in the main window but for structuring the code as well. This method is created in Listing 2-2. Then we use the show() method to display the window. To set up the application, first create a QApplication object. Then initiate the window. Next, use exec() to begin the event loop. Finally, sys.exit() is used to handle safely closing the program.

The next thing to do is to create the MainWindow method, setUpMainWindow().

First, you must create a QLabel object. By passing self as a parameter to QLabel, you set the MainWindow class as the parent of the label. This will be helpful for displaying and arranging the widget in the parent object. Next, specify what the label will say using setText(). Here, the text is set to "Hello". In the following line, we use the move() method to arrange the label in the window.

PyQt has a number of layout techniques, including horizontal layouts, grid layouts, and absolute positioning . We’ll take an in-depth look at those classes in Chapter 4. For the programs created in this chapter, we will be using absolute positioning with the move() method. With move(), you only need to specify the x and y pixel values of where you want to place the widgets.

Imagine the main window as a graph where its upper-left corner is point (0,0). The x and y values you choose in move() refer to the point where the widget's top-left corner is placed in the main window. For our text label, we specify the values to be x=105 and y=15. This is definitely not the best method for arranging widgets in a window for a number of reasons. For one, it is complicated and involves using trial and error for setting your widget’s position. Another reason has to deal with resizing a window. If you were to adjust the size of the window by dragging on the bottom-right corner, you’ll notice that the widgets don’t move or stretch. Qt’s layout classes are great for handling this and other issues. We’ll discuss using the layout classes in Chapter 4.

You might think learning using move() is a waste of time, but it can be very useful to understand how to use pixel values to manipulate widgets, especially when we begin dealing with more advanced topics like animations and graphics classes.

The image is loaded in a similar fashion, creating a world_label object to be placed in the main window. Then we construct a QPixmap of the image and use setPixmap() to set the image displayed onto the world_label. The image’s absolute location is set using move(). An exception is thrown if the image cannot be found.

Each of PyQt’s different classes has their own methods that can be used to customize and change their look and functionality. In the Appendix, you can find a list of the widgets used in this book along with some of the more common methods you are likely to use to modify them.

Once you run the program, you should see a window like Figure 2-1 appear on your screen. In the next section, you’ll build a slightly more complex GUI using QLabel widgets.

Designing the User Profile GUI

Typical user profile applications often use a combination of different elements, both interactive and static. The schematic in Figure 2-3 focuses on utilizing solely static QLabel widgets for displaying information in the window.

If you compare Figure 2-3 with Figure 2-2, you will notice the similarity with how they are arranged. The user interface can be divided into two parts. The upper portion uses QLabel objects that display a profile image that lies on top of a background image.

The bottom portion shows the user’s information with multiple QLabel widgets, with the textual information arranged vertically and broken down into smaller sections, delineated by the use of different font sizes.

Explanation for the User Profile GUI

For the User Profile GUI, import the same classes and modules as the earlier application along with the addition of one new class, the QFont class from the QtGui module, which allows for us to modify the size and types of fonts in our application. This is perfect for creating the different header sizes.

The images list contains the specific file locations that will be used for both the blue background and the user’s profile image in the top part of the window. Using a for loop, iterate through the list’s items, create a QLabel object for each, instantiate a QPixmap object, set the pixmap for the label, and if the image is the profile image, center it in the window using move(). Using move() and absolute positioning, you can easily overlap images, but you will need to load the images in order from the bottom-most image to the top-most.

After the image labels are created, several QLabel objects for showing text are instantiated. For example, the user_label displays the user’s name using setText() in the window. You can set a QLabel widget’s font with the method setFont(). Be sure to pass a QFont object and specify the type of font and its size. The user_label is then centered in the window using move(). Other labels are created in a similar manner.

Running the application now, you will see a window appear like the one in Figure 2-2.