- PVSM.RU - https://www.pvsm.ru -
Здравствуйте! Данная статья продолжает цикл статей посвящённых разработке приложений под Sailfish. В прошлых статьях я описал как начать разрабатывать под мобильную платформу Sailfish OS [1] и рассказал об основах разработки [2] под данную платформу. В этой же статье я расскажу о том, как сделать так, чтобы ваше приложение, с точки зрения стиля и размеров, выглядело как стандартное приложение для платформы SailfishOS.
Для достижения вышеобозначенной цели в составе Sailfish Silica присутствует компонент Theme. Данный компонент предоставляет информацию о стандартных размерах, шрифтах, отступах, цветах и других составляющих стиля для приложений на платформе SailfishOS. Другими словами, компонент Theme помогает добиться того, что графический интерфейс приложения выглядит стандартно для платформы. Рассмотрим некоторые свойства данного компонента подробнее.
В приложениях под SailfishOS стандартно используются два семейства шрифтов: одно для различных заголовков и одно для всех остальных надписей. Узнать нужное семейство шрифтов можно с помощью свойств fontFamilyHeading и fontFamily компонента Theme.
Так же Theme позволяет узнать семь стандартных размеров шрифтов:
Таким образом, пример отображающий два текстовых блока с помощью стандартного QML компонента Text, где первый блок выполняет роль заголовка, а второй обычного текста, будет выглядеть следующим образом:
Text {
text: "Заголовок"
font.family: Theme.fontFamilyHeading
font.pixelSize: Theme.fontSizeLarge
}
Text {
text: "Обычный текст"
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeMedium
}
Отступы являются очень важным аспектом разработки графического интерфейса приложений, особенно на мобильных платформах, где иногда возникают сложности с правильной компоновкой элементов на экране. Слишком большой отступ между элементами отнимет ценное место на экране. Слишком маленький отступ, наоборот может привести к тому, что, например, пользователь может случайно нажать на кнопку, на которую не хочет нажимать, просто потому что она будет расположена слишком близко к нужной.
Компонент Theme предоставляет следующие параметры для получения размеров стандартных отступов:
Компонент Theme так же позволяет узнать стандартные размеры кнопок, миниатюр cover, иконок и других элементов пользовательского интерфейса. Параметры, возвращающие данные значения, могут быть полезны при разработке своих собственных элементов интерфейса для того, чтобы они соответствовали стандартным размерам.
Стандартные размеры кнопок можно получить с помощью следующих параметров:
В предыдущих статьях я писал, что cover приложения может быть большого или маленького размера. Эти размеры можно получить с помощью параметров Theme.coverSizeLarge и Theme.coverSizeSmall. Это может оказаться полезным, когда содержание cover приложения расчитывается в зависимости от его размеров.
Стандартные размеры для иконок можно получить с помощью следующих параметров:
Наконец, просто стандартные размеры элементов можно узнать с помощью следующих параметров:
Помимо размеров при создании собственных компонентов можно использовать системные цвета. Это так же позволит сделать так, что нестандартные компоненты будут выглядеть стандартно для платформы. Компонент Theme содержит несколько параметров, возвращающих стандартные цвета:
Еще два дополнительных параметра 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")
вернет строчку:
раз <font color="#ff0000">два</font> три раз <font color="#ff0000">два</font> три
А простое приложение со следующим компонентом Label:
Label {
text: Theme.highlightText("раз два три раз два три", "два", "red")
anchors.centerIn: parent
}
будет выглядеть так:
Вторая функция — rgba(color, opacity) — принимает в качестве аргументов цвет и значение непрозрачности (от 0.0 до 1.0) и возвращает переданный цвет с примененным к нему значением непрозрачности.
На этом всё. Данная статья получилась короче предыдущих, однако, на мой взгляд, она затрагивает очень важные моменты стилизации графического интерфейса приложения, знание которых поможет сделать ваше приложение лучше и сэкономит время на разработку.
Автор: Денис Лаурэ
Автор: FRUCT
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/qt-2/167658
Ссылки в тексте:
[1] как начать разрабатывать под мобильную платформу Sailfish OS: https://habrahabr.ru/post/305510/
[2] основах разработки: https://habrahabr.ru/post/306188/
[3] Источник: https://habrahabr.ru/post/307072/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.