Розробка для SailfishOS: стилізація програми

Доброго дня! Дана стаття продовжує цикл статей присвячених розробці програм під 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")

поверне рядок:
раз <font color="#ff0000">два</font> три разів <font color="#ff0000">два</font> три

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

буде виглядати так:


Друга функція — rgba(color, opacity) — приймає в якості аргументів колір і значення непрозорості (від 0.0 до 1.0) і повертає переданий колір з застосованим до нього значенням непрозорості.

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

Автор: Денис Лаурэ
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.