[UE 5.1] Custom Slate Widget 03

지난 포스팅 마지막 화면

 

---

이번에 추가할 기능은 "선택된 에셋 삭제 / 에셋 일괄 선택 / 에셋 일괄 선택 해제" 버튼이다.

기존 창 아래에 추가하고 싶으므로 스크롤 박스인 3번째 슬롯 아래에 추가해준다.

 

// 4번째 슬롯
		+ SVerticalBox::Slot()
		.AutoHeight()
		[
			SNew(SHorizontalBox)
			
			// Button 01
			+SHorizontalBox::Slot()
			.FillWidth(10.f)
			.Padding(5.f)
			[
				ConstructDeleteAllButton()
			]

			// Button 02
			+ SHorizontalBox::Slot()
			.FillWidth(10.f)
			.Padding(5.f)
			[
				ConstructSelectAllButton()
			]
			
			// Button 03
			+ SHorizontalBox::Slot()
			.FillWidth(10.f)
			.Padding(5.f)
			[
				ConstructDeselectAllButton()
			]

		]

각 버튼의 내부는 OnClicked 함수 델리게이트를 등록해주면 된다.

TSharedRef<SButton> SAdvanceDeletionTab::ConstructSelectAllButton()
{
	TSharedRef<SButton> SelectAllButton =
		SNew(SButton)
		.ContentPadding(FMargin(5.f))
		.OnClicked(this, &SAdvanceDeletionTab::OnSelectedAllButtonClicked);

	SelectAllButton->SetContent(ConstructTextForTabButtons(TEXT("Select All")));

	return SelectAllButton;
}

FReply SAdvanceDeletionTab::OnSelectedAllButtonClicked()
{
	return FReply::Handled();
}

각 함수는 위와 같은 형태를 띄고 있다.

 

출력 화면

 

 

일괄 삭제 버튼을 구현하기 위해서는 삭제를 적용할 에셋들을 모아두는 배열(TArray지만 편의상 배열이라고 부른다) 이 필요하다. 여기서 언리얼의 AddUnique() 함수를 적용한다.

AddUnique는 예전에 스마트 포인트 포스팅을 할 때 언급했던 emplace_back 과 동일한 기능이다.

이는 배열에 요소를 추가할 때 복사하지 않고 추가하는 기능이다. rvalue 전용 함수.

AddUnique 함수를 분석하다보면 

FORCEINLINE SizeType Emplace(ArgsType&&... Args)

이런 Emplace 함수가 나온다. 인자로는 && 인 rvalue 파라미터를 받는것을 볼 수 있다.

 

이렇게 AddUnique() 로 선택한 에셋들을 만든 배열을 집어넣고 모듈에 에셋 삭제를 호출해준다. 위젯도 갱신해 줘야하므로 지운 에셋들에 대해 위젯 내부에 에셋 리스트를 출력하는 배열도 갱신해주는것을 잊지 말아야 한다.

 

 

일괄 체크/해제 기능 구현이다.

CheckBox->IsChecked()를 사용하면 현재 체크박스가 체크되어있는지 알 수 있다.

CheckBox->ToggleCheckedState(); 를 사용해서 현재 체크박스의 상태를 반전시켜줄 수 있다. 

---

다음은 현재 사용중인/사용중이지 않은 에셋만을 출력하는 기능이다.

보통 이 기능은 콤보박스를 이용하면 쉽게 구현할 수 있다.

언리얼 위젯에서 콤보박스를 사용하기 위해서는 아래의 것들을 숙지해야한다.

OptionSource() : 소스 콘텐츠. 콤보박스에 표기되기를 원하는 내용이 있음
OnGenerateWidget() : 슬레이트 이벤트. 델리게이트라고 생각드롭다운의 타입임
OnSelectionChanged() : 핵심 기능. 드롭다운 내에서 어떤 옵션이 선택되었는지
SAssignNew() : 상자 표시를 담당하는 멤버 변수

위의 함수들을 전부 호출해 주어야 함.

 

먼저 최종적으로 완성한 코드는 아래와 같다.

TSharedRef<SComboBox<TSharedPtr<FString>>> SAdvanceDeletionTab::ConstructComboBox()
{
	TSharedRef<SComboBox<TSharedPtr<FString>>> ConstructedComboBox =
		SNew(SComboBox<TSharedPtr<FString>>)
		.OptionsSource(&ComboBoxSourceItems)
		.OnGenerateWidget(this, &SAdvanceDeletionTab::OnGenerateComboContent)
		.OnSelectionChanged(this, &SAdvanceDeletionTab::OnComboSelectionChanged)
		[
			SAssignNew(ComboDiplayTextBlock, STextBlock)
			.Text(FText::FromString(TEXT("List Assets Option")))
		] ;

	return ConstructedComboBox;
}

OptionsSource() 안에는 콤보박스에 띄울 아이템을 넣어준다.

OnGenerateWidget와 OnSelectionChanged는 조금 까다로울 수 있다.

먼저 사용한 두 함수는 아래와 같다.

OnGenerateWidget()

OnSelectionChanged()

잘 안보이는듯;;

위에서 함수의 호출 인자로는 this (이 함수를 호출한 오브젝트) 와 각 델리게이트로 사용할 함수를 넣어주었다.

OnGenerateWidget() 함수에서는 &SAdvanceDeletionTab::OnGenerateComboContent 를 호출했다. 위에서 대리자 함수의 형식을

TDelegate<TSharedRef<SWidget, ESPMode::ThreadSafe> (FTextDisplayStringPtr)>::TConstMethodPtr<UserClass, VarTypes ... > InFunc

이라고 알려줬으므로 작성해야 할 대리자 함수는 다음과 같아지겠다.

TSharedRef<SWidget> OnGenerateComboContent(TSharedPtr<FString> SourceItem);

같은 방식으로 OnSelectionChanged() 에서 호출한 함수인 &SAdvanceDeletionTab::OnComboSelectionChanged 는 아래와 같은 모습이 된다.

void OnComboSelectionChanged(TSharedPtr<FString> SelectedOption, ESelectInfo::Type InSelectInfo);

마지막으로 새롭게 만든 콤보박스 내부에 SAssignNew() 을 해줘야 한다. 이 부분을 빼먹으면 콤보박스에서 아무것도 볼 수 없어진다 ㅠㅠ

 

---

기리기리깃깃 -> https://github.com/InKyung-U/CustomEditor

GitHub - InKyung-U/CustomEditor