Це заключний урок для створення 3-го демо-додатку. У вас може виникнути питання, що робити з індексом, якщо сторінок буде більше ніж 20. У такому разі, ми радимо використовувати круглий скроллер.

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

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

Створіть таку поверхню.

Eext_Circle_Surface *surface = eext_circle_surface_conformant_add(ui->conform);

Вона створюється на основі одного з 3 графічних елементів: конформанта, невіфрейма чи макета. Для цього існують відповідні функції:

Eext_Circle_Surface *eext_circle_surface_conformant_add(Evas_Object *conform);
Eext_Circle_Surface *eext_circle_surface_naviframe_add(Evas_Object *naviframe);
Eext_Circle_Surface *eext_circle_surface_layout_add(Evas_Object *layout);

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

У випадку, якщо ви створюєте функції для макету, використовуючи яку-небудь конкретну тему і створюєте на цьому макеті круглу поверхню - це змінить вибраний вами стиль на круглий. У результаті ви не зможете використовувати області макету, які хотіли. Тому створіть поверхню на конформанті, але якщо ви все таки хочете використовувати функцію для макету, то можна створити окремий об’єкт макету спеціально для круглої поверхні, як на прикладі нижче:

Evas_Object *surface_layout = elm_layout_add(ui->scroller);
Eext_Circle_Surface *surface = eext_circle_surface_layout_add(surface_layout);

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

Створіть круглий скроллер. Це контейнер-віджет з розширенням до бібліотеки efl.

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

Evas_Object *circle_scroller;

Ви повинні отримати наступний зміст вашої структури з графічними компонентами:

typedef struct _UIData {
     Evas_Object *win;
     Evas_Object *conform;
     Evas_Object *layout;
     Evas_Object *scroller;
     Evas_Object *circle_scroller;
     Evas_Object *box;
     Evas_Object *padding_start;
     Evas_Object *padding_end;
  } UIData;

Для створення круглого скроллера, скористайтесь наступною функцією:

ui->circle_scroller = eext_circle_object_scroller_add(ui->scroller, surface);

У якості першого параметра передайте звичайний скроллер, в який помістіть вміст для прокручування. Круглий скроллер буде використовувати контекст прокручування звичайного скроллеру. Другим параметром передайте поверхню для промальовування круглих об’єктів.

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

eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                       ELM_SCROLLER_POLICY_ON,
                                       ELM_SCROLLER_POLICY_OFF);

Аби скроллер реагував на дії безелем, йому необхідно активувати дану функцію:

eext_rotary_object_event_activated_set(ui->circle_scroller, EINA_TRUE);

Після цього виклику, дії безелю будуть гортати сторінки.

Для створення круглого скроллера, використовуйте наступну функцію:

static void
_circle_scroller_create(UIData *ui)
{
   Eext_Circle_Surface *surface = eext_circle_surface_conformant_add(ui->conform);
   ui->circle_scroller = eext_circle_object_scroller_add(ui->scroller, surface);
   eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                          ELM_SCROLLER_POLICY_ON,
                                          ELM_SCROLLER_POLICY_OFF);
   eext_rotary_object_event_activated_set(ui->circle_scroller, EINA_TRUE);
}

Викличте її при створенні звичайного скроллера.

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

   _circle_scroller_create(ui);
 
   ...
}

Можна запустити і подивитись, що вийде.

Як ви можете бачити, тепер прокручуючи безель, ви гортаєте сторінки. Але є один маленький недолік: на екрані одночасно видно і скроллер, і індекс.

Створіть функцію, в якій вибудете використовувати константу, що містить інформацію про кількість сторінок. Це допоможе визначити, що в даний момент повинно бути використано: скроллер чи індекс-віджет.

static void
_page_indicator_create(UIData *ui)
{
   const int MAX_INDEX_STYLE_ITEM = 20;
   if (PAGES_COUNT > MAX_INDEX_STYLE_ITEM)
     {
        eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                               ELM_SCROLLER_POLICY_ON,
                                               ELM_SCROLLER_POLICY_OFF);
     }
   else
     {
        ui->index = _index_create(ui);

        elm_object_part_content_set(ui->layout, "elm.swallow.content", ui->index);
        eext_circle_object_scroller_policy_set(ui->circle_scroller,
                                               ELM_SCROLLER_POLICY_OFF,
                                               ELM_SCROLLER_POLICY_OFF);
     }
}

Круглий скроллер буде створюватись у будь-якому разі. Оскільки він дозволяє прокручувати сторінки безелем, ви можете або ховати, або відображати смуги прокручування. А от індекс буде створюватись тільки у випадку, якщо сторінок буде більше ніж 20.

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

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

   _scroller_create(ui);
   elm_object_part_content_set(ui->layout, "elm.swallow.bg", ui->scroller);

   _page_indicator_create(ui);

   ...
}

Запустіть ваш додаток з 10 елементами і подивіться на результат.

А тепер запустіть з 25 елементами.

На цьому ми закінчили демо-додаток номер 3. Повний код уроку ви можете знайти тут WearLesson023.