<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="2" class="code-line">この記事は<a href="https://qiita.com/advent-calendar/2024/solo-dariadvent-calendar" target="_blank" rel="nofollow noopener noreferrer">一人アドベントカレンダー by ダリア</a>の11日目の記事です。<br>
今回はUMGのListViewの使い方についてまとめた記事になります。</p>
<h1 id="%E7%92%B0%E5%A2%83" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<p data-line="7" class="code-line">UE5.4.4</p>
<h1 id="listview%E3%81%A8%E3%81%AF" data-line="9" class="code-line">
<a class="header-anchor-link" href="#listview%E3%81%A8%E3%81%AF" aria-hidden="true"></a> ListViewとは</h1>
<p data-line="11" class="code-line">ListViewはデータが追加されると、指定したWidgetクラスを生成して項目に並べてくれるものになります。</p>
<p data-line="13" class="code-line">例として、Textを配列のデータを追加して項目を増やすWidgetをEUWで作成しました。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--rb3hdVZm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/14b5a3f253e8772f6e4f6e0a.png%3Fsha%3D4d68ce84a8113cad5ab8ba5138ed2edc6953b63e" loading="lazy" class="md-img"></p>
<p data-line="16" class="code-line">実行すると表示はこうなります。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--5GrvPXj1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/46791a27d5fd5132c0c79ef7.png%3Fsha%3D2af68fcd36446d9c7b1bb9ac94f343958c407920" loading="lazy" class="md-img"></p>
<p data-line="19" class="code-line">これを実装するために必要なのは以下のものになります。</p>
<ul data-line="21" class="code-line">
<li data-line="21" class="code-line">外部からデータを受け取る用のBP</li>
<li data-line="22" class="code-line">受け取ったデータをどう表示するかを設定する<code>IUserObjectListEntry</code>インターフェースを実装したWidget</li>
<li data-line="23" class="code-line">ListViewを入れたWidget</li>
</ul>
<h3 id="listview%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%B8%A1%E3%81%99%E7%94%A8%E3%81%AEuobject%E3%82%92%E7%B6%99%E6%89%BF%E3%81%97%E3%81%9Fbp" data-line="25" class="code-line">
<a class="header-anchor-link" href="#listview%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%B8%A1%E3%81%99%E7%94%A8%E3%81%AEuobject%E3%82%92%E7%B6%99%E6%89%BF%E3%81%97%E3%81%9Fbp" aria-hidden="true"></a> ListViewにデータを渡す用のUObjectを継承したBP</h3>
<p data-line="26" class="code-line">先ほどの外部から生成した文字を表示してもらうように、外部からデータを受け取れるBPを作ります。<br>
今回はTextを設定できるUObjectを継承したBPを用意しました。<br>
今回は説明のためスポーン時に公開にチェックを入れます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--SwCvbPlw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c607ba5fe8c71c86bf644ff6.png%3Fsha%3Da7bb1b323ad80ffcaf6f52cd0ebce418681ddb81" loading="lazy" class="md-img"></p>
<h3 id="%E5%8F%97%E3%81%91%E5%8F%96%E3%81%A3%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%81%A9%E3%81%86%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%81%8B%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8Biuserobjectlistentry%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9Fwidget" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%97%E3%81%91%E5%8F%96%E3%81%A3%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E3%81%A9%E3%81%86%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%81%8B%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8Biuserobjectlistentry%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9Fwidget" aria-hidden="true"></a> 受け取ったデータをどう表示するかを設定する<code>IUserObjectListEntry</code>インターフェースを実装したWidget</h3>
<p data-line="33" class="code-line">先ほど作ったデータをどう表示するかを設定するウィジェットを作ります。</p>
<p data-line="35" class="code-line">レイアウトは以下のようにします。<br>
サンプルのため、テキストブロック単体にしてます<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--_GU-D0N5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/59367c9d5a0ecb9846a5bb43.png%3Fsha%3Dcde516322f686e99ddab38b65348613642c6ac7c" loading="lazy" class="md-img"></p>
<p data-line="40" class="code-line">BPの設定の中身はこうなってます。</p>
<p data-line="42" class="code-line"><code>IUserObjectListEntry</code>インターフェースを実装する必要があるので、<br>
クラスデフォルトを選択し、実装インターフェースの中から<code>IUserObjectListEntry</code>を探し実装します<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--jjjo04cb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/576fb40d42e3156b6a9b4176.png%3Fsha%3D95c4314f26c4e66b367a578b5368fe1b9d01bc71" loading="lazy" class="md-img"></p>
<p data-line="47" class="code-line">BPの処理の中身はこうなってます。<br>
サンプルのため、処理の中身は先ほど作ったデータ型だったらSetTextしてもらうシンプルなものにしてます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--_s9rRJbW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/959f86e0c68b1feace9e6594.png%3Fsha%3D393d39c6dc81d529766fad41cdb1ce03686fa20b" loading="lazy" class="md-img"></p>
<h3 id="listview%E3%82%92%E5%85%A5%E3%82%8C%E3%81%9Fwidget" data-line="53" class="code-line">
<a class="header-anchor-link" href="#listview%E3%82%92%E5%85%A5%E3%82%8C%E3%81%9Fwidget" aria-hidden="true"></a> ListViewを入れたWidget</h3>
<p data-line="54" class="code-line">先程作ったデータとデータをどう表示するかのウィジェットを設定したListViewを作ります。<br>
レイアウトは以下のようになります。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--cneyPHa---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d5f47ef21537fc6cb1cdbe44.png%3Fsha%3D3ebf42e7b1afba34663f18a614f8e65549c41fef" loading="lazy" class="md-img"></p>
<p data-line="58" class="code-line">詳細ビューにある<code>リストエントリー</code>カテゴリーにあるエントリーウィジェットクラスを先程作ったウィジェットクラスに指定します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--BZQnZuTI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/4847b614bae4d4799b82cf7c.png%3Fsha%3Dc3cacb77247c6d3052d80091e676485cb094dc0b" loading="lazy" class="md-img"></p>
<p data-line="61" class="code-line">BPの処理の内容は冒頭で説明したものと同じものになりますので割愛します。</p>
<p data-line="63" class="code-line">ここまで実装して、冒頭のような表示になったら成功です。</p>
<p data-line="65" class="code-line">記事は以上になります。<br>
ここまで読んでいただきありがとうございました。</p>
<h1 id="%E5%8F%82%E8%80%83" data-line="68" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p data-line="69" class="code-line"><a href="https://www.youtube.com/watch?v=76SWLfeyO0o" target="_blank" rel="nofollow noopener noreferrer">Understanding List View - Unreal Engine 5 Beginner tutorial</a></p>


【UE5】UMGで使えるListViewの使い方まとめ

ListViewにデータを渡す用のUObjectを継承したBP

受け取ったデータをどう表示するかを設定するIUserObjectListEntryインターフェースを実装したWidget

Discussion