この記事での対象者

・UIElementとこれまでのEditor拡張での違いを知りたい。
・Editor拡張はやったことあるけどUIElementを全然触っていない状態の人

前提知識

Editor拡張で、HorizontalとVerticalの挙動を知っている人

得られる知見

・UIElementでのこれまでのEditor拡張とのUIのつくり方の違い

開発環境

・Unity2019．1.0f2

前回の記事

Unity2019 UIElementを触ってみた。UIElement事始めの一歩前
https://qiita.com/herieru/items/a32fefd3a35ddedfe3e6
UIElementについてざっくりとはわかるかもしれない。

これまでのEditor拡張との違い

違いを把握するには、これまでのEditor拡張をしらなければいけません。

これまでのEditor拡張について

これまでのEditor拡張は、以下の作りが基本的なものでした。

・Windowの左上から、順番にUIを作成する。
・縦並び、横並びを組み合わせようとすると、（ソース上が）すごくわかりずらい
・描画の範囲を指定してもその中での調整が難しい

これは、配置されるUIは、縦並びであるため、並びを変更しようとすると、特定の関数のくくりが必要。

例えば、以下のようなUI画面を作成したいとなった時

図１

作ろうとすると下図のような作り方になります。
図２

上図は、枠に囲まれた要素が、ひとつの塊を表しています。
例えば上から2段目の赤枠の部分を作る際は以下のようなコードを記述しなければいけません。

EditorGUILayout.BegineHorizontal();
{
    EditorGUILayout.BegineVertical();
    {
        //ここにテキスト２つと、４つ分描画する処理を記述する。
    }
    EditorGUILayout.EndVertical();
}
EditorGUILayout.EndHorizontal();

さらには、それぞれの塊の中でも、視認性を上げるために、隙間を少し開けたい等の場合は
（テキストやボタンなどの）要素の記述にスペースを空けるを命令を記述しなければいけません。

GUILayout.Labal("文字列");
GUILayout.Space(1f);
GUILayout.Lavel

従来のEditor拡張まとめ

従来のEditor拡張を行おうと思うと、
・要素を構成を変えようと思うと非常に面倒
・要素間の隙間を開けるのが面倒
・それらを全て、ソース上に記述しなければいけなかった。

UIElementの部分ではどう変わったか？

現状把握している範囲では、UIの構成を変更しやすくなった。のが一番の大きな変化かなと思われる。
従来であれば、従来のEditor拡張の仕方では、ひとつの大きなパーツ単位でしか作る事が出来ず
大きなパーツの中に無理やり小さなパーツを押し込める方法しかなかった。
それも、位置調整が非常に困難。

それが、UIElementでは、このパーツ部分を抜き出す事が可能である。

例えば、図１のようなUIを作成する場合

要素別の作成
と
位置調整
が別に行う事が出来る。

どういうことか？

図1の上から2個目の赤枠の再現の際は以下のようなコードで作成が可能である

sample.cs

// Each editor window contains a root VisualElement object
 VisualElement root = rootVisualElement;

//スタイルシートの取得
 var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("使用するussファイルのパス);
if (null != styleSheet)
{
    root.styleSheets.Add(styleSheet);
}


//中に配置するためのもの
VisualElement boxElement = new VisualElement
{
    name = "textBox"
};

boxElement.Add(new Label("文字列"));
boxElement.Add(new Label("文字列"));
boxElement.Add(new Button { text = "ボタン" });


//横向きに配置するためのもの
VisualElement boxHorizontal = new VisualElement
{
    name = "horizontalBox"
};

//横向きの配置を行う層に結合
boxHorizontal.Add(boxElement);

//ウィンドウにその要素の結合
root.Add(boxHorizontal);

sample.uss


/*-- 横方向にするためのもの #の横の名前は、name部分と同一--*/
#horizontaleBox{
    flex-direction: row;　・・横に並べる
}

/*-- テキストボックスの中のVisualElement要素に対して適応--*/
#textBox > VisualElement{
    height:80;   ・・高さ要素
    width:100;   ・・横幅要素
    margin-down:5;・・描画範囲の外側を5隙間を開ける
}

といった感じで、
要素部分　と　位置調整の部分が分離ができる。
また、同じような作りであれば、それらを再利用が可能です。

まとめ

これまで、ソースの中で、要素の作成と、位置調整等のものを全てやっていたものを
要素の作成と、スタイルシートで位置調整という形になっている。

UIElement事始め その1