주요 내용으로 건너뛰기

Repeat Button

TouchGFX에서 Repeat Button은 Repeat Button을 누를 때 터치 이벤트를 인지하여 콜백을 전송할 수 있는 위젯입니다. 이 버튼은 눌렀을 때 액션을 즉시 활성화하고 일정 시간 후 간격을 두고 반복해서 활성화합니다. 눌렀을 때와 뗐을 때의 각 상태는 이미지와 관련이 있습니다.

Flex Button을 사용하면 Repeat Button을 복제할 수 있습니다. Flex Button이란 유연성이 높아 더욱 다양하게 구성할 수 있는 대신 RAM 용량을 더 많이 차지하는 버튼을 말합니다.

시뮬레이터에서 실행 중인 반복 버튼

위젯 그룹​

Repeat Button은 TouchGFX Designer의 Buttons 위젯 그룹에 있습니다.

TouchGFX Designer의 Repeat Button

속성​

TouchGFX Designer에서 Repeat Button의 속성은 다음과 같습니다.

속성 그룹속성 설명
Name위젯 이름입니다. 이는 TouchGFX Designer와 코드에서 사용되는 고유 식별자입니다.
LocationX 와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다.

W 와 H는 위젯의 가로 및 세로 길이를 지정합니다.
버튼의 크기는 선택한 이미지의 크기에 따라 결정됩니다.

Lock은 현재의 X, Y, W, H 위치에서 위젯의 고정 여부를 지정합니다.
위젯을 현재 위치에 고정시키면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.

Visible은 위젯의 표시 여부를 지정합니다.
위젯을 보이지 않게 하면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.
StyleStyle은 위젯의 사전 설정을 지정합니다. 여기에서 선택하는 속성은 사전 설정 값으로 지정됩니다.
이 스타일에는 자유롭게 사용할 수 있는 이미지가 포함되어 있습니다.
ImageReleased Image 와 Pressed Image는 Designer 스킨 라이브러리 또는 Project 폴더에서 버튼을 눌렀을 때와 뗐을 때의 각 상태에 할당할 이미지를 지정합니다.
SettingsDelay는 버튼을 누른 후 트리거가 순환을 시작할 때까지 대기해야 하는 시간(ms) 을 지정합니다.

Interval은 모든 트리거 사이의 시간(ms) 간격을 지정합니다. 설계자는 밀리초 단위의 시간 입력을 허용하여 tick 시간으로 변환합니다.
AppearanceAlpha는 위젯의 투명도를 지정합니다.
위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.
MixinsDraggable은 런타임 시 위젯의 드래그 가능 여부를 지정합니다.

ClickListener는 클릭했을 때 위젯의 콜백 실행 여부를 지정합니다.

FadeAnimator는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

MoveAnimator는 값 변경에 대한 애니메이션 처리 여부를 지정합니다. X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

인터랙션​

Repeat Button에서 지원되는 액션과 트리거는 다음 섹션에서 설명합니다.

액션​

표준 위젯 액션설명
Move widget시간이 지나면서 위젯을 새로운 위치로 이동시킵니다.
Fade widget시간이 지나면서 위젯의 알파 값을 변경합니다.
Hide widget위젯을 숨깁니다(visibility를 false로 설정).
Show widget숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정).

트리거​

트리거설명
Button is clicked버튼이 클릭되었습니다.

성능​

Repeat Button은 2가지 이미지로 구성되어 있으며, 이미지 그리기에 따라 다릅니다. 따라서 대부분의 플랫폼에서 속도가 빠른 위젯으로 알려져 있습니다.

이미지 그리기 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.

예제​

생성 코드​

View 기본 클래스의 생성 코드를 보면 TouchGFX Designer에서 반복 버튼이 어떻게 설정되는지 알 수 있습니다.

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"

Screen1ViewBase::Screen1ViewBase() :
    buttonCallback(this, &Screen1ViewBase::buttonCallbackHandler)
{
    repeatButtonName.setXY(155, 106);
    repeatButtonName.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    repeatButtonName.setDelay(12);                      // Set at 200 (ms) in Designer
    repeatButtonName.setInterval(20);                   // Set at 333 (ms) in Designer
    repeatButtonName.setAction(buttonCallback);

    add(repeatButtonName);
}

void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
    if (&src == &repeatButtonName)
    {
        //InteractionName
        //When repeatButtonName clicked calls the new virtual function "functionName()" set by the user
        functionName();
    }
}
Tip
사용자 코드의 RepeatButton 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면 repeatButtonName.invalidate() 함수를 호출하여 강제로 다시 그리기를 해야 합니다.

API 참조​

Further reading
  • RepeatButton 클래스에 대한 API 참조