Touch ToggleButton

Touch ScrollView에서 사용하기 위해 Touch ToggleButton을 만들어 보자.
터치 스크린은 마우스 이벤트와는 다른 이벤트를 사용하기 때문에 추가 처리가 필요하다.
터치 이벤트를 처리하는 Touch ToggleButton을 만들어 보자.

TouchToggleButton은 클릭 이벤트만 처리하고 비주얼은 참조하는 CheckBox로 처리 한다.
TouchToggleButton의 비주얼은 숨긴다.

TouchToggleButton 사용법

TouchToggleButton을 사용하는 방법에 대해서 알아 본다.

TouchToggleButton 파일 복사

TouchToggleButton.h
TouchToggleButton.cpp

파일을 복사하면 다음의 에러가 발생한다.
error C2079: 'UTouchScrollWidget'은(는) 정의되지 않은 class 'UI_TEST_API'을(를) 사용합니다.

헤더 파일 TouchScrollWidget.h, TouchToggleButton.h 파일에서 UI_TEST_API를 UMGDEMO_API로 변경한다.

TouchToggleButton UI 리소스 추가

TouchToggleButton 클래스를 추가 후 컴파일 하면 아래 그림과 같이 "일반"에 추가 된다.

TouchToggleBox를 추가하고 이름은 TouchToggleButton_Test로 한다.
CheckBox를 추가하고 이름은 CheckBox_Toggle로 한다.

TouchToggleButton_Test를 지정하고 디테일 패널에서 CheckBox를 지정한다.

CheckBox_Toggle에서 다음 사항을 설정한다.

체크 박스 테스트를 위해 Check Box Type을 "Toggle Button"으로 지정한다.
Unchecked Image를 "Box"로 설정한다.
Checked Image를 "Box"로 설정하고 칼라를 수정한다.

Visibility를 "Not Hit-Testable (Select & All Children)으로 설정 한다.
Toggle Button에서 CheckBox를 선택하는 순간 아래 옵션은 자동으로 설정된다.
그러니 별도로 설정 할 필요가 없다.

클릭시 버튼 이벤트 처리

버튼이 클릭 되면 다이나믹 멀티캐스트로 OnClickTouchButton로 Broadcast를 한다.

OnClickTouchButton.Broadcast(this);

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FClickTouchButton, UWidget*, Widget);

class UMGDEMO_API UTouchToggleButton : public UButton
{
    .....
public:
    FClickTouchButton OnClickTouchButton;
    .....
};

touchToggleButton->OnClickTouchButton.AddDynamic(this, &UTouchScrollWidget::OnClickListItem);

내부 코드 분석

버튼의 Touch와 Drag(나중에 ScrollView에서 드래그 하기 위해)를 지원하기 위해 디테일 패널의 옵션을 다음과 같이 변경한다.

Click Method를 "Precise Click"
Touch Method를 "Precise Tap"

다음 코드로 처리 한다.

ClickMethod = EButtonClickMethod::PreciseClick;
TouchMethod = EButtonTouchMethod::PreciseTap;

버튼을 숨기기 위해 DrawAs를 ESlateBrushDrawType::NoDrawType으로 설정 한다.

    WidgetStyle.Normal.DrawAs = ESlateBrushDrawType::NoDrawType;
    WidgetStyle.Hovered.DrawAs = ESlateBrushDrawType::NoDrawType;
    WidgetStyle.Pressed.DrawAs = ESlateBrushDrawType::NoDrawType;
    WidgetStyle.Disabled.DrawAs = ESlateBrushDrawType::NoDrawType;

참조된 체크박스(MyCheckBox)는 클릭시 이벤트를 받지 않도록 설정한다.

MyCheckBox->SetVisibility(ESlateVisibility::HitTestInvisible);

에디에서 설정이 바뀌면 체크박스의 옵션을 자동으로 변경하기 위해 SynchronizeProperties 메소드에서 ResetCheckButton 함수를 호출 한다.

void UTouchToggleButton::SynchronizeProperties()
{
    Super::SynchronizeProperties();
    if (IsDoOnce.IsSet() && IsDoOnce)
    {
        ResetCheckButton();
    }
}

TOptional< >을 사용 하면 값이 초기화 되었는지 아닌지 처리 할 수 있다.

TOptional<bool> IsDoOnce;
IsDoOnce = true;

if (IsDoOnce.IsSet() && IsDoOnce)
{
ResetCheckButton();
}

포커스가 버튼에 없는 경우 클릭시 이벤트가 두번 발생 한다.
버튼을 하번만 처리 하기 위해 고성능 타이머 FPlatformTime::Seconds를 이용해 클릭 이벤트를 한번만 받도록 처리 했다.

버튼 클릭시 체크 박스의 토글 한다.

void UTouchToggleButton::OnClickButton()
{
    double now = FPlatformTime::Seconds();
    if (now - LastClickTimer < 0.05f)
        return;

    LastClickTimer = now;

    UE_LOG(LogTemp, Log, TEXT("UTouchToggleButton::OnClickButton"));
    if (MyCheckBox)
    {
        if(MyCheckBox->GetCheckedState() == ECheckBoxState::Checked)
            MyCheckBox->SetCheckedState(ECheckBoxState::Unchecked);
        else
            MyCheckBox->SetCheckedState(ECheckBoxState::Checked);
    }

    if (OnClickTouchButton.IsBound())
        OnClickTouchButton.Broadcast(this);
}

참조)
Basic UI Test Project : tutorial16.html