【UE5】UMGで使えるListViewの使い方まとめ
概要
この記事は一人アドベントカレンダー by ダリアの11日目の記事です。
今回はUMGのListViewの使い方についてまとめた記事になります。
環境
UE5.4.4
ListViewとは
ListViewはデータが追加されると、指定したWidgetクラスを生成して項目に並べてくれるものになります。
例として、Textを配列のデータを追加して項目を増やすWidgetをEUWで作成しました。
実行すると表示はこうなります。
これを実装するために必要なのは以下のものになります。
- 外部からデータを受け取る用のBP
- 受け取ったデータをどう表示するかを設定する
IUserObjectListEntryインターフェースを実装したWidget - ListViewを入れたWidget
ListViewにデータを渡す用のUObjectを継承したBP
先ほどの外部から生成した文字を表示してもらうように、外部からデータを受け取れるBPを作ります。
今回はTextを設定できるUObjectを継承したBPを用意しました。
今回は説明のためスポーン時に公開にチェックを入れます。
受け取ったデータをどう表示するかを設定するIUserObjectListEntryインターフェースを実装したWidget
先ほど作ったデータをどう表示するかを設定するウィジェットを作ります。
レイアウトは以下のようにします。
サンプルのため、テキストブロック単体にしてます
BPの設定の中身はこうなってます。
IUserObjectListEntryインターフェースを実装する必要があるので、
クラスデフォルトを選択し、実装インターフェースの中からIUserObjectListEntryを探し実装します
BPの処理の中身はこうなってます。
サンプルのため、処理の中身は先ほど作ったデータ型だったらSetTextしてもらうシンプルなものにしてます。
ListViewを入れたWidget
先程作ったデータとデータをどう表示するかのウィジェットを設定したListViewを作ります。
レイアウトは以下のようになります。
詳細ビューにあるリストエントリーカテゴリーにあるエントリーウィジェットクラスを先程作ったウィジェットクラスに指定します。
BPの処理の内容は冒頭で説明したものと同じものになりますので割愛します。
ここまで実装して、冒頭のような表示になったら成功です。
記事は以上になります。
ここまで読んでいただきありがとうございました。
Discussion