Qt 4.8: Orientation Example

Qt Reference Documentation

- Qt 4.8
- ALL VERSIONS

- A
- A
- A
- Print

# Orientation Example

Files:

- widgets/orientation/landscape.ui
- widgets/orientation/mainwindow.cpp
- widgets/orientation/mainwindow.h
- widgets/orientation/portrait.ui
- widgets/orientation/main.cpp
- widgets/orientation/images.qrc
- widgets/orientation/orientation.pro

The Orientation example shows a simple way to use different UIs depending on the screen orientation of a mobile device.

The screen on many mobile devices can be viewed in both portrait and landscape orientation. The orientation can be swiched with the help of a hardware or software trigger. Due to the often small physical screen size, user interfaces has to be very simple and compact to stay usable, and applications usually occupy the whole screen. Designing a user interface that works equally well in both landscape and portrait mode is not always possible, however, so making a different layout for each case usually pays off.

The example application makes use of two different UI widgets created with the Qt Designer, one for portrait and one for landscape orientation. The application has a widget that contains an image and the user is able to select one of three images for it to show. In addition to the two UIs, the application consists of a `MainWindow` class.

## Landscape UI

If the screen is in landscape mode, the user probably holds the device with both hands and is ready to give full attention to the application. The landscape UI looks like this:

To the left is a QWidget called `choiceWidget`, which will show the current image, and to the right are three QRadioButton instances. The active radio button specifies the image to show.

## Portrait UI

When the device is in portrait mode, it usually means that the user holds it with one hand, and can comfortably use the thumb for small amounts of input. The layout is simpler, and is focused on consuming content. The portrait UI looks like this:

Similarly, it contains a QWidget, also called `choiceWidget`, that will show the current image. In contrast to the landscape UI, this one doesn't provide any controls to change the image.

## MainWindow Class Definition

`MainWindow` inherits from QWidget and acts as the top level widget of the application.

     class MainWindow : public QWidget
     {
         Q_OBJECT

     public:
         MainWindow(QWidget *parent = 0);

     protected:
         void resizeEvent(QResizeEvent *event);

     private slots:
         void onRadioButtonClicked(QAbstractButton *button);

     private:
         Ui::LandscapeUI landscape;
         Ui::PortraitUI portrait;
         QWidget *landscapeWidget;
         QWidget *portraitWidget;
     };

The `resizeEvent()` method is re-implemented, and used to check which UI to show. The `onRadioButtonClicked()` slot is connected to the landscape UI's radio button group and selects the current image.

`landscapeWidget` and `portraitWidget` will contain the UI layouts. Only one of them is visible at a time.

## MainWindow Class Implementation

In the constructor, the widgets that will hold the UIs are created and set up.

     MainWindow::MainWindow(QWidget *parent) :
             QWidget(parent),
             landscapeWidget(0),
             portraitWidget(0)
     {
         landscapeWidget = new QWidget(this);
         landscape.setupUi(landscapeWidget);

         portraitWidget = new QWidget(this);
         portrait.setupUi(portraitWidget);

Since the exit buttons on the layouts are different from each other, both of them have to have their `clicked()` signal connected to the `close()` slot of the main widget. The first image is also made current with the call to `onRadioButtonClicked()`.

         connect(portrait.exitButton, SIGNAL(clicked()), this, SLOT(close()));
         connect(landscape.exitButton, SIGNAL(clicked()), this, SLOT(close()));
         connect(landscape.buttonGroup, SIGNAL(buttonClicked(QAbstractButton*)),
                 this, SLOT(onRadioButtonClicked(QAbstractButton*)));

         landscape.radioAButton->setChecked(true);
         onRadioButtonClicked(landscape.radioAButton);

On the Maemo platform, windows are stuck in landscape mode by default. The application has to explicitly say that rotation is supported.

     #ifdef Q_WS_MAEMO_5
         setAttribute(Qt::WA_Maemo5AutoOrientation, true);
     #endif
     }

The `resizeEvent()` is called when the main window is first created, and also whenever the window has been resized. If the window is shown in full screen, this is an indication that the orientation of the screen has changed.

The dimensions of `landscapeWidget` is the transpose of the dimensions of `portraitWidget`. When the orientation is known, both are set to the (possibly transposed) size of the window. Depending on the orientation, one widget is made visible and the other invisible.

     void MainWindow::resizeEvent(QResizeEvent *event)
     {
         QSize size = event->size();
         bool isLandscape = size.width() > size.height();

         if (!isLandscape)
             size.transpose();

         landscapeWidget->setFixedSize(size);
         size.transpose();
         portraitWidget->setFixedSize(size);

         landscapeWidget->setVisible(isLandscape);
         portraitWidget->setVisible(!isLandscape);
     }

When the user selects one of the radio buttons in the landscape UI, the current image is changed. The image is displayed by specifying the background style of the choice widget. Since both `portrait` and `landscape` have a `choiceWidget` of their own, the change has to be reflected in both instances.

     void MainWindow::onRadioButtonClicked(QAbstractButton *button)
     {
         QString styleTemplate = "background-image: url(:/image_%1.png);"
                                 "background-repeat: no-repeat;"
                                 "background-position: center center";

         QString imageStyle("");
         if (button == landscape.radioAButton)
             imageStyle = styleTemplate.arg("a");
         else if (button == landscape.radioBButton)
             imageStyle = styleTemplate.arg("b");
         else if (button == landscape.radioCButton)
             imageStyle = styleTemplate.arg("c");

         portrait.choiceWidget->setStyleSheet(imageStyle);
         landscape.choiceWidget->setStyleSheet(imageStyle);
     }

Synchronizing both UIs like this might become unfeasible when there are many things that can change. In that case it is better to make use of the Model-View-Controller pattern more extensively and share the content between both portrait and landscape widgets. Then an interface for displaying and manipulating it can be tailor made for both orientations.

## The `main()` Function

The main function creates a `MainWindow` instance and shows it full screen.

     int main(int argc, char *argv[])
     {
         QApplication a(argc, argv);

         MainWindow w;
         w.showFullScreen();

         return a.exec();
     }