BLOGブログ

2019.10.23UE4UE/ C++

[UE4] Slateで検索可能なコンボボックスを自作する

執筆バージョン: Unreal Engine 4.22

以前ご紹介した記事で独自の型の変数をコンボボックスから選択できるようにしました。

ですがこのデータテーブルの項目がある程度増えてくると目的の項目を探すのに非常に手間がかかってしまいます。

そこで今回は以前の記事で実装した機能を拡張し、以下の画像のような検索欄を追加したいと思います。

コンボボックスについて

デフォルトのコンボボックスは、「Engine\Source\Runtime\Slate\Public\Widgets\Input\SComboBox.h」で定義されています。 SComboBoxはテンプレートで定義されており、配列の中身の型にしばられず様々なものを一覧表示してくれます。 前回使っていたものは文字列を一覧してくれる「STextComboBox」というものになります。 SComboBoxはボタンとそのボタンを押したときに新たにテキストを一覧するウィンドウの2部分で構成されています。 今回追加したい部分はこの「テキストを一覧するウィンドウ」の最上部となりますのでSComboBoxから改造する必要があります。

開発手順

1.コンボボックスに検索欄を追加

コンボボックスのコードに直接かくとエンジン改造になってしまい大事になるのでベースは「SComboBox.h」をコピペして新規のクラスを定義していきます。 前回作ったTestEdフォルダ以下に「CustomComboBox.h」を作成し以下のコードを記述します

  ComboBox内で一覧するウィンドウを作っているのが、ComboBoxMenuContentをSNewしているあたりになります。 なのでここにSearchBoxを追加します。 SAssignNewとしておくことで、変数に格納しておいてあとでこのSearchBoxに対して操作ができるようになります。 SearchBoxの検索処理自体は自前で書く必要があるため、ここで一旦変数に格納しておきます。 そして検索処理と一覧する項目の変更はOnSearchTextChanged()で行っています。 これはSearchBoxのテキストが変更された瞬間に実行されるようになっており、検索欄に入力された文字列を含む要素のみ、配列に格納していきます。 配列の内容を更新し終わったら、ComboListView->RebuildList();によって一覧する項目の更新をします。

2.STextComboBoxの修正

STextComboBoxはデフォルトではSComboBoxを生成して使用していますが、新たに作成した検索欄付きのSCustomComboBoxを使用するように修正します。 エンジン改造とならないようにベースはSTextComboBox .h/.cppをコピペして使います。新たに作るファイルはそれぞれCustomTextComboBox .h/.cppとします。 コードは以下のとおりです。

インクルードするファイルと生成するクラスの型が変わっていますが基本的な機能はそのままです。

3.BPピンと詳細パネルに反映させる

前回作ったファイルのSTextComboBoxを指定していた部分をSCustomTextComboBoxにさしかえます。 併せてインクルードするファイルも新規のクラスが記述されているものに差し替えます。

これで完成です。