Масштабирование интерфейса пользователя

Использование масштабируемых компоновок

Модуль Silica предоставляет разнообразные инструменты для создания масштабируемых пользовательских интерфейсов приложений. При разработке дизайна приложений рекомендуется выполнять компоновку из легко масштабируемых компонентов.

Следует избегать использования жестко запрограммированных значений пикселей, и по возможности следует использовать параметры Silica-компонента Theme. Если всё ещё необходимо использовать жёстко заданное значение пикселя, нужно использовать функцию Theme.dp():

import QtQuick 2.0
import Sailfish.Silica 1.0

Rectangle {
    color: "red"
    anchors.centerIn: parent
    width: Theme.dp(100)
    height: Theme.itemSizeSmall
}

Также можно получить соотношение пикселей для устройства из Theme.pixelRatio:

Label {
    anchors.verticalCenter: parent.verticalCenter
    font.pixelSize: Theme.pixelRatio > 1.5 ?
    Theme.fontSizeMedium : Theme.fontSizeSmall
}

Иногда может потребоваться незначительно изменить компоновку пользовательского интерфейса приложения в зависимости от реальных размеров экрана устройства. Этого можно добиться с помощью свойства Screen.sizeCategory:

import QtQuick 2.0
import Sailfish.Silica 1.0

Label {
    text: "Hello world!"
    anchors.centerIn: parent
    font.pixelSize: Screen.sizeCategory >= Screen.Large
                    ? Theme.fontSizeLarge
                    : Theme.fontSizeNormal
}

Если макет приложения будет более разительно отличаться на разных размерах экрана, рекомендуется написать отдельные компоненты макета для каждого и использовать свойство Screen.sizeCategory для выбора макетов.

В таких случаях следует помнить о возможности повторного использования компонентов пользовательского интерфейса. Другими словами, не следует писать повторяющийся код для компоновки элементов.

import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
    initialPage: Screen.sizeCategory >= Screen.Large
                 ? Qt.resolvedUrl("SplitViewPage.qml")
                 : Qt.resolvedUrl("ListViewPage.qml")
}

Масштабирование графики

Системные значки ОС Аврора масштабируются в соответствии с определениями размеров значков в объекте Theme.

Приложения могут предоставлять свои собственные графические ресурсы, но в этом случае им нужно будет выбрать правильный вариант размера в зависимости от определений размера иконок Theme или свойства Screen.sizeCategory:

import QtQuick 2.0
import Sailfish.Silica 1.0

Image {
    anchors.centerIn: parent
    width: Theme.iconSizeSmall
    height: Theme.iconSizeSmall
    source: closestMatchingIcon()
    sourceSize.width: width
    sourceSize.height: height

    function closestMatchingIcon() {
        if (width <= 50) {
            return "icon_50x50.png"
        } else if (width <= 100) {
            return "icon_100x100.png"
        } else {
            return "icon_200x200.png"
        }
    }
}

Имеет смысл создавать графические ресурсы векторном формате SVG. В этом случае не требуется иметь комплект файлов под каждый размер экрана, одно изображение будет масштабироваться без потери качества.

import QtQuick 2.0
import Sailfish.Silica 1.0

Image {
    width: Theme.iconSizeSmall
    height: Theme.iconSizeSmall
    sourceSize.width: width
    sourceSize.height: height
    source: "icon.svg"
}

При этом нужно иметь в виду следующее:

• Qt SVG поддерживает только неподвижную графику из старого стандарта SVG 1.2 Tiny.
• Широко используемые дизайнерами маски не поддерживаются. Контуры этих масок необходимо подрезать перед экспортом изображения в SVG.
• На отрисовку больших векторных файлов со сложными элементами может потребоваться много системных ресурсов.
• Один вариант значка может выглядеть неодинаково хорошо одновременно на маленьких и больших экранах.

Масштабирование значков приложений

Значок приложения может быть представлен в виде набора файлов, каждый из которых должен располагаться в папке /usr/share/icons/hicolor/<size>x<size>/apps/, где <size> — значение ширины (и высоты) значка в пикселях.

В настоящий момент поддерживаются следующие размеры значков:

• 86 ✕ 86 пикселей;
• 108 ✕ 108 пикселей;
• 128 ✕ 128 пикселей;
• 172 ✕ 172 пикселей.