Это заключительный урок по созданию 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.