У цьому уроку ми розберемо основи створення користувацького інтерфейсу в UI додатках Tizen.

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

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

Розглянемо, які ж контейнери з бібліотеки Elementary нам доступні.

Конформант (conformant) – контейнер, передбачений для використання системного індикатора і системної клавіатури у вашому додатку, які будуть поміщені поверх графічного контенту. Нижче представлено компонування конформанта.

Коробка (box) – контейнер, який розміщує елементи лінійно (горизонтально и/або вертикально). Є можливість задати проміжні значення, які будуть використані для розділення сусідніх елементів у коробці.

Сітка (grid) – розміщує компоненти в сітці з встановленим розміром, кожен елемент займає позицію відповідно до заданих йому координат і кількості комірок в сітці.

Макет (layout) – це дуже гнучкий вид контейнеру. Можна створювати, як стандартні, так і власні макети. Стандартні знаходяться в темі пристрою (деякі з них ми більш детально розглянемо далі). Крім того, існує можливість створювати власний макет з будь-яким компонуванням. Створення макету, простими словами, зводиться до вказання відносних координат області, в яку будуть поміщені віджети. Також є можливість створювати анімації для цього макету. Оскільки для створення користувацьких макетів використовується мова розмітки EDC, ці параметри будуть розглядатись в наступних уроках. Перевага макетів полягає у відокремленні компонування від логіки додатку.

Стиль стандартної теми групи “application”, стиль “default”:

Стиль стандартної теми групи “bottom_button”, стиль “default”:

Користувацький стиль (EDC) з будь-яким розташуванням і кількістю контенту:

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

Скроллер (scroller) – контейнер, що має область відображення з смугою прокрутки. Він дозволяє розміщувати лише один елемент але дає можливість прокручувати області цього елементу, якщо його розмір більше ніж розмір самого скроллеру.

Таблиця (table) – розміщує елементи подібно до контейнера-сітки, але не дозволяє задавати їй розміри. Розміри таблиці розраховуються автоматично, ґрунтуючись на комірках, в які поміщено віджети. Зате, на відміну від сітки, тут є можливість задати проміжні відстані між сусідніми комірками по горизонталі і по вертикалі, як в контейнеру –коробці.

У бібліотеці Elementary доступні наступні віджети:

Віджет індексації (index) – віджет для відображення, наприклад нумерації сторінок чи номера активної сторінки на екрані.

Віджет фону (background) – віджет використовується для встановлення фону додатку, у вигляді заливки одним кольором чи зображення.

Динамічний список (genlist) – віджет, який відображає елементи в області, що прокручується, при цьому виділення пам’яті для графічної інформації відбувається тільки для елементів, які знаходяться на екрані. За рахунок цього віджет є дуже продуктивним списком, що дозволяє додавати в нього навіть мільйон елементів, при цьому не втрачаючи продуктивність при прокручуванні.

Список (list) – простий у використанні віджет для відображення відносно не великого списку. Для великої кількості елементів слід використовувати динамічний список.

Текстовий віджет (label) – відображає текст через HTML-подібну розмітку для зміни стилю.

Віджет-зображення (image) – дозволяє відображати зображення, яке завантажується або з файлу, або напряму з вказаної області пам’яті. Також є можливість використовувати .gif анімацію замість статичного зображення.

Виджет-іконка (icon) – віджет, який наслідується від віджета-зображення і використовується в контексті іконки, наприклад в кнопці чи інших віджетах. Крім того, для іконки існує функціонал для оптимального використання пам’яті. Припустимо, ви створюєте 100 однакових іконок для списку. У цьому випадку, для такої кількості зображень віджети будуть використовувати одну область пам’яті з графічною інформацією картинки, замість того аби використовувати в 100 разів більше пам’яті.

Індикатор виконання (progressbar) – використовується для відображення стану будь-якого процесу. Цей віджет має лінійний зовнішній вигляд.

Кнопка (button) – віджет для отримання сигналу від користувача в результаті натискання на екран в області цього віджета.

Прапорець (check) – віджет для відображення стану: «увімкнено /вимкнено».

Перемикач (radio) – зазвичай використовується одразу декілька таких віджетів в групі. Як і прапорець, може перебувати в двох станах: увімкнено/вимкнено. Зауважте, що в групі може знаходитись лише один перемикач в стані «увімкнено».

Віджет введення тексту (entry) – використовується користувачем для введення текстової інформації. Віджет підтримує смайли і дозволяє використовувати системну клавіатуру для введення. За такої умови у вашому додатку необхідно використовувати тип контейнеру - конформант.

Повзунок (slider) – використовується для встановлення значення в певному діапазоні, наприклад, з його допомогою можна реалізувати налаштування яскравості.

Віджет дати і часу (datetime) – повноцінний віджет, який дозволяє вводити дату і/або час.

Спливаюче вікно (popup) – віджет для відображення інформації про помилки, а також додаткової інформації. Може мати кнопки для підтвердження дій користувача.

Контекстне спливаюче вікно (ctxpopup) – на відміну від звичайного спливаючого вікна, не перекриває весь екран, а дозволяє встановити координати, в яких воно буде відображено.

Віджет OpenGL (glview) – спеціальний віджет, який відображає сцену, яка малюється бібліотекою OpenGL.

Далі представлені віджети, що відносяться до бібліотеки efl_extension, це розширені віджети з бібліотеки Elementary. Вони мають спеціальний зовнішній вигляд, розрахований на круглий дисплей.

Круглий селектор (rotary selector) – віджет, створений спеціально для круглого дисплея, який дозволяє відображати елементи на екрані по колу. Дозволяє використовувати декілька сторінок, якщо всі елементи на вміщуються на одному екрані. Має опцію переміщення між елементами, використовуючи прокрутку безеля.

Віджет додаткових опцій (more option) – кнопка, яка розміщується в одній з чотирьох сторін екрану (лівій, правій, верхній, нижній), при натисканні на яку, відображується круглий селектор з розміщеними в ньому елементами.

Круглий індикатор виконання (circle progressbar) – те ж саме, що і звичайний індикатор виконання, але заточений під круглий дисплей.

Круглий повзунок (circle slider) – теж саме, що і звичайний повзунок, але заточений під круглий дисплей. Дозволяє змінювати величину, використовуючи безель.

Круглий спінер (circle spinner) – віджет, за функціоналом дуже схожий на круглий повзунок. Дозволяє змінювати величину, використовуючи безель.

Круглий скроллер (circle scroller) – те ж саме, що і звичайний контейнер прокручування, але дозволяє здійснювати прокручування області, використовуючи безель.

Круглий динамічний список (circle genlist) – незважаючи на те, що цей віджет називається динамічним списком, він швидше є скроллером, а словосполучення «динамічний список» означає, що цей скроллер створюється спеціально для відображення поточного положення прокручування в цьому листі. Працює він так само як і круглий скроллер – прокручує список, використовуючи безель.

Круглий віджет дати і часу (circle datetime) – віджет дати і часу, підлаштований під круглий екран. При обертанні безеля, в залежності від активного індикатора, відбувається зміна величин, таких як день, місяць і т. д.

Крім того, круглі віджети мають деякі додаткові функції для налаштування, але при цьому ви можете використовувати функції Elementary для роботи з ними, як зі звичайними віджетами, наприклад, використовувати elm_scroller_policy_set() для круглого скроллера.