IoT-Gadgets-Logo-272-90

Font Change part 3: Flexible UI Layouts

By
Ash
 - 
Jan 10, 2012

 
As discussed on 18th November and on 21st December in this blog, the metrics of the default font of Nokia N9, the Nokia Pure Text typeface, have been updated in the Middle East and African variant (PR1.1.1, 22.2011.44-2) and will be changed in all devices in a future software update.

As a result of the update, text will occupy approximately 20% more space vertically in order to accommodate e.g. the Arabic script.

The two previous blog posts discussed two options for fixing text item height (e.g. Qt Quick Component Labels) so that the resulting text renders (almost) exactly the same on the screen, independent of the software release that the device has.

However, in many cases changing the height of the text is not the best idea. Often, it is better to create a flexible UI layout that contain text items of varying height/size and still keep the application UI beautiful and fully usable.

To illustrate potential problems, the following picture shows a UI that was created by anchoring the elements to the top of the page and further to each other. Everything seems to be ok in one specific case (on the left), but when the font height changes (on the right), the "Cancel" button disappears from the visible part of the screen, making the UI unusable.
 

 
In this case, a much better option is to anchor the title text to the top and the two buttons to the bottom of the page and then placing the long text item into a container that the user can pan to show the part of text that does not fit to the screen.
 

 
In this example, we have used the QML flickable element, but other types of design are possible as well, see e.g. the how a "expand/collapse" button has been used in N9 calendar and contacts application or in the Nokia Store client application to show/hide additional details and longer description text.

Here is how the second example would look like in QML code:

import QtQuick 1.1
import com.nokia.meego 1.0
Page {
    Label {
        id: titleText
        anchors {
            top: parent.top
            left: parent.left
            margins: 10
        }
        text: "Flickable Text"
        font.pixelSize: 42
    }
    Flickable {
        width: 400; height: 180
        contentWidth: longText.width; contentHeight: longText.height
        clip: true
        anchors {
            top: titleText.bottom
            left: parent.left
            margins: 10
        }
        Label {
            id: longText
            font.pixelSize: 24
            width: 400
            wrapMode: Text.WordWrap
            text: "Anchoring UI elements to each other..."
        }
    }
    Button {
        id: okButton
        anchors {
            bottom: cancelButton.top
            left: parent.left
            margins: 10
        }
        text: "OK"
    }
    Button {
        id: cancelButton
        anchors {
            bottom: parent.bottom
            left: parent.left
            margins: 10
        }
        text: "Cancel"
    }
}

Notice that the widths and heights of the elements have been hardcoded for the purposes of this simple example only. Also, it is always a good idea a provide some visual clue which shows that there is more content, but we wanted to keep the example in here to the bare minimum.

Notice that the need for flexible UI layouts does not only come from the change of the font metrics. It also needed whenever you want to provide localizations for your application: the length of text can vary a lot in different languages.

I hope these three blog posts have given you some ideas on how to design robust and at the same time beautiful UIs for your applications.

 

Source Nokia Developer Blogs

IoT-Gadgets-Logo-272-90

About us

IoT Gadgets is dedicated to bring you all the Internet of Things IoT news that pertains to gadgets. Simple. We love for you to join us on this journey.

Contact us: [email protected]

FOLLOW US

crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram