ListView를 사용한 이유
프로젝트 초기에는 TMap을 사용해 슬롯을 관리하려고 했다. 그러나 필요한 모듈만큼 Slot 객체를 생성하고, 이를 TMap에 하드코딩처럼 직접 넣는 방식은 반복적이고 유지보수가 어렵다고 느꼈다.
슬롯을 추가하거나 변경할 때마다 코드를 수정해야 했기 때문에, 더 유연한 방식이 필요하다고 느꼈다.
그 결과, ListView를 사용하여 슬롯을 동적으로 생성하고 관리하는 구조로 변경했다.
ListView는 슬롯을 동적으로 생성하고 데이터를 자동으로 반영할 수 있어, 모듈의 갯수나 타입에 관계없이 유연하게 대응할 수 있다. 이를 통해 각 슬롯의 모듈 정보를 더 효율적으로 반영하고 관리할 수 있었으며, 코드의 복잡도를 줄여 확장성과 유지보수성을 크게 개선했습니다.
클래스 설명
XZModuleSelectSlot
- 모듈 선택 및 UI 업데이트를 담당하며, Slot 클릭 시 캐릭터 외형에 반영된다.
XZModuleCustomizingLayer
- 커스터마이징 UI의 레이어를 관리하고, SlotListView를 통해 여러 슬롯을 관리한다.
XZModuleSelectSlotItem
NativeOnListItemObjectSet을 통해 XZModuleSelectSlot을 초기화한다.
FXZModuleSelectInfo 구조체
- 슬롯에 필요한 기본 데이터를 저장하며,
XZModuleSelectSlot에 데이터를 제공
XZModuleSelectSlot과 XZModuleSelectSlotItem 관계
XZModuleSelectSlot과XZModuleSelectSlotItem은 UI 슬롯과 그 슬롯에 해당하는 데이터 간의 관계로, 슬롯을 시각적으로 표현하는 부분과 데이터를 관리하는 부분
ListView 구현 과정
1. ListView 데이터 설정
ListView는UObject를 상속받은 클래스에서 데이터를 가져온다.- 구조체에 필요한 데이터를 정의하고
UObject를 상속받은 클래스를 정의하여 해당 구조체를 멤버 변수로 정의한다. - 구조체에 데이터를 담아 초기화한다.
2. 슬롯 초기화
- 각 슬롯은 NativeOnListItemObjectSet을 통해 ListView에 설정된 데이터를 받아 초기화된다.
void UXZModuleSelectSlot::NativeOnListItemObjectSet(UObject* ListItemObject)
{
IUserObjectListEntry::NativeOnListItemObjectSet(ListItemObject);
... 초기화
UXZModuleSelectSlotItem* SlotItem = Cast<UXZModuleSelectSlotItem>(ListItemObject);
ModuleType = SlotItem->GetSlotInfo().ModuleType;
...초기화
}3. 동적 슬롯 생성
- 필요한 만큼 UXZModuleSelectSlotItem을 동적으로 생성하고 ListView에 추가하여 슬롯을 관리한다.
TArray<UXZModuleSelectSlotItem*> SlotsArray;
for (int i = 0; i < ModuleNum; ++i)
{
UXZModuleSelectSlotItem* SlotItem = NewObject<UXZModuleSelectSlotItem>(this);
SlotsArray.Add(SlotItem);
}
SlotListView->SetListItems(SlotsArray);4.UI와 ModularComponent 간 상호작용
- 각 슬롯이 선택될 때마다 Delegate를 통해 ModularComponent와 연동되어, 캐릭터 외형에 모듈이 반영된다.
5.이미지 및 텍스트 업데이트
- 슬롯에서 선택된 모듈이 변경될 때마다 이미지와 텍스트가 업데이트되는 함수를 구현하여 실시간으로 캐릭터 외형에 반영된다.
Hello World