こんにちは、エンジニアのオオバです。
あまり頻度高くは使用しいないけど超絶便利なReorderableList。
このような結構複雑なUIをサクッと作れるのには感動すら覚えます(これをフルスクラッチで書くとか...)。
ReorderableListとは、公式リファレンスには載ってはいませんが、ネットではある一定の情報が拡散するUnityエディタInternalパッケージの非推奨クラスです。
何が良いかというと↑のようにD&Dで並び替え、要素の追加、削除が可能なGUIエディタを簡単に作ることができるからです。
今回は記事のタグ(忘れやすいのでメモ)にあるように、個人的に使う度に毎回忘れてしまう系の情報なのでメモしておくというライトなシリーズです。
またネット上ではカスタムエディタ上でserializeObjectプロパティを元に制作するReorderableListの記事が多かったので、serializeObjectを使用しないパターンで作ります。
サンプルコード
Snippet ReorderableList · GitHub
- ReorderableListのコンストラクタ引数
- drawElementCallbackで要素のセッティング
- DoLayoutListで表示
大事なのはこの3つ。
1.ReorderableListのコンストラクタ引数
| 引数 | 型 | 内容 |
|---|---|---|
| 第1引数 | IList型 | リストなり配列なり |
| 第2引数 | Type型 | リストなり配列なりのType型 |
先のサンプルではData型のリストをReorderableListで表示したいので、このようにData型のリストとData型のTypeを渡します。
_ro = new ReorderableList (t.list, typeof(Data));
ちなみに第３引数以降でD&D、追加削除ボタンの有無なども設定できます。
入力しない場合は、全てON状態になります。
2.drawElementCallbackで要素のセッティング
リストの描画を実行したときのコールバックdrawElementCallbackが重要で、ここにどういう風にリストを表示させるか処理を書きます。
コールバック関数の第1引数のRect型はデフォルト(x:20f, y:2f, width:-25f, height:21f)という値で返ってきます。この値を元に要素をレイアウトしていきます。
このRectの
xとyは↑の図のピンクの点の位置になります。 左の位置に要素を表示させたい場合は、このRectのx, yは生かし、要素の幅をwidth変数に代入して表示させれば良いです。
rect.width = 100f;
// width, heightを調整したRectを使ってTextFieldを表示する
data.name = EditorGUI.TextField (rect, t.list[index].name);
heightは、リストの高さ(ReorderableListインスタンスのelementHeight変数)と同じ値になります。widthは適宜表示させたいGUIに合わせて調整します。
3.DoLayoutListで表示
最後にDoLayoutListを実行するとEditorに表示されます(これを実行しないと表示されないです)。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう！
まとめ
本記事は「忘れやすいのでメモ」シリーズなのでさくっと終わりたいと思います。
ReorderableList最高にイケてます。
最後に、さらに詳しくカスタマイズするときは、安藤さんのEditor拡張入門のPage not found · GitHub Pagesがオススメです。
※ちなみにオオバは以前PDF版を購入してお世話になりました
この記事が気に入ったらフォローしよう
- Unity5.5.2p4