[UE5] 見た目が異なるウィジェットを ListView で表示したい

執筆バージョン: Unreal Engine 5.7.2

こちらの記事は以下の記事を読んでいる知識がある前提となります
[UE4]UE4.20で追加されたListViewウィジェットについて

UIエンジニアのみなさん、こんにちは

UIを作っていく中で、たくさんの項目を表示する必要がある場合、スクロール画面を採用する事が多くあると思います
UEでは標準機能で作る場合 ScrollBox か ListView という２つの内どちらかを利用します

今回は以下の様に異なる見た目の項目が並ぶ画面を ListView で作る方法を紹介していきます
オプション画面の様な見た目の画面になります

EntryItemクラスの作成

ListView で扱うパラメータを持つクラスを作成します
帯があるタイトル部分と無いコンテンツ部分を切り替えられる様にし、テキストをそれぞれ設定できる形にする為
以下の２つパラメータを持つようにします

・bIsTitle　bool型：表示を切り替える
・Text　Text型：表示するテキスト

今回の紹介ではオプション画面の様な見た目を作る為
Object型の BP_OptionListParam という名称でアセットを作成しました

各パラメータはオブジェクトを作成するタイミングで設定する為、Instance Editable と Expose on Spawn を有効にしておく必要があります
画像では bIsTitle だけですが Textも同じ設定が必要です

オプション画面のリストの項目を扱う為
UserWidget型の W_OptionListParts という名称でアセットを作成しました

ListView で使用する為に作成したW_OptionListParts のクラス設定を変更します
Class Settings から Implemented Interface の欄に User Object List Entry を追加します

作成した BP_OptionListParam のパラメータを使って、表示を変えるウィジェットを作成します

今回は WidgetSwitcher でタイトル表示とコンテンツ表示を切り替えられるようにしておきました

まずは BP_OptionListParam のパラメータを受け取り、表示状態を切り替える関数を作成します
bIsTitle によって表示されるWidget が変わり、テキストを反映する先も変更されています

作成した関数の引数は、BP_OptionListParam型 の変数を設定しております

EventGraphにて ListView の表示が更新の命令（EventOnListItemObjectSet）のタイミングで、定義した表示更新関数 Setup を呼ぶようにします

作成した W_OptionListParts を表示する為に新しくウィジェットを作成します
UserWidget型の W_Option という名称でアセットを作成しました

Palette欄にて ListView を選択して好みの場所に配置します
今回は上部にオプションと表示するようにしたり、背景を Border で透過させてみたりしております

このままではエラーになってしまうため、先程作成した W_OptionListParts を ListView の EntryWidgetClass に設定します

ListViewに表示する要素を設定します

テキストの配列を渡す事で、ListView に要素を追加する関数 AddListViewItem を以下の様に作成しました
テキストの配列の初めの要素はタイトルとして設定される内容になります

作成されるObjectのクラスに BP_OptionListParam型 を設定するのを忘れずに

上記関数を使って、表示したい内容をテキストの配列に設定して起動時に追加されるようにします

レベルに W_Option を表示する事で、タイトルが間に挟まった ListView が表示されます

今回は表示だけを行いましたが
bIsTitle が無効な場合にのみ、オプションを変更できるボタンやチェックボックスなどを追加する事で
オプション画面を実装する事もできます

現在 ScrollBox を使用している箇所も、ListView にする事でパフォーマンスアップするかもしれませんので
これを機に ListView の採用を検討してみてはいかがでしょうか

では、良いUIライフを