August 4, 2016 at 23:00Development for SailfishOS: styling an application
- Tutorial
Hello! This article continues the series of articles on application development for Sailfish. In past articles, I described how to start developing for the Sailfish OS mobile platform and talked about the basics of developing for this platform. In the same article, I will talk about how to make your application, in terms of style and size, look like a standard application for the SailfishOS platform.
To achieve the above goals, Sailfish Silica contains Theme . This component provides information about standard sizes, fonts, indents, colors and other style components for applications on the SailfishOS platform. In other words, the Theme componenthelps to ensure that the graphical interface of the application looks standard for the platform. Let's consider some properties of this component in more detail.
SailfishOS applications use two font families as standard: one for different headings and one for all other labels. Learn desired font family, you can use the properties fontFamilyHeading and fontFamily component Theme .
Just Theme lets you know the seven standard font size:
Thus, an example that displays two text blocks using the standard QML component Text , where the first block acts as a header and the second as plain text, will look like this:
Indentation is a very important aspect of developing a graphical interface of applications, especially on mobile platforms, where sometimes there are difficulties with the correct layout of elements on the screen. Too much indent between elements will take up valuable space on the screen. Too small indentation, on the contrary, can lead to the fact that, for example, the user can accidentally click on a button that he doesn’t want to click, simply because it will be too close to the desired one. Theme
component provides the following options for getting standard indent sizes:
The Theme component also allows you to find out the standard sizes of buttons, cover thumbnails, icons, and other user interface elements. Parameters that return these values can be useful in developing your own interface elements so that they correspond to standard sizes.
Standard button sizes can be obtained using the following parameters:
In previous articles, I wrote that the cover of an application can be large or small. These sizes can be obtained using Theme.coverSizeLarge and Theme.coverSizeSmall parameters . This can be useful when the cover content of an application is calculated based on its size.
Standard sizes for the icons can be obtained using the following parameters:
Finally, just the standard sizes of the elements can be found using the following parameters:
In addition to dimensions, you can use system colors when creating your own components. This will also make it possible for non-standard components to look standard on the platform. Theme component contains several parameters that return standard colors:
Two additional Theme parameters - highlightBackgroundColor and highlightBackgroundOpacity - return, respectively, the color and opacity values for the background of the highlighted text. A feature of all color parameters is that they depend on the current theme selected on the device and change after it.
An interesting feature of Theme component is that the value of its parameters depends on the specific device. For example, the value of Theme.horizontalPageMargin on smartphones is usually equal to Theme.paddingLarge , and on tablets it will be larger to visually separate the contents of the page from the edges of the screen. This feature is very convenient, because it allows you to describe the parameters of the graphical interface without separating them depending on the type of device. At the same time, the developer saves development time, and the application looks good on any device.
If for some reason it is necessary to use non-standard sizes or indents, here the Theme.pixelRatio parameter will come to the rescue. It returns the ratio of “physical” pixels to “logical” ones (similar to the device-pixel-ratio property in CSS) and can be useful in order to adjust non-standard values depending on the resolution of a particular device. In addition, in such a situation, the height and width parameters of the Screen component (also included in Sailfish Silica), which return the height and width of the device screen in pixels, respectively, may be useful . It is worth noting that these parameters are independent of the screen orientation, i.e., height always returns the largest of the two screen dimensions.
The Screen component also contains the sizeCategory parameter ., which returns the device screen size category as one of four predefined values: Screen.Small , Screen.Medium , Screen.Large , Screen.ExtraLarge . This parameter can be used in cases where, for example, the application provides for a different layout of elements depending on the type of device (smartphone or tablet).
The following example shows an application that, depending on the size of the screen, displays different start pages:
In addition to the parameters described above, Theme also offers two helper functions.
The highlightText (text, pattern, color) function returns the stylized text passed in the text argument , in which all occurrences of the pattern string are highlighted with color color . By stylized line here we mean HTML, since in QML text blocks understand and process the HTML code passed to them as text. For example, the following function call:
will return the line:
A simple application with the following Label component :
it will look like this:
The second function - rgba (color, opacity) - takes the color and opacity value (from 0.0 to 1.0) as arguments and returns the transmitted color with the opacity value applied to it.
That's all. This article is shorter than the previous ones, however, in my opinion, it touches on very important aspects of styling the graphical interface of the application, the knowledge of which will help to make your application better and save development time.
Posted by: Denis Laure
To achieve the above goals, Sailfish Silica contains Theme . This component provides information about standard sizes, fonts, indents, colors and other style components for applications on the SailfishOS platform. In other words, the Theme componenthelps to ensure that the graphical interface of the application looks standard for the platform. Let's consider some properties of this component in more detail.
Fonts
SailfishOS applications use two font families as standard: one for different headings and one for all other labels. Learn desired font family, you can use the properties fontFamilyHeading and fontFamily component Theme .
Just Theme lets you know the seven standard font size:
- Theme.fontSizeHuge is the largest recommended font size. It can be used, for example, for very large headings or components in which text plays a decisive role (for example, the numeric keypad of a telephone).
- Theme.fontSizeExtraLarge is a slightly smaller font size. It can be used, for example, for smaller headings.
- Theme.fontSizeLarge is the usual large font size. It can be used, for example, for standard headers. This size is used for page titles in the PageHeader component .
- Theme.fontSizeMedium - The standard average font size. Used in most cases. This size is used in most controls where there is text.
- Theme.fontSizeSmall - small font size. Used for background text, or large paragraphs.
- Theme.fontSizeExtraSmall - smaller font size. Also used for background text, but smaller. For example, this size is used in the captions to the TextSwitch component , which implements the toggle button element.
- Theme.fontSizeTiny is the smallest recommended font size. This size is used to display secondary text in cases where the space for it is strictly limited.
Thus, an example that displays two text blocks using the standard QML component Text , where the first block acts as a header and the second as plain text, will look like this:
Text {
text: "Заголовок"
font.family: Theme.fontFamilyHeading
font.pixelSize: Theme.fontSizeLarge
}
Text {
text: "Обычный текст"
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeMedium
}
Indentation
Indentation is a very important aspect of developing a graphical interface of applications, especially on mobile platforms, where sometimes there are difficulties with the correct layout of elements on the screen. Too much indent between elements will take up valuable space on the screen. Too small indentation, on the contrary, can lead to the fact that, for example, the user can accidentally click on a button that he doesn’t want to click, simply because it will be too close to the desired one. Theme
component provides the following options for getting standard indent sizes:
- Theme.paddingLarge - usually used to set the distance between interface elements.
- Theme.paddingMedium - used to set the distance between interface elements that are connected with each other in meaning and therefore visually should be “together”.
- Theme.paddingSmall - the smallest distance between interface elements. Often used when space is limited on the screen.
- Theme.horizontalPageMargin - used to set the distance between the content of the page and the left and right edges of the screen.
Dimensions
The Theme component also allows you to find out the standard sizes of buttons, cover thumbnails, icons, and other user interface elements. Parameters that return these values can be useful in developing your own interface elements so that they correspond to standard sizes.
Standard button sizes can be obtained using the following parameters:
- Theme.buttonWidthSmall - the length of the small button, it is used in Sailfish for the default buttons. This value is selected so that two buttons with the specified length fit exactly in one line across the width of the screen in portrait orientation.
- Theme.buttonWidthMedium - the length of the middle button.
- Theme.buttonWidthLarge - the length of the large button. Usually, only one button of this length can fit in width in portrait orientation.
In previous articles, I wrote that the cover of an application can be large or small. These sizes can be obtained using Theme.coverSizeLarge and Theme.coverSizeSmall parameters . This can be useful when the cover content of an application is calculated based on its size.
Standard sizes for the icons can be obtained using the following parameters:
- Theme.iconSizeExtraSmall - the smallest icon size. Used, for example, for icons in the status bar.
- Theme.iconSizeSmall - the standard size of small icons, such as, for example, on controls inside the cover.
- Theme.iconSizeSmallPlus is a slightly larger version of the previous size. Used, for example, for notification icons.
- Theme.iconSizeMedium is the most commonly used size. It can be used, for example, for icons inside small and medium list items.
- Theme.iconSizeLarge - large icon size. Used, for example, for button icons.
- Theme.iconSizeExtraLarge is the largest icon size.
- Theme.iconSizeLauncher - used for application icons on the system application screen.
Finally, just the standard sizes of the elements can be found using the following parameters:
- Theme.itemSizeExtraSmall - this size, for example, the height of a standard button.
- Theme.itemSizeSmall - equal, for example, to the height of a standard list item with one line of text.
- Theme.itemSizeMedium - equal, for example, to the height of a standard list item with two lines of text.
- Theme.itemSizeLarge - Suitable for controls with multiple lines of text. Used, for example, as the height of a standard page title element
- Theme.itemSizeExtraLarge - suitable for setting sizes of large elements containing, for example, images.
- Theme.itemSizeHuge - suitable, for example, for setting the size of images on a full-screen grid with images (as in the gallery application).
Colors
In addition to dimensions, you can use system colors when creating your own components. This will also make it possible for non-standard components to look standard on the platform. Theme component contains several parameters that return standard colors:
- Theme.primaryColor - the main color, usually used to emphasize the active elements of the interface.
- Theme.secondaryColor - The background color, usually used to render less significant parts of the interface.
- Theme.highlightColor - the main color for non-interactive text, as well as for highlighting elements when you click on them.
- Theme.secondaryHighlightColor - The secondary highlight color used to highlight less significant interface elements.
- Theme.highlightDimmerColor - a darker highlight used in cases where you need to highlight an element, but do not distract attention from more significant elements.
Two additional Theme parameters - highlightBackgroundColor and highlightBackgroundOpacity - return, respectively, the color and opacity values for the background of the highlighted text. A feature of all color parameters is that they depend on the current theme selected on the device and change after it.
Features
An interesting feature of Theme component is that the value of its parameters depends on the specific device. For example, the value of Theme.horizontalPageMargin on smartphones is usually equal to Theme.paddingLarge , and on tablets it will be larger to visually separate the contents of the page from the edges of the screen. This feature is very convenient, because it allows you to describe the parameters of the graphical interface without separating them depending on the type of device. At the same time, the developer saves development time, and the application looks good on any device.
If for some reason it is necessary to use non-standard sizes or indents, here the Theme.pixelRatio parameter will come to the rescue. It returns the ratio of “physical” pixels to “logical” ones (similar to the device-pixel-ratio property in CSS) and can be useful in order to adjust non-standard values depending on the resolution of a particular device. In addition, in such a situation, the height and width parameters of the Screen component (also included in Sailfish Silica), which return the height and width of the device screen in pixels, respectively, may be useful . It is worth noting that these parameters are independent of the screen orientation, i.e., height always returns the largest of the two screen dimensions.
The Screen component also contains the sizeCategory parameter ., which returns the device screen size category as one of four predefined values: Screen.Small , Screen.Medium , Screen.Large , Screen.ExtraLarge . This parameter can be used in cases where, for example, the application provides for a different layout of elements depending on the type of device (smartphone or tablet).
The following example shows an application that, depending on the size of the screen, displays different start pages:
ApplicationWindow {
initialPage: Screen.sizeCategory >= Screen.Large ?
Qt.resolvedUrl("TabletHomePage.qml"):
Qt.resolvedUrl("PhoneHomePage.qml")
}
Additional functions
In addition to the parameters described above, Theme also offers two helper functions.
The highlightText (text, pattern, color) function returns the stylized text passed in the text argument , in which all occurrences of the pattern string are highlighted with color color . By stylized line here we mean HTML, since in QML text blocks understand and process the HTML code passed to them as text. For example, the following function call:
Theme.highlightText("раз два три раз два три", "два", "red")
will return the line:
раз два три раз два три
A simple application with the following Label component :
Label {
text: Theme.highlightText("раз два три раз два три", "два", "red")
anchors.centerIn: parent
}
it will look like this:
The second function - rgba (color, opacity) - takes the color and opacity value (from 0.0 to 1.0) as arguments and returns the transmitted color with the opacity value applied to it.
That's all. This article is shorter than the previous ones, however, in my opinion, it touches on very important aspects of styling the graphical interface of the application, the knowledge of which will help to make your application better and save development time.
Posted by: Denis Laure