UMG ListView

UMG ListView 사용법에 대해서 알아 본다.

ListView 리소스 만들기

1. ListItem 만들기
2. ListView 만들기
3. InventoryItemData 만들기

ListView는 UObject로 타입으로 데이터를 추가 한다. UObject를 상속한 데이터 클래스를 별도로 만든다.
여기서는 InventoryItemData를 만든다.




1. ListItem 만들기

위젯 블루프린트를 생성한다.  이름은 "BP_ListItem"이다.
화면 크기는 Custom ( 200X50 )으로 한다.
이미지와 텍스트를 추가 한다.



2. ListView 만들기

Border는 바탕색을 칠하기 위해 추가한 것으로 장식용이다.
ListView를 추가 하면 "이 목록에 EntryWidgetClass를 지정하지 않았습니다"라는 문구가 뜬다.
지금은 BP_ListItem을 "Entry Widget Class"에 추가 할수 없다.



3. InventoryItemData 만들기

언리얼 에디터 > C++ 클래스 추가 > UObject를 상속해서 UInventoryItemData를 만든다.

데이터만 존재하기 때문에 헤더 파일에 사용할 데이터만 추가한다.

데이터는 다음과 같이 구성했다.
ItemIndex : 이미지 인덱스로 ListItem에서 이미지로 변경한다.
ItemText : ListItem에서 문자열로 변경한다.

InventoryItemData.h 파일
#pragma once

#include "CoreMinimal.h"
#include "UObject/NoExportTypes.h"
#include "InventoryItemData.generated.h"

UCLASS()
class UMGLISTVIEWDEMO_API UInventoryItemData : public UObject
{
    GENERATED_BODY()
   
public:
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Meta = (AllowPrivateAccess = "true"))
    int32 ItemIndex;

    UPROPERTY(EditAnywhere, BlueprintReadWrite, Meta = (AllowPrivateAccess = "true"))
    FString ItemText;
};

4. 리스트 Item 클래스 생성

C++로 다음과 같이 파일을 만든다.
상속 : UserWidget
파일이름은 InventoryItem

파일을 만들면 다음과 같이 헤더 파일이 생성 된다.
#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "InventoryItem.generated.h"

UCLASS()
class UMGLISTVIEWDEMO_API UInventoryItem : public UUserWidget
{
    GENERATED_BODY()
   
};


ListView의 아이템은 IUserObjectListEntry를 상속해야 한다.
IUserObjectListEntry.h 헤더 파일을 추가하고 IUserObjectListEntry를 상속한다.
#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "Blueprint/IUserObjectListEntry.h"
#include "InventoryItem.generated.h"

UCLASS()
class UMGLISTVIEWDEMO_API UInventoryItem : public UUserWidget, public IUserObjectListEntry
{
    GENERATED_BODY()
   
};

5. 리스트 아이템의 부모 클래스를 IUserObjectListEntry를 상속한 C++ 클래스로 변경한다.
BP_ListItem의 부모 클래스를 InventoryItem으로 변경한다.

6. 리스트뷰에서 Entry Widget Class를 지정한다.
BP_ListView에서 "Entry Widget Class"를 "BP_ListItem"으로 지정한다.


7. BP_ListView를 BP_UI_MAIN에 배치 한다.


8. 리스트 Item 클래스에  UI 리소스와 데이터 추가

UInventoryItem 클래스에 UI 리소스와 데이터를 추가 한다.
Visual Data는 UI리소스로 화면에 보이는 데이터이다.
Real Data는 화면에 보이지 않지만 아이템이 가지고 있는 정보로 InventoryItemData의 값을 저장 해둔다.

InventoryItem.h 파일의 일부
UCLASS()
class UMGLISTVIEWDEMO_API UInventoryItem : public UUserWidget, public IUserObjectListEntry
{
    GENERATED_BODY()

protected:
    //Visual Data
    UPROPERTY()
    class UTextBlock* TextBlock_ItemText;
    UPROPERTY()
    class UImage* Image_ItemImage;

    //Real Data
    UPROPERTY()
    int Index;
    UPROPERTY()
    FString ItemText;
};

9. 리스트뷰에서 데이터 추가와 클릭하기

리스트뷰에 데이터 추가는 UListView::AddItem으로 한다.
AddItem에 추가하는 데이터는 UObject 데이터를 상속한 UInventoryItemData이다.

지금 단계에서는 데이터를 이렇게 추가 할수있다는것만 알고 넘어 간다.

아이템 클릭은 다음 함수로 불려질 함수를 연결한다.
UListView::OnItemClicked

MyListView.h 파일
UCLASS()
class UMGLISTVIEWDEMO_API UMyListView : public UUserWidget
{
    GENERATED_BODY()

protected:
    void InitList();
    virtual bool Initialize() override;

protected:
    UPROPERTY()
    class UListView* ListView_Name;

    UFUNCTION()
    void OnItemClick(UObject* Obj);
};

MyListView.cpp 파일
bool UMyListView::Initialize()
{
    if (Super::Initialize() == false)
        return false;

    ListView_Name->OnItemClicked().AddUObject(this, &UMyListView::OnItemClick);
    InitList();
    return true;
}

void UMyListView::InitList()
{
    for (int n = 0; n < 20; ++n)
    {
        UInventoryItemData* item = NewObject<UInventoryItemData>(this, UInventoryItemData::StaticClass());
        item->ItemIndex = n + 1;
        item->ItemText = FString::Printf(TEXT("%03d"), n + 1);
        ListView_Name->AddItem(item);
    }
}

void UMyListView::OnItemClick(UObject* Obj)
{
    UInventoryItemData* pData = Cast<UInventoryItemData>(Obj);

    if (IsValid(pData))
    {
        UE_LOG(LogTemp, Log, TEXT("Index=%d, Name=%s"), pData->ItemIndex, *pData->ItemText);
    }
}

10. 리스트 아이템에서 NativeOnListItemObjectSet 함수 처리

ListView는 항목을 추가하면 리스트 아이템의 NativeOnListItemObjectSet 함수가 불린다.
NativeOnListItemObjectSet 함수에서  ItemData로 InventoryData의 비쥬얼 리소스를 설정한다.
SetData로 ItemData를 저장 한다.


InventoryItem.h 파일
virtual void NativeOnListItemObjectSet(UObject* ListemItemObject) override;

InventoryItem.cpp 파일
void UInventoryItem::NativeOnListItemObjectSet(UObject* ListemItemObject)
{
    UInventoryItemData* ItemData = Cast< UInventoryItemData>(ListemItemObject);
    if (IsValid(ItemData))
    {
        TextBlock_ItemText->SetText(FText::FromString(ItemData->ItemText));
        UTexture2D* Texture = LoadObject<UTexture2D>(nullptr, TEXT("/Game/texture/redbox.redbox"));
    }

    SetData(ItemData);
}


InventoryItem의 전체 소스는 다음과 같다.

InventoryItem.h 파일
// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "Blueprint/IUserObjectListEntry.h"
#include "InventoryItem.generated.h"

/**
 *
 */
UCLASS()
class UMGLISTVIEWDEMO_API UInventoryItem : public UUserWidget, public IUserObjectListEntry
{
    GENERATED_BODY()

public:
    void SetData(class UInventoryItemData* Data);

protected:
    virtual void NativeOnListItemObjectSet(UObject* ListemItemObject) override;
    virtual void NativeOnItemSelectionChanged(bool bIsSelected) override;

protected:
    //Visual Data
    UPROPERTY()
    class UTextBlock* TextBlock_ItemText;
    UPROPERTY()
    class UImage* Image_ItemImage;

    //Real Data
    UPROPERTY()
    int Index;
    UPROPERTY()
    FString ItemText;
};


InventoryItem.cpp 파일
// Fill out your copyright notice in the Description page of Project Settings.

#include "InventoryItem.h"
#include "Components/TextBlock.h"
#include "Components/Image.h"
#include "InventoryItemData.h"

void UInventoryItem::SetData(class UInventoryItemData* Data)
{
    Index = Data->ItemIndex;
    ItemText = Data->ItemText;
}

void UInventoryItem::NativeOnListItemObjectSet(UObject* ListemItemObject)
{
    UInventoryItemData* ItemData = Cast< UInventoryItemData>(ListemItemObject);
    if (IsValid(ItemData))
    {
        TextBlock_ItemText->SetText(FText::FromString(ItemData->ItemText));
        if ((ItemData->ItemIndex % 3) == 0)
        {
            UTexture2D* Texture = LoadObject<UTexture2D>(nullptr, TEXT("/Game/texture/redbox.redbox"));
            if (Texture)
                Image_ItemImage->SetBrushFromTexture(Texture);
        }
        else if ((ItemData->ItemIndex % 3) == 1)
        {
            UTexture2D* Texture = LoadObject<UTexture2D>(nullptr, TEXT("/Game/texture/bluebox.bluebox"));
            if (Texture)
                Image_ItemImage->SetBrushFromTexture(Texture);
        }
        else
        {
            UTexture2D* Texture = LoadObject<UTexture2D>(nullptr, TEXT("/Game/texture/greenbox.greenbox"));
            if (Texture)
                Image_ItemImage->SetBrushFromTexture(Texture);
        }
    }

    SetData(ItemData);
}

void UInventoryItem::NativeOnItemSelectionChanged(bool bIsSelected)
{
    UE_LOG(LogTemp, Warning, TEXT("bIsSelected: %d, 0x%p, NativeOnItemSelectionChanged"), bIsSelected, this);
}


UmgListViewDemo.zip
InventoryItem.h
InventoryItem.cpp
InventoryItemData.h
InventoryItemData.cpp
MyListView.h
MyListView.cpp

PS)
NativeOnItemSelectionChanged 실행 결과

실행 결과를 보면 해제, 선택의 순서가 일정하지 않다.