주요 내용으로 건너뛰기

Slide Menu

TouchGFX에서 Slide Menu는 내부 Container와 Image, 그리고 펼친 상태와 접힌 상태 사이에서 애니메이션 처리가 가능한 옵션형 Button으로 구성된 Container 전용 위젯입니다.

시뮬레이터에서 실행 중인 Slide Menu

위젯 그룹​

Slide Menu는 TouchGFX Designer의 Containers 위젯 그룹에 있습니다.

TouchGFX Designer의 Slide Menu

속성​

Slide Menu의 속성은 다음 섹션에서 설명합니다.

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

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

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

Visible은 위젯의 표시 여부를 지정합니다.
위젯을 보이지 않게 하면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.
Expanding DirectionExpanding Direction은 Slide Menu가 펼쳐지는 방향을 지정합니다.
StateState는 슬라이드 메뉴의 초기 상태(접힌 또는 펼친 상태)를 지정합니다.

Collapsed: Visible Pixels는 접힌 상태일 때 표시되는 픽셀의 양을 지정합니다.

Expanded: Hidden Pixels는 펼친 상태일 때 표시되지 않는 픽셀의 양을 지정합니다.

Expanded Timeout은 펼친 상태에서 접힌 상태로 자동으로 돌아갈 때까지 소요되는 시간을 지정합니다.
BackgroundBackground Image는 배경으로 사용할 이미지를 지정합니다.

Background Location은 위젯의 좌표를 기준으로 배경 이미지의 x,y 좌표를 지정합니다.
ButtonUse Button은 위젯의 상태를 제어할 때 버튼 사용 여부를 지정합니다.

Released Image는 버튼에서 손을 뗀 상태에 사용할 이미지를 지정합니다.

Pressed Image는 버튼을 누른 상태에 사용할 이미지를 지정합니다.

Button Location은 위젯의 좌표를 기준으로 버튼의 x,y 좌표를 지정합니다.
AnimationEasing 및 Easing Option은 애니메이션에 사용할 완화 방정식(easing euation)을 지정합니다.

Duration은 애니메이션을 실행하는 데 소요되는 시간을 지정합니다.
MixinsDraggable은 런타임 시 위젯의 드래그 가능 여부를 지정합니다.

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

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

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

인터랙션​

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

액션​

위젯별 액션설명
Change State of Slide MenuSlide Menu를 접히거나 펼친 상태로 변경합니다.
Reset Timer of Slide MenuSlide Menu를 접힌 상태로 자동으로 복원하는 타이머를 리셋합니다.
표준 위젯 액션설명
Move widget시간이 지나면서 위젯을 새로운 위치로 이동시킵니다.
Hide widget위젯을 숨깁니다(visibility를 false로 설정).
Show widget숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정).

트리거​

트리거설명
Slide Menu animation ended한 상태에서 다른 상태로 바뀌는 Slide Menu 애니메이션이 종료되었습니다.
Slide Menu state changedSlide Menu의 상태가 바뀌었습니다.

성능​

Slide Menu는 Container 유형으로, 기본적으로 드로우 체인에 표시되지 않습니다. 따라서 성능은 주로 하위 노드의 그리기 성능에 따라 달라집니다.

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

예제​

생성 코드​

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

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

Screen1ViewBase::Screen1ViewBase()
{
    slideMenuName.setup(touchgfx::SlideMenu::EAST,
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BACKGROUND_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        0, 0, 49, 111);
    slideMenuName.setState(touchgfx::SlideMenu::COLLAPSED);
    slideMenuName.setVisiblePixelsWhenCollapsed(24);
    slideMenuName.setHiddenPixelsWhenExpanded(0);
    slideMenuName.setAnimationEasingEquation(touchgfx::EasingEquations::circEaseInOut);
    slideMenuName.setAnimationDuration(18);
    slideMenuName.setExpandedStateTimeout(180);
    slideMenuName.setXY(0, 0);

    add(slideMenuName);
}
Tip
사용자 코드의 SlideMenu 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면 Slide MenuName.invalidate() 함수를 호출하여 강제로 다시 그리기를 해야 합니다.

TouchGFX Designer Example​

Slide Menu에 대해 자세히 알아보려면TouchGFX Designer에서 다음 UI 템플릿을 사용해 새로운 애플리케이션을 생성하십시오.

TouchGFX Designer의 Slide Menu Example UI 템플릿

API 참조​

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