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

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

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

При указании размеров нужно избегать жестко заданных значений в пикселях. Вместо этого следует повсеместно использовать свойства объекта Theme. Если же без жестко заданных значений в пикселях никак не обойтись, то их следует умножать на коэффициент Theme.pixelRatio:

 import QtQuick 2.0
 import Sailfish.Silica 1.0

 Rectangle {
     color: "red"
     anchors.centerIn: parent
     width: 100 * Theme.pixelRatio
     height: Theme.itemSizeSmall
 }

Иногда может потребоваться незначительно изменить компоновку пользовательского интерфейса приложения в зависимости от реальных размеров экрана устройства. This can be achieved by using the Screen.sizeCategory property:

 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
 }

Should the application layout be more drastically different on different screen sizes it is good to write separate layout components for each and use the Screen.sizeCategory property to choose between the layouts.

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

 import QtQuick 2.0
 import Sailfish.Silica 1.0

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

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

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

Applications may provide their own graphical assets but in that case they will need to select the correct size variant depending on either Silica Theme (icon) size definitions or the Screen.sizeCategory property:

 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/x/apps/, где  — значение ширины (и высоты) значка в пикселях.

В настоящий момент поддерживаются следующие размеры в пикселях: 86✕86, 108✕108, 128✕128 и 172✕172.