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

В конце мы добавим лейбл в наше демо-приложения и будем менять текст в виджете после нажатия на кнопку созданную в 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.