Вступление

Scroll Wheel Виджет прокручивать меню , содержащее несколько элементов, которые динамически обновляются при прокрутке элементов в колесе, и элемент , который выбран перемещается в фокус. Разрешение коду реагировать на взаимодействия с  Scroll Wheelразличными вызовами может быть вызвано на основе взаимодействия с элементами в колесе.

Эта статья будет проходить через этапы создания и настройки  Scroll Wheel, который разделен на две части. Первая часть описывает, как создать и настроить  Scroll Wheelв конструкторе, а вторая часть описывает, как создать код для обновления элементов в  Scroll Wheel.

• Контейнеры и пользовательские контейнеры  объясняют , как создавать и добавлять контент для обоего  Container и  Custom Container.
•  Код, сгенерированный дизайнером, описывает, как создать пользовательский код, который взаимодействует с кодом, сгенерированным конструктором TouchGFX.

Важные свойства

использование

Элементы в  Scroll Wheel основаны на концепции под названием « Шаблон элемента»,  которая  Custom Container служит основой для графических элементов для элементов в  Scroll Wheel.

Чтобы выделить выбранный элемент,  Scroll Wheel можно выбрать шаблон элемента с именем « Шаблон выбранного стиля» , который используется только для выбранного элемента.

Перед созданием  Scroll Wheel,  Custom Container для  товара шаблона , вместе с  выбранным стилем шаблона , если он выбран, должен быть создан.

Ниже приведен пример двух  Custom Container виджетов, которые будут использоваться в качестве  шаблона элемента  и  выбранного шаблона стиля . Изображение слева показывает  шаблон элемента,   который состоит из фона и некоторого текста. В тексте указывается индекс предмета, указывающий, где он находится в колесе. Изображение справа - это  шаблон выбранного стиля , который похож на  шаблон элемента , но с новым фоновым цветом и жирным шрифтом, который нужно выделить, это выбранный элемент.

После  Scroll Wheel создания  Custom Container виджеты можно выбрать в свойстве «Шаблон элемента». При выбирая  Custom Container для  товара шаблона, то  Scroll Wheelизменение размера , чтобы соответствовать со свойством размера , который не в прокруткой направления (ширина для вертикальной ориентации и высот для горизонтальной ориентации) выбранные  Custom Container.

Изменение свойства другого размера (высота для вертикальной ориентации и ширина для горизонтальной ориентации) определяет количество видимых элементов. На рисунке ниже показан симулятор, на котором запущено приложение с  Scroll Wheelпятью видимыми элементами, четырьмя элементами на основе  шаблона элемента  и выбранным элементом посередине на основе выбранного шаблона стиля .

Расположение выбранного элемента в середине Scroll Wheel, происходит из-за свойства  Смещение выбранного элемента , которое установлено на 100, перемещая его на 100 пикселей вниз от верхней части  Scroll Wheel.

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

Код пользователя для Scroll Wheel

После установки графических элементов Scroll Wheel и их свойств необходимо создать код пользователя для обновления элементов в Scroll Wheel. Файл заголовка для класса Screen1ViewBase, который создается TouchGFX Designer после создания,  Scroll Wheelпоказан ниже.

Screen1ViewBase.hpp

class Screen1ViewBase : public touchgfx::View { public: Screen1ViewBase(); virtual ~Screen1ViewBase() {} virtual void setupScreen(); virtual void scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex) { // Override and implement this function in Screen1 } virtual void scrollWheel1UpdateCenterItem(CustomContainer2& item, int16_t itemIndex) { // Override and implement this function in Screen1 } protected: FrontendApplication& application() { return *static_cast<FrontendApplication*>(Application::getInstance()); } touchgfx::BoxWithBorder boxWithBorder1; touchgfx::ScrollWheelWithSelectionStyle scrollWheel1; touchgfx::DrawableListItems<CustomContainer1, 6> scrollWheel1ListItems; touchgfx::DrawableListItems<CustomContainer2, 2> scrollWheel1SelectedListItems; private: void updateItemCallbackHandler(DrawableListItemsInterface* items, int16_t containerIndex, int16_t itemIndex); touchgfx::Callback<Screen1ViewBase, DrawableListItemsInterface*, int16_t, int16_t> updateItemCallback; };

Когда TouchGFX Designer генерирует код  Scroll Wheel, функции  scrollWheel1UpdateItem и scrollWheel1UpdateCenterItem, отмеченные зеленым, создаются для переопределения пользователем и использования для обновления элементов в Scroll Wheel.

UpdateItemФункция всегда генерируется для  Scroll Wheel и обновляет элементы , который на основе  Item шаблона , а UpdateCenterItemобновляют элементы на основе  выбранного стиля шаблон , и поэтому только формируется , если использование в выбранном стиле шаблона выбрано. Помимо обновления различных элементов, эти две функции содержат те же параметры, которые используются для обновления элементов в Scroll Wheel.

Параметр itemIndexсодержит значение индекса элемента, которое используется для определения того, какой элемент обновляется. Элемент параметра является ссылкой на пользовательский контейнер, который является видимым элементом в  Scroll Wheel. Обновление графики для элемента параметра приводит к обновлению графики для видимого элемента в  Scroll Wheel.

Основан на примере из предыдущего scrollWheel1UpdateItem и scrollWheel1UpdateCenterItemпозволяет пользовательскому коду обновлять видимые элементы в колесе и использовать индекс, чтобы определить, какой элемент обновляется.

Интеграция scrollWheel1UpdateItem и scrollWheel1UpdateCenterItemв файлы кода пользователя  Screen1View.hpp и  Screen1View.cpp показано ниже.

Screen1View.hpp

#ifndef SCREEN1_VIEW_HPP #define SCREEN1_VIEW_HPP #include <gui_generated/screen1_screen/Screen1ViewBase.hpp> #include <gui/screen1_screen/Screen1Presenter.hpp> class Screen1View : public Screen1ViewBase { public: Screen1View(); virtual~Screen1View() {} virtual void setupScreen(); virtual void tearDownScreen(); virtual void scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex); virtual void scrollWheel1UpdateCenterItem(CustomContainer2& item, int16_t itemIndex); protected: }; #endif // SCREEN1_VIEW_HPP

Screen1View.hpp

#include <gui/screen1_screen/Screen1View.hpp> Screen1View::Screen1View() { } void Screen1View::setupScreen() { Screen1ViewBase::setupScreen(); } void Screen1View::tearDownScreen() { Screen1ViewBase::tearDownScreen(); } void Screen1View::scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex) { item.setIndex(itemIndex); } void Screen1View::scrollWheel1UpdateCenterItem(CustomContainer2& item, int16_t itemIndex) { item.setIndex(itemIndex); }

В Screen1View.hppКНИГЕ  scrollWheel1UpdateItem и scrollWheel1UpdateCenterItem функции перекрываются и реализуются ScreenView.cpp.

Цель Scroll Wheelсозданного в TouchGFX Designer - обновить текст элементов в колесе, указав значение индекса элементов, которое отображается. Так как  Item Template и  выбранный стиль шаблона на основе  Custom Container виджетов функция SetValue создается для обоих  Custom Containers. SetValue функция может принимать параметр ItemIndex и обновить текст в  Item Шаблон и  выбранный стиль шаблона .

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

Снимок экрана Scroll Wheelиз предыдущего примера с внедренным кодом обновления показан ниже.

Значение индекса для элементов  Scroll Wheelтеперь показывает значение индекса элементов, а при прокрутке значения в элементах изменяются.

Callbacks

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

Scroll Wheel имеет четыре обратных вызова, которые вызываются на основе различных взаимодействий с  Scroll Wheel. Четырьмя обратными вызовами являются «Нажатие элемента», «Выбранный элемент», «Анимация до» и «Анимация» завершены.

Обратный вызов Item Pressed вызывается при каждом Scroll Wheel нажатии элемента в . Когда обратный вызов вызывается, целое число со значением индекса нажатого элемента передается в функцию-обработчик.

Обратный вызов Item Selected вызывается при щелчке элемента без перемещения Scroll Wheel. Подобно нажатию на элемент, обратный вызов Item Selected передает целое число со значением индекса элемента в функцию-обработчик при вызове.

Обратный вызов Animate To вызывается, когда  Scroll Wheel перемещается к определенному элементу в качестве выбранного элемента, то есть либо когда колесо отпущено, либо элемент в колесе щелкнут. Когда вызывается обратный вызов, в функцию-обработчик передается целое число со значением индекса элемента, которое будет соответствовать выбранному элементу.

Анимация завершена, обратный вызов вызывается каждый раз, когда Scroll Wheelанимация останавливается.