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

У кінці ми додамо лейбл у демо-додаток і розглянемо, як змінювати текст у віджеті після натискання на кнопку, створену в 14-му уроці.

Лейбл – це віджет для відображення тексту на екрані додатку з графічним інтерфейсом. Цей компонент підтримує HTML-подібну розмітку для форматування тексту. Також у самого віджету є декілька стилів у стандартній темі. Аби створити текстовий віджет, використовуйте наступну функцію:

Evas_Object *elm_label_add(Evas_Object *parent);

Для встановлення тексту, як лейблу, так і будь-якому іншому віджету бібліотеки Elementary, використовується наступна функція:

void elm_object_text_set(Evas_Object *obj, const char *text);

Як ми знаємо, для будь-якого смарт-віджету бібліотеки Elementary, стиль встановлюється наступною функцією:

Eina_Bool elm_object_style_set(Evas_Object *obj, const char *style);

Першим параметром передається віджет, якому необхідно встановити стиль, другим – ім’я стилю. У разі невдалого встановлення стилю – функція поверне EINA_FALSE, а в разі вдалого встановлення – EINA_TRUE.

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

Стиль default:

Цей стиль не має ніяких візуальних ефектів.

Стиль slide_roll:

Цей стиль можна використовувати, якщо потрібно показати користувачу довгий текст. Під час відображення, текст переміщується в межах області віджету зліва на право. Ми можемо керувати тривалістю/швидкістю ковзання за допомогою функції elm_label_slide_duration_set(), яка в якості параметру приймає тривалість переміщення тексту в секундах.

Ефект ковзання підтримує три режими, які можна встановлювати функцією elm_label_slide_mode_set():

ELM_LABEL_SLIDE_MODE_NONE – відсутність анімації.

ELM_LABEL_SLIDE_MODE_AUTO – переміщення тільки в тому випадку, якщо довжина тексту більше ширини текстового віджету.

ELM_LABEL_SLIDE_MODE_ALWAYS – постійне ковзання.

Після встановлення параметрів переміщення тексту, сам ефект потрібно запустити, викликавши функцію elm_label_slide_go().

Щоб уточнити вище сказане, розглянемо приклад:

// Встановити стильelm_object_style_set(label, "slide_roll");
// Додати текст
elm_object_text_set(label, "Текст з’являється зліва і зсувається"
                           "вправо, аби показати переповнення і знову з’явитись.");

// Вибрати режим ковзання
elm_label_slide_mode_set(label, ELM_LABEL_SLIDE_MODE_ALWAYS); 

// Визначити швидкість
elm_label_slide_duration_set(label, 25);

// Запустити анімацію
elm_label_slide_go(label);

У результаті має вийти наступне:

Ще один стиль, який використовує ковзання – це slide_long. Тут також текст з’являється справа, але на відміну від slide_roll, ковзає поки не зникне з лівої частини екрану і знову з’явиться справа.

Як говорилось раніше, текстовий віджет підтримує форматування за допомогою HTML-подібної розмітки. Давайте розглянемо дану можливість.

Налаштуємо горизонтальне вирівнювання за допомогою властивості align. За замовчанням використовується вирівнювання по лівому краю. Для явної зміни вирівнювання віджету необхідно встановити текст з додатково вказаними тегами і властивостями, як показано нижче. Вирівнювання по лівому краю:

elm_object_text_set(label, "<font align=left> Привіт </font>");

Вирівнювання по правому краю:

elm_object_text_set(label, "<font align=right> Привіт </font>");

Вирівнювання по центру:

elm_object_text_set(label, "<font align=center> Привіт </font>");

Зміщення на відносну величину [0.0 … 1.0] або [0% … 100%]:

elm_object_text_set(label, "<font align=65%> Привіт </font>");

Існує можливість скоротити довгий текст, встановивши три крапки. Для цього існує параметр ellipsis=значення, при цьому допустимі наступні значення [0.0 … 1.0] або [0% … 100%]. Значення визначають у якій частині рядка літери будуть пропущені і замінені на три крапки. Наприклад, еліпсис рівний одиниці буде означати, що в кінці рядка текст буде пропущений. Так аби за допомогою трьох крапок скоротити текст, встановлений посередині екрану, необхідно вказати наступні параметри:

elm_object_text_set(label,
                    "<font ellipsis=1.0> Значення еліпсису визначає, "
                    "в якому місці текст буде перетворено в три крапки.</font>");

Зміна кольору і розміру тексту. Колір можна задавати в будь-якому з форматів: #RRGGBB, #RRGGBBAA, #RGB, або #RGBA. Також текст можна підкреслити underline={on, off, single, double} і/або закреслити strikethrough={on, off}. Колір лінії підкреслення/закреслення за замовчанням прозорий, тому одразу потрібно встановити їй колір underline_color=значення, якщо лінія підкреслення подвійна - underline2_color=значення, strikethrough_color=значення.

elm_object_text_set(label,
                    "<font align=center color=#25afdc "
                    "underline_color=#ffffff "
                    "underline2_color=#ffffff "
                    "underline=double "
                    "strikethrough_color=#ffffff "
                    "strikethrough=on> Привіт Tizen</font>");

Крім того, можна змінити колір фону, для цього використовується властивість backing={on, off}, і задається колір backing_color=значення.

elm_object_text_set(ui->label, "<font align=center backing=on backing_color=#25afdc> Привіт </font>");

Ви можете комбінувати різні властивості для отримання бажаного результату.

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

Спочатку додатку необхідно вказати директорію, де зберігаються ваші шрифти, це робиться за допомогою функції:

void evas_font_path_global_append(const char *path);

Після того як шрифти більше не потрібні, із списку додатків можна видалити додані шляхи до директорій зі шрифтами, використавши наступну функцію:

void evas_font_path_global_clear();

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

elm_object_text_set(label, "<font=Sans:style=Italic> Привіт </font> <font=graviseg:style=Bold>Tizen</font>");

Як бачите, тут є можливість використовувати декілька шрифтів в одному текстовому віджеті.

Текстовий віджет підтримує одну свою смарт-подію "slide,end", яка відбувається після того, як анімація тексту в режимі ковзання завершилась. Оскільки віджет наслідує макет, він також підтримує смарт-подію "language,changed", яка спрацьовує, коли в системі змінюється мова інтерфейсу користувача.

Тепер додайте текстовий віджет в демо-додаток і потім в обробник натискання на кнопку, змініть текст у лейблі. Додайте у вашу структуру вказівник на лейбл і лічильник натискань.

Evas_Object *label;
int click_count;

Вийшла наступна структура:

typedef struct _UIData {
     Evas_Object *win;
     Evas_Object *conform;
     Evas_Object *layout;
     Evas_Object *button;
     Evas_Object *label;   int click_count;
  } UIData;

Реалізуйте функцію створення і налаштування лейблу.

static void
_label_create(UIData *ui)
{
}

Створіть екземпляр віджета, вказавши макет в якості батька.

ui->label = elm_label_add(ui->layout);

Задаємо текст для лейбла, відцентрованого горизонтально і в якому встановлено кількість натискань на кнопку. Для цього створіть окрему функцію, яку далі ви будете використовувати в колбеці кнопки.

static void
_label_click_count_text_set(UIData *ui)
{
   const int MAX_TEXT_SIZE  = 1024;
   char text[MAX_TEXT_SIZE] = {0,};
   snprintf(text, MAX_TEXT_SIZE, "<font align=center> Кількість натискан: %d</font>", ui->click_count);
   elm_object_text_set(ui->label, text);
}

static void
_label_create(UIData *ui)
{
  ...

  _label_click_count_text_set(ui);

  ...
}

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

Evas_Coord w = 0;
Evas_Coord h = 0;
evas_object_size_hint_max_get(ui->label, &w, &h);
evas_object_size_hint_max_set(ui->label, w, 80);

Відобразіть віджет наступним викликом:

evas_object_show(ui->label);

Тепер потрібно викликати функцію створення і налаштування лейбла і помістити віджет у макет. У макеті нижня область для контенту має назву "elm.swallow.content", туди і помістити кнопку.

static void
_layout_create(UIData *ui)
{
   ...

   _label_create(ui);   elm_object_part_content_set(ui->layout, "elm.swallow.content", ui->label);

   ...
}

Останнім кроком передайте в колбек події кліку кнопки вказівник на структуру з віджетами і реалізуйте оновлення лічильника натискань кнопки і текстового віджета в цьому обробнику.

static void
click_cb(void *data, Evas_Object *button, void *event_info)
{
   ...

   UIData *ui = data;
   ui->click_count++;
   _label_click_count_text_set(ui);
}

static void
_button_create(UIData *ui)
{
   ...

   evas_object_smart_callback_add(ui->button, "clicked", click_cb, ui);

   ...
}

Тепер можна запустити цей додаток і подивитись на результат.

Повний початковий код цього уроку можна скачати тут WearLesson016.