Orientation Example

The UI in landscape mode

The UI in portrait mode

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:

The landscape UI

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:

The portrait UI

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();
}

Files:

© 2016 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.