【Unity】UIElementsで使えるUXML要素の画像付き一覧

UnityのUIElementsで使えるUI要素を一覧化しました。

Unity2019.3.0

UIElements?

UIElementsはUnity2019から導入されたUIを構築する仕組みです。
詳しくは以下にまとめていますので必要に応じて参照してください。

light11.hatenadiary.com

本記事ではこのUIElementsで使えるUI要素のクラスを画像付きでまとめました。

執筆時点ではTreeViewなどの複雑なクラスはまだ実装されていないので、
掲載されていないものなどお気づきの点がありましたら随時ご連絡いただけますと幸いです。

基本的なUI

クラス名 描画例 名前空間 備考
Label f:id:halya_11:20200220165727p:plain UnityEngine.UIElements
Image f:id:halya_11:20200220170006p:plain UnityEngine.UIElements 画像表示
FoldOut f:id:halya_11:20200220170352p:plain UnityEngine.UIElements 折り畳み表示用のUI
Button f:id:halya_11:20200220170451p:plain UnityEngine.UIElements
Toggle f:id:halya_11:20200220170816p:plain UnityEngine.UIElements

ユーザ入力

クラス名 描画例 名前空間 備考
TextField f:id:halya_11:20200220172942p:plain:w200 UnityEngine.UIElements
IntegerField f:id:halya_11:20200220173039p:plain:w200 UnityEditor.UIElements
LongField f:id:halya_11:20200220173039p:plain:w200 UnityEditor.UIElements
FloatField f:id:halya_11:20200220173205p:plain:w200 UnityEditor.UIElements
DoubleField f:id:halya_11:20200220173205p:plain:w200 UnityEditor.UIElements
Vector2Field f:id:halya_11:20200220173256p:plain:w200 UnityEditor.UIElements
Vector2IntField f:id:halya_11:20200220173256p:plain:w200 UnityEditor.UIElements
Vector3Field f:id:halya_11:20200220173322p:plain:w200 UnityEditor.UIElements
Vector3IntField f:id:halya_11:20200220173322p:plain:w200 UnityEditor.UIElements
Vector4Field f:id:halya_11:20200220173350p:plain:w200 UnityEditor.UIElements
Vector4IntField f:id:halya_11:20200220173350p:plain:w200 UnityEditor.UIElements
RectField f:id:halya_11:20200220173504p:plain:w200 UnityEditor.UIElements
RectIntField f:id:halya_11:20200220173528p:plain:w200 UnityEditor.UIElements
BoundsField f:id:halya_11:20200220173610p:plain:w200 UnityEditor.UIElements
BoundsIntField f:id:halya_11:20200220173640p:plain:w200 UnityEditor.UIElements
ColorField f:id:halya_11:20200220180144p:plain:w200 UnityEditor.UIElements
CurveField f:id:halya_11:20200220180231p:plain:w200 UnityEditor.UIElements
GradientField f:id:halya_11:20200220180320p:plain:w200 UnityEditor.UIElements

選択

クラス名 描画例 名前空間 備考
EnumField f:id:halya_11:20200220171415p:plain:w200 UnityEditor.UIElements
MaskField f:id:halya_11:20200220171551p:plain:w200 UnityEditor.UIElements
LayerField f:id:halya_11:20200220171633p:plain:w200 UnityEditor.UIElements レイヤー選択用のUI
LayerMaskField f:id:halya_11:20200220171702p:plain:w200 UnityEditor.UIElements レイヤー複数選択用のUI
TagField f:id:halya_11:20200220171746p:plain:w200 UnityEditor.UIElements タグ選択用のUI

一覧表示

クラス名 描画例 名前空間 備考
VisualElement f:id:halya_11:20200220185356p:plain UnityEngine.UIElements UI要素の基底クラスだがこれをコンテナにすることでリスト表示が可能になる。
さらにStyleを設定すればグリッド表示も。
ScrollView f:id:halya_11:20200220184008p:plain UnityEngine.UIElements

スライダー

クラス名 描画例 名前空間 備考
Slider f:id:halya_11:20200220171010p:plain:w200 UnityEngine.UIElements
SliderInt f:id:halya_11:20200220171010p:plain:w200 UnityEngine.UIElements
MinMaxSlider f:id:halya_11:20200220171107p:plain:w200 UnityEngine.UIElements

レイアウト

クラス名 描画例 名前空間 備考
Scroller f:id:halya_11:20200220170925p:plain UnityEngine.UIElements
IMGUIContainer (省略) UnityEngine.UIElements UIElements内でIMGUIを使ためのUI
new IMGUIContainer(() => GUILayout.Button(""));のように使う
Box f:id:halya_11:20200220165334p:plain:w200 UnityEngine.UIElements 他のUI要素を囲むためのUI

ツールバー

クラス名 描画例 名前空間 備考
Toolbar f:id:halya_11:20200220182729p:plain:w200 UnityEditor.UIElements ツールバーのコンテナ
ツールバーのUIはこれにAddして使う
ToolbarButton f:id:halya_11:20200220182903p:plain UnityEditor.UIElements
ToolbarToggle f:id:halya_11:20200220182950p:plain UnityEditor.UIElements
ToolbarMenu f:id:halya_11:20200220183105p:plain UnityEditor.UIElements
ToolbarSearchField f:id:halya_11:20200220183137p:plain:w200 UnityEditor.UIElements
ToolbarPopupSearchField f:id:halya_11:20200220183244p:plain:w200 UnityEditor.UIElements Hierarchyで使われているようなポップアップ付き検索フィールド
ToolbarSpacer (省略) UnityEditor.UIElements ツールバーの要素の間のスペース用

その他

クラス名 描画例 名前空間 備考
PropertyField f:id:halya_11:20200220175624p:plain UnityEditor.UIElements VisualElement.Bind()をする必要あり
ObjectField f:id:halya_11:20200220180445p:plain UnityEditor.UIElements objectTypeに型を指定する
InspectorElement f:id:halya_11:20200220180606p:plain UnityEditor.UIElements 指定したオブジェクトのInspectorを描画する
ProgressBar f:id:halya_11:20200220171958p:plain:w200 UnityEditor.UIElements

関連

light11.hatenadiary.com