Developing for SailfishOS: styling the app

Hello! This article continues a series of articles devoted to the development of applications for Sailfish. In previous articles I described how to start develop for the mobile platform Sailfish OS and told development fundamentals under the platform. In this article I will talk about how to make your application, from the point of view of style and sizes, looked like a standard application platform for SailfishOS.

To achieve the above purpose, a part of Sailfish Silica component is present Theme. This component provides information on standard sizes, fonts, margins, colors and other style components for applications on the platform, SailfishOS. In other words, the Theme helps to ensure that the graphical interface of the application is standard for the platform. Consider some of the properties of this component in more detail.

Fonts


In applications for SailfishOS standard uses two font families: one for headlines and a different one for all other labels. To find the desired font family, you can use the properties fontFamilyHeading and fontFamily component Theme.

As Theme allows you to learn the seven standard font sizes:
the

    Theme.fontSizeHuge is the largest recommended size of a font. Can be used, for example, for very large headers or components, in which the text plays a crucial role (for example, a numeric telephone keypad).

    Theme.fontSizeExtraLarge — slightly smaller font size. Can be used, for example, for smaller headers.

    Theme.fontSizeLarge normal large font size. Can be used, for example, for the standard headers. This size is used for titles of pages in the component PageHeader.

    Theme.fontSizeMedium — one standard medium size. Used in most cases. This size is used in most controls, where there is text.

    Theme.fontSizeSmall — small font size. Used for background of text or large paragraphs.

    Theme.fontSizeExtraSmall — smaller font size. It is also used for secondary text, but smaller. For example, such a size is used in the signatures to the component TextSwitch, which implements the element-switch (toggle button).

    Theme.fontSizeTiny is the smallest recommended font size. This size is used to display the secondary text in cases when the place under it is strictly limited.


Thus, the example displays two text boxes using a standard QML component Text, where the first block acts as a header, and the second plain text will look as follows:
the
Text {
text: Title
font.family: Theme.fontFamilyHeading
font.pixelSize: Theme.fontSizeLarge
}
Text {
text: "plain text"
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeMedium
}


Margins


Margins are a very important aspect of the development of GUI applications, especially on mobile platforms, where sometimes there are problems with the correct layout of elements on the screen. Too much padding between the items take up valuable space on the screen. Too small indentation, on the contrary can lead to the fact that, for example, the user might accidentally click on a button that doesn't want to click, simply because it will be located too close to the right.

Component Theme provides the following options for obtaining the size of a standard indentation:
the

    Theme.paddingLarge — usually used to set the distance between elements of the interface.

    Theme.paddingMedium — used to set the distance between the interface elements that are related to each other in meaning and therefore should be visually "together".

    Theme.paddingSmall is the smallest distance between elements of the interface. Often used in cases where screen space is limited.



Sizes


Component Theme also allows you to know the standard sizes of buttons thumbnail cover, icons and other UI elements. Parameters that return data values, can be useful in developing their own interface elements in order to match the standard size.

Standard button sizes can be obtained using the following parameters:
the

    Theme.buttonWidthSmall is the length of a small button, it is used in Sailfish for the default button. This value is chosen so that two buttons with the specified long exactly fit in one line across the width of the screen in portrait orientation.

    Theme.buttonWidthMedium is the length of the middle button.

    Theme.buttonWidthLarge — the length of the big button. Usually, only one button of this length can fit in width in portrait orientation.


In previous articles I wrote that cover app may be a large or small size. These dimensions can be obtained by using the parameters Theme.coverSizeLarge and Theme.coverSizeSmall. This can be useful when the contents of the cover app is calculated depending on its size.

Standard size for icons can be obtained using the following parameters:
the

    Theme.iconSizeExtraSmall is the smallest icon size. Used for example for icons in the status bar.

    Theme.iconSizeSmall — the standard size of the small icons, such as on the controls inside cover.

    Theme.iconSizeSmallPlus — a slightly larger variant of the previous size. Used, for example, icons for notifications.

    Theme.iconSizeMedium is the most commonly used size. Can be used for example for icons inside the small and medium elements of the list.

    Theme.iconSizeLarge — large size icons. Used for example for the icons on the buttons.

    Theme.iconSizeExtraLarge is the largest size of the icons.

    Theme.iconSizeLauncher — used for application icons on the application screen of the system.


Finally, just standard dimensions of the elements can be found by using the following parameters:
the

    Theme.itemSizeExtraSmall — this size, for example, the height of a standard button.

    Theme.itemSizeSmall the same, for example, the height of a standard list item with single line of text.

    Theme.itemSizeMedium the same, for example, the height of a standard list item with two lines of text.

    Theme.itemSizeLarge — suitable for controls with multiple lines of text. Is used, for example, the height of the standard header element of the page

    Theme.itemSizeExtraLarge — suitable for installation of large size elements containing, for example, images.

    Theme.itemSizeHuge is suitable, for example, to set the image sizes on the full-screen grid of images (in application gallery).



Colors


In addition to sizes when creating your own components you can use system colors. It will enable us to do so that custom components will appear as a standard for the platform. Component Theme contains multiple-valued parameters standard colors:
the

    Theme.primaryColor — the base color, usually used to emphasize the active elements of the interface.

    Theme.secondaryColor is a secondary color, usually used to render less important parts of the interface.

    Theme.highlightColor — the basic color for non-interactive text, as well as for highlighting of elements when clicking on them.

    Theme.secondaryHighlightColor is a secondary highlight color used to highlight important interface elements.

    Theme.highlightDimmerColor — the darker lighting used in cases when it is necessary to highlight the element, but not to distract attention from more important elements.


Two further ThemehighlightBackgroundColor and highlightBackgroundOpacity return, respectively, the values of colors and opacity for background of highlighted text. Feature for all color parameters is that they depend on the current theme selected on the device and follow changes.

Features


An interesting feature of the component Theme is that the value of its parameters depend on the specific device. For example, the value of the parameter Theme.horizontalPageMargin on smartphones usually equal to the value parameter Theme.paddingLarge, and the tablets will be more to visually separate the page content from the edges of the screen. This feature is very convenient because it allows describing the graphical interface without separating them depending on the type of device. The developer saving development time, and the application looks good on any device.

If for some reason you must use non-standard sizes or margins, then here come to the aid of the Theme.pixelRatio. It returns the ratio of physical pixels to logical (similar to device-pixel-ratio in CSS) and could be useful in order to regulate non-standard values depending on the resolution of a specific device. In addition, in such a situation, can be useful parameters height and width component Screen (also included in the Sailfish Silica), which returns the height and width of the device screen in pixels, respectively. It should be noted that these parameters do not depend on the orientation of the screen, i.e., height always returns the larger of the two dimensions of the screen.

Component Screen contains a parameter sizeCategory that returns the category of the size of the device screen in the form of one of four predefined values: Screen.Small, Screen.Medium, Screen.Large, Screen.ExtraLarge. This option can be used when, for example, the application provides various layout elements depending on the type of device (smartphone or tablet).

The following example shows an application that depending on the size of the screen shows a different starting page is:
the
ApplicationWindow {
initialPage: Screen.sizeCategory >= Screen.Large ?
Qt.resolvedUrl("TabletHomePage.qml"):
Qt.resolvedUrl("PhoneHomePage.qml")
}


Additional features


In addition to the above parameters, component Theme also provides two helper functions.

The highlightText(text, pattern, color) returns the styled text passed in the argument text in which all occurrences of a string pattern lit color color. Stylized line here is the view HTML, as in the QML text blocks understand and process HTML code transferred as a text. For example, the following function call:
the
Theme.highlightText("one two three one two three", "two", "red")

return line:
the
time <font color="#ff0000">two</font> three times <font color="#ff0000">two</font> three

A simple application with the following component Label:
the
Label {
text: Theme.highlightText("one two three one two three", "two", "red")
anchors.centerIn: parent
}

will look like this:


The second function is rgba(color, opacity) takes as arguments the color and opacity value (0.0 to 1.0) and returns the passed color applied to it by the opacity value.

That's about it. This article turned out to be shorter than the previous one, but, in my opinion, it touches very important aspects of styling the graphical interface of the application, the knowledge of which will help make your app better and will save development time.

Author: Laura Dennis
Article based on information from habrahabr.ru

Комментарии

Популярные сообщения из этого блога

Vkontakte sync with address book for iPhone. How it was done

Automatically create Liquibase migrations for PostgreSQL

What part of the archived web