Разработка для SailfishOS: стилизация приложения05.08.2016 01:33

Здравствуйте! Данная статья продолжает цикл статей посвящённых разработке приложений под Sailfish. В прошлых статьях я описал как начать разрабатывать под мобильную платформу Sailfish OS и рассказал об основах разработки под данную платформу. В этой же статье я расскажу о том, как сделать так, чтобы ваше приложение, с точки зрения стиля и размеров, выглядело как стандартное приложение для платформы SailfishOS.

Для достижения вышеобозначенной цели в составе Sailfish Silica присутствует компонент Theme. Данный компонент предоставляет информацию о стандартных размерах, шрифтах, отступах, цветах и других составляющих стиля для приложений на платформе SailfishOS. Другими словами, компонент Theme помогает добиться того, что графический интерфейс приложения выглядит стандартно для платформы. Рассмотрим некоторые свойства данного компонента подробнее.

Шрифты


В приложениях под SailfishOS стандартно используются два семейства шрифтов: одно для различных заголовков и одно для всех остальных надписей. Узнать нужное семейство шрифтов можно с помощью свойств fontFamilyHeading и fontFamily компонента Theme.

Так же Theme позволяет узнать семь стандартных размеров шрифтов:

  • Theme.fontSizeHuge — самый большой рекомендованный размер шрифта. Можно использовать, например, для очень больших заголовков или компонентов, в которых текст играет определяющую роль (например, цифровая клавиатура телефона).
  • Theme.fontSizeExtraLarge — чуть меньший размер шрифта. Можно использовать, например, для заголовков поменьше.
  • Theme.fontSizeLarge — обычный большой размер шрифта. Можно использовать, например, для стандартных заголовков. Такой размер используется для заголовков страниц в компоненте PageHeader.
  • Theme.fontSizeMedium — стандартный средний размер шрифта. Используется в большинстве случаев. Такой размер используется в большинстве элементов управления, где есть текст.
  • Theme.fontSizeSmall — маленький размер шрифта. Используется для второстепенного текста, либо больших параграфов.
  • Theme.fontSizeExtraSmall — меньший размер шрифта. Так же используется для второстепенного текста, но более мелкого. Например, такой размер используется в подписях к компоненту TextSwitch, который реализует элемент-переключатель (toggle button).
  • Theme.fontSizeTiny — самый маленький рекомендованный размер шрифта. Такой размер используется для отображения второстепенного текста в случаях, когда место под него строго ограничено.

Таким образом, пример отображающий два текстовых блока с помощью стандартного QML компонента Text, где первый блок выполняет роль заголовка, а второй обычного текста, будет выглядеть следующим образом: 
Text {
  text: "Заголовок"
  font.family: Theme.fontFamilyHeading
  font.pixelSize: Theme.fontSizeLarge
}
Text {
  text: "Обычный текст"
  font.family: Theme.fontFamily
  font.pixelSize: Theme.fontSizeMedium
}

Отступы


Отступы являются очень важным аспектом разработки графического интерфейса приложений, особенно на мобильных платформах, где иногда возникают сложности с правильной компоновкой элементов на экране. Слишком большой отступ между элементами отнимет ценное место на экране. Слишком маленький отступ, наоборот может привести к тому, что, например, пользователь может случайно нажать на кнопку, на которую не хочет нажимать, просто потому что она будет расположена слишком близко к нужной.

Компонент Theme предоставляет следующие параметры для получения размеров стандартных отступов:

  • Theme.paddingLarge — обычно используется для установки расстояния между элементами интерфейса.
  • Theme.paddingMedium — используется для установки расстояния между элементами интерфейса, которые связаны друг с другом по смыслу и поэтому визуально должны быть «вместе».
  • Theme.paddingSmall  — самое маленькое расстояние между элементами интерфейса. Часто используется в случаях, когда место на экране ограничено.
  • Theme.horizontalPageMargin — используется для установки расстояния между содержанием страницы и левым и правым краями экрана.

Размеры


Компонент Theme так же позволяет узнать стандартные размеры кнопок, миниатюр cover, иконок и других элементов пользовательского интерфейса. Параметры, возвращающие данные значения, могут быть полезны при разработке своих собственных элементов интерфейса для того, чтобы они соответствовали стандартным размерам.

Стандартные размеры кнопок можно получить с помощью следующих параметров:

  • Theme.buttonWidthSmall — длина маленькой кнопки, она используется в Sailfish для кнопок по умолчанию. Это значение подобрано так, чтобы две кнопки с указанной длинной точно умещались в одну линию по ширине экрана в портретной ориентации.
  • Theme.buttonWidthMedium — длина средней кнопки.
  • Theme.buttonWidthLarge — длина большой кнопки. Обычно, только одна кнопка такой длины может уместиться по ширине в портретной ориентации.

В предыдущих статьях я писал, что cover приложения может быть большого или маленького размера. Эти размеры можно получить с помощью параметров Theme.coverSizeLarge и Theme.coverSizeSmall. Это может оказаться полезным, когда содержание cover приложения расчитывается в зависимости от его размеров.

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

  • Theme.iconSizeExtraSmall — самый маленький размер иконок. Используется, например, для иконок в статусной строке.
  • Theme.iconSizeSmall — стандартный размер маленьких иконок, таких, например, как на элементах управления внутри cover.
  • Theme.iconSizeSmallPlus — чуть больший вариант предыдущего размера. Используется, например, для иконок уведомлений.
  • Theme.iconSizeMedium — самый часто используемый размер. Можно использовать, например, для иконок внутри маленьких и средних элементов списка.
  • Theme.iconSizeLarge — большой размер иконок. Используется, например, для иконок на кнопках.
  • Theme.iconSizeExtraLarge — самый большой размер иконок.
  • Theme.iconSizeLauncher — используется для иконок приложений на экране приложений системы.

Наконец, просто стандартные размеры элементов можно узнать с помощью следующих параметров:
  • Theme.itemSizeExtraSmall — такого размера, например, высота стандартной кнопки.
  • Theme.itemSizeSmall — равно, например, высоте стандартного элемента списка с одной строкой текста.
  • Theme.itemSizeMedium — равно, например, высоте стандартного элемента списка с двумя строками текста.
  • Theme.itemSizeLarge — подходит для элементов управления с несколькими строками текста. Используется, например, в качестве высоты стандартного элемента заголовка страницы
  • Theme.itemSizeExtraLarge — подходит для установки размеров больших элементов, содержащих, например, изображения.
  • Theme.itemSizeHuge — подходит, например, для установки размеров изображений на полноэкранной сетке с изображениями (как в приложении-галерее).

Цвета


Помимо размеров при создании собственных компонентов можно использовать системные цвета. Это так же позволит сделать так, что нестандартные компоненты будут выглядеть стандартно для платформы. Компонент Theme содержит несколько параметров, возвращающих стандартные цвета:
  • Theme.primaryColor — основной цвет, обычно используется для того, чтобы подчеркнуть активные элементы интерфейса.
  • Theme.secondaryColor — второстепенный цвет, обычно используется для отрисовки менее значимых частей интерфейса.
  • Theme.highlightColor  — основной цвет для неинтерактивного текста, а также для подсветки элементов при нажатии на них.
  • Theme.secondaryHighlightColor — второстепенный цвет подсветки, используемый для подсвечивания менее значимых элементов интерфейса.
  • Theme.highlightDimmerColor — более темная подсветка, используемая в случаях, когда нужно подсветить элемент, но при этом не отвлекать внимание от более значимых элементов.

Еще два дополнительных параметра Theme — highlightBackgroundColor и highlightBackgroundOpacity — возвращают, соответственно, значения цвета и непрозрачности для фона подсвеченного текста. Особенностью всех цветовых параметров является то, что они зависят от текущей темы, выбранной на устройстве и изменяются вслед за ней.

Особенности


Интересная особенность компонента Theme заключается в том, что значение его параметров зависят от конкретного устройства. Например, значение параметра Theme.horizontalPageMargin на смартфонах обычно равно значению параметра Theme.paddingLarge, а на планшетах будет больше, чтобы визуально отделить содержимое страницы от краев экрана. Данная особенность очень удобна, поскольку позволяет описывать параметры графического интерфейса не разделяя их в зависимости от типа устройства. При этом разработчик экономит время на разработку, а приложение выглядит хорошо на любом устройстве.

Если же по какой-то причине необходимо использовать не стандартные размеры или отступы, то здесь на помощь придет параметр Theme.pixelRatio. Он возвращает отношение «физических» пикселей к «логическим» (аналогично свойству device-pixel-ratio в CSS) и может быть полезным для того чтобы регулировать нестандартные значения в зависимости от разрешения конкретного устройства. Кроме того, в подобной ситуации могут оказаться полезными параметры height и width компонента Screen (так же входящие в состав Sailfish Silica), возвращающие высоту и ширину экрана устройства в пикселях, соответственно. Стоит отметить, что эти параметры не зависят от ориентации экрана, т. е. height всегда возвращает наибольшее из двух измерений экрана.

Компонент Screen так же содержит параметр sizeCategory, возвращающий категорию размера экрана устройства в виде одного из четырёх предопределенных значений: Screen.Small, Screen.Medium, Screen.Large, Screen.ExtraLarge. Данный параметр может быть использован в случаях, когда, например, в приложении предусматривается различная компоновка элементов в зависимости от типа устройства (смартфон или планшет).

В следующем примере показано приложение, которое в зависимости от размера экрана показывает различные начальные страницы: 

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

Дополнительные функции


Помимо описанных выше параметров, компонент Theme так же предлагает две вспомогательные функци.

Функция highlightText (text, pattern, color) возвращает стилизованный текст переданный в аргументе text, в котором все вхождения строки pattern подсвечены цветом color. Под стилизованной строкой здесь имеется ввиду HTML, так как в QML текстовые блоки понимают и обрабатывают HTML код переданный им в качестве текста. Например, следующий вызов функции: 

Theme.highlightText("раз два три раз два три", "два", "red")

вернет строчку: 
раз два три раз два три

А простое приложение со следующим компонентом Label: 
Label {
    text: Theme.highlightText("раз два три раз два три", "два", "red")
    anchors.centerIn: parent
}

будет выглядеть так:
004004e5271d4baa974504ac7e583519.png

Вторая функция — rgba (color, opacity) — принимает в качестве аргументов цвет и значение непрозрачности (от 0.0 до 1.0) и возвращает переданный цвет с примененным к нему значением непрозрачности.

На этом всё. Данная статья получилась короче предыдущих, однако, на мой взгляд, она затрагивает очень важные моменты стилизации графического интерфейса приложения, знание которых поможет сделать ваше приложение лучше и сэкономит время на разработку.

Автор: Денис Лаурэ

Комментарии (1)

  • 4 августа 2016 в 23:54

    0

    ↑

    ↓

    На самом деле, неплохо.
    Отдельный плюс за то, что не забыл объект Screen и описал Theme.highlightText.

© Habrahabr.ru