EditorWindowの分割(Editor拡張)

EditorWindowの分割(Editor拡張)

EditorWindowを分割するScriptを作成しました。

Script

 EditorWindowを分割するScriptは以下の通りです。

使用例に使用したScriptは以下の通りです。

使い方

 このScriptを利用するにあたってはインスタンスの作成が必要となります。インスタンスを作成する際に、各領域の最小幅、最小高さ、境界線の太さ及び境界線の色を設定することができます。

二分割

垂直方向

 垂直方向へウィンドウを二分割するScriptです。分割に使用する比率は上から下へもしくは左から右へ指定します。また、最下部及び右端の比率は記述しません。そして、比率の合計値が1未満となるように指定します。

BeginSplitAreaで領域の分割を始めます。また、EndSplitAreaでBeginSplitAreaで開始された領域の分割を終了します。

垂直方向への領域の分割はBeginVerticalSplitAreaで開始し、EndVerticalSplitAreaで終了します。この間にNextVerticalSplitAreaを挿入することで分割を行います。コントロールはこれらの間に記述します。このScriptではスクロールビューを使用していますが、使用しない場合はコントロールの高さが領域の最小高さとなってしまいます。指定した最小高さよりも領域内のコントロールの高さが大きくなると正常に動作しないので注意してください。

境界線は以下のように左クリック&ドラッグによって移動させることができます。

水平方向

 上記Scriptの「BeginVerticalSplitArea、NextVerticalSplitArea及びEndVerticalSplitArea」を「BeginHorizontalSplitArea、NextHorizontalSplitArea及びEndHorizontalSplitArea」へ変更すれば水平方向へ分割できます。

このScriptを実行すると以下のように水平方向へ分割することができます。

分割数の増やし方

Next~SplitAreaを追加

 Next~SplitAreaを追加することで分割数を増やすことができます。

このScriptを実行すると以下のように垂直方向へ三分割できます。

入れ子にして分割

 入れ子にすることで分割した領域をさらに分割することができます。

入れ子となっている領域は、その領域に接する境界線を移動させると比率を保ったまま縮小及び拡大します。

境界線を同時に移動

 別々の領域へ使用する比率に同じ配列を使用することで境界線を一致させることができます。これを利用して領域を四分割したScriptは以下の通りです。

水平な境界線は左右で別々の境界線ですが、比率を一致させることで一本の境界線として動作します。

分割領域の大きさと位置の変更

 BeginSplitAreaへRectを渡すことで大きさの変更はできます。しかし、位置の変更はできません(位置指定ができないにも関わらずRectを指定しているのは単にEditorWindow.positionをそのまま渡したいため)。このScriptではBeginHorizontal及びBeginVerticalを使用して分割を行っています。そのため、分割する領域の周りにコントロールを追加することができます。これを利用することで位置を調整することができます。

Script

 以下のScriptでは分割した領域をEditorGUILayout.Spaceによって下へ移動させ、さらにGUILayout.FlexibleSpaceによって中央揃えにしています。また、GUILayoutUtility.GetLastRectによって分割領域のRectを取得することができます。これを用いてGUI.Boxを追加しています。

上記Scriptを実行すると以下のようになります。

分割する領域の要素を変更

 BeginSplitAreaとEndSplitAreaの間のコードは動的に変更することができます。ただし、変更する際にはeditorGUISplitView.Changed = trueとします。以下は分割する領域の要素をトグルによって変更するScriptです。

このように分割している領域のを切り替えができます。