Development for SailfishOS: application styling
Hello! This article continues the series of articles devoted to developing applications for Sailfish. In previous 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 objective, the Theme component is present in Sailfish Silica. This component provides information on standard sizes, fonts, indents, colors, and other style components for applications on the SailfishOS platform. In other words, the Theme component helps to ensure that the graphical interface of the application looks standard for the platform. Consider some of the properties of this component in more detail.
Applications under SailfishOS use two font families as standard: one for different headers and one for all other captions. You can learn the desired font family using the fontFamilyHeading and fontFamily properties of the Theme component.
Theme also allows you to learn seven standard font sizes:
Thus, an example showing two text blocks using the standard QML Text component, where the first block acts as a title and the second 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 padding between elements takes up valuable space on the screen. Too small an indent, on the contrary, may lead to the fact that, for example, a user may accidentally press a button that he does not want to press, simply because it will be too close to the desired one.
The Theme component provides the following options for getting the size of standard indents:
Theme component also allows you to find out the standard sizes of buttons, thumbnails of the cover, icons and other user interface elements. Parameters that return these values ​​can be useful when designing your own interface elements to fit 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 dimensions can be obtained using the Theme.coverSizeLarge and Theme.coverSizeSmall parameters . This can be useful when the content of the application cover is calculated based on its size.
Standard sizes for icons can be obtained using the following parameters:
Finally, simply the standard dimensions of the elements can be found using the following parameters:
In addition to size, you can use system colors when creating your own components. It also allows you to make non-standard components look standard for the platform. The 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 the Theme component is that the value of its parameters depend on the specific device. For example, the value of the Theme.horizontalPageMargin parameter on smartphones is usually equal to the value of the Theme.paddingLarge parameter, and on the tablets it will be larger to visually separate the page content 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. In this case, 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, the Theme.pixelRatio parameter will come to the rescue . It returns the ratio of "physical" pixels to "logical" (similar to the device-pixel-ratio property in CSS) and can be useful to adjust non-standard values ​​depending on the resolution of a particular device. In addition, in such a situation, the parameters of the height and width 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 do not depend on the orientation of the screen, i.e. height always returns the largest of two screen dimensions.
The Screen component also contains the sizeCategory parameter, which returns the device’s screen size category as one of four predefined values: Screen.Small , Screen.Medium , Screen.Large , Screen.ExtraLarge . This parameter can be used in cases when, for example, the application provides for a different arrangement of elements depending on the type of device (smartphone or tablet).
The following example shows an application that, depending on the screen size, shows different start pages:
In addition to the parameters described above, the Theme component also offers two auxiliary 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 in color . HTML is meant here as a stylized string, since in QML text blocks they understand and process the HTML code transmitted as text. For example, the following function call:
returns the line:
A simple application with the following Label component:
would look like this:
The second function, rgba (color, opacity) , takes the color and opacity value as arguments (from 0.0 to 1.0) and returns the transferred color with the opacity value applied to it.
That's all. This article turned out to be shorter than the previous ones, but in my opinion, it touches on very important points in the stylization of the graphical interface of the application, knowledge of which will help to make your application better and save development time.
The author: Denis Laure
To achieve the above objective, the Theme component is present in Sailfish Silica. This component provides information on standard sizes, fonts, indents, colors, and other style components for applications on the SailfishOS platform. In other words, the Theme component helps to ensure that the graphical interface of the application looks standard for the platform. Consider some of the properties of this component in more detail.
Fonts
Applications under SailfishOS use two font families as standard: one for different headers and one for all other captions. You can learn the desired font family using the fontFamilyHeading and fontFamily properties of the Theme component.
Theme also allows you to learn seven standard font sizes:
- Theme.fontSizeHuge is the largest recommended font size. You can use, for example, for very large headers or components in which text plays a decisive role (for example, the numeric keypad of the phone).
- Theme.fontSizeExtraLarge is a slightly smaller font size. You can use, for example, for smaller headers.
- Theme.fontSizeLarge - the usual large font size. Can be used, for example, for standard headers. This size is used for page headers in the PageHeader component.
- Theme.fontSizeMedium is a standard medium font size. Used in most cases. This size is used in most controls where there is text.
- Theme.fontSizeSmall is a small font size. Used for background text or large paragraphs.
- Theme.fontSizeExtraSmall is a smaller font size. It is also used for secondary text, but smaller. For example, such a size is used in the captions to the TextSwitch component, which implements a toggle button element.
- Theme.fontSizeTiny is the smallest recommended font size. This size is used to display secondary text in cases where space for it is strictly limited.
Thus, an example showing two text blocks using the standard QML Text component, where the first block acts as a title and the second 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 padding between elements takes up valuable space on the screen. Too small an indent, on the contrary, may lead to the fact that, for example, a user may accidentally press a button that he does not want to press, simply because it will be too close to the desired one.
The Theme component provides the following options for getting the size of standard indents:
- Theme.paddingLarge - typically used to set the distance between interface elements.
- Theme.paddingMedium - used to set the distance between interface elements that are related to each other in meaning and therefore must be visually “together”.
- Theme.paddingSmall is the smallest distance between the interface elements. Often used in cases where screen space is limited.
- Theme.horizontalPageMargin - used to set the distance between the page content and the left and right edges of the screen.
Dimensions
Theme component also allows you to find out the standard sizes of buttons, thumbnails of the cover, icons and other user interface elements. Parameters that return these values ​​can be useful when designing your own interface elements to fit standard sizes.
Standard button sizes can be obtained using the following parameters:
- Theme.buttonWidthSmall is the length of the small button, it is used in Sailfish for the default buttons. This value is chosen so that the two buttons with the specified length exactly fit in one line along 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 dimensions can be obtained using the Theme.coverSizeLarge and Theme.coverSizeSmall parameters . This can be useful when the content of the application cover is calculated based on its size.
Standard sizes for icons can be obtained using the following parameters:
- Theme.iconSizeExtraSmall is 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 the 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 frequently used size. You can use, for example, for icons inside small and medium list items.
- Theme.iconSizeLarge - large size icons. Used, for example, for icons on buttons.
- Theme.iconSizeExtraLarge - the largest size of icons.
- Theme.iconSizeLauncher - used for application icons on the system application screen.
Finally, simply the standard dimensions of the elements can be found using the following parameters:
- Theme.itemSizeExtraSmall is of such size, for example, the height of a standard button.
- Theme.itemSizeSmall - equal, for example, to the height of a standard list item with a single 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 header element.
- Theme.itemSizeExtraLarge - suitable for setting the size of large elements containing, for example, images.
- Theme.itemSizeHuge - suitable, for example, for setting image sizes on a full-screen grid with images (as in a gallery application).
Colors
In addition to size, you can use system colors when creating your own components. It also allows you to make non-standard components look standard for the platform. The Theme component contains several parameters that return standard colors:
- Theme.primaryColor - the main color, usually used to emphasize the active interface elements.
- Theme.secondaryColor is a secondary color, usually used to draw 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 is a background color used to highlight less significant interface elements.
- Theme.highlightDimmerColor - a darker backlight 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.
Special features
An interesting feature of the Theme component is that the value of its parameters depend on the specific device. For example, the value of the Theme.horizontalPageMargin parameter on smartphones is usually equal to the value of the Theme.paddingLarge parameter, and on the tablets it will be larger to visually separate the page content 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. In this case, 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, the Theme.pixelRatio parameter will come to the rescue . It returns the ratio of "physical" pixels to "logical" (similar to the device-pixel-ratio property in CSS) and can be useful to adjust non-standard values ​​depending on the resolution of a particular device. In addition, in such a situation, the parameters of the height and width 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 do not depend on the orientation of the screen, i.e. height always returns the largest of two screen dimensions.
The Screen component also contains the sizeCategory parameter, which returns the device’s screen size category as one of four predefined values: Screen.Small , Screen.Medium , Screen.Large , Screen.ExtraLarge . This parameter can be used in cases when, for example, the application provides for a different arrangement of elements depending on the type of device (smartphone or tablet).
The following example shows an application that, depending on the screen size, shows 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, the Theme component also offers two auxiliary 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 in color . HTML is meant here as a stylized string, since in QML text blocks they understand and process the HTML code transmitted as text. For example, the following function call:
Theme.highlightText(" ", "", "red") returns the line:
<font color="#ff0000"></font> <font color="#ff0000"></font> A simple application with the following Label component:
Label { text: Theme.highlightText(" ", "", "red") anchors.centerIn: parent } would look like this:
The second function, rgba (color, opacity) , takes the color and opacity value as arguments (from 0.0 to 1.0) and returns the transferred color with the opacity value applied to it.
That's all. This article turned out to be shorter than the previous ones, but in my opinion, it touches on very important points in the stylization of the graphical interface of the application, knowledge of which will help to make your application better and save development time.
The author: Denis Laure
Source: https://habr.com/ru/post/307072/
All Articles