EditorGUILayout split view (resizable scroll view)

Question

I did some search on the internet but didn't find any info how to create a split view or resizable scroll view within an EditorWindow.

When I say 'split view' I mean two views in one window with a variable width (split vertical) or height (split horizontal). E.g. the console in unity is having one where the log title is displayed in the upper view and log details in the lower view.

EditorGUILayout doesn't seem to have such an specific element, so I guess it must be possible using a scroll view somehow but I can't figure out how to get this resize mouse icon when hovering the bottom of the scroll view.

Is there an out-of-the-box solution for that?

Thanks in advance

Answer 1

To get the mouse cursor to change like in the Editor Console, you can use EditorGUIUtility.AddCursorRect. I so enjoyed your question that I wrote an EditorWindow with split-view functionality:

 using UnityEngine;
 using UnityEditor;
 
 public class SplitViewWindow : EditorWindow
 {
     private Vector2 scrollPos = Vector2.zero;
     float currentScrollViewHeight;
     bool resize = false;
     Rect cursorChangeRect;
     
     [MenuItem("MyWindows/SplitView")]
     public static void Init(){
          EditorWindow t = GetWindow<tesdteditro>();
     }
     
     void OnEnable(){
         this.position = new Rect(200,200,400,300);
         currentScrollViewHeight = this.position.height/2;
         cursorChangeRect = new Rect(0,currentScrollViewHeight,this.position.width,5f);
     }
     
     void OnGUI(){
         GUILayout.BeginVertical();
         scrollPos = GUILayout.BeginScrollView(scrollPos,GUILayout.Height(currentScrollViewHeight));
             for(int i=0;i<20;i++)
             GUILayout.Label("dfs");
         GUILayout.EndScrollView();
                 
         ResizeScrollView();

             GUILayout.FlexibleSpace();
             GUILayout.Label("Lower part");
             
         GUILayout.EndVertical();
         Repaint();
     }
     
     private void ResizeScrollView(){
         GUI.DrawTexture(cursorChangeRect,EditorGUIUtility.whiteTexture);
         EditorGUIUtility.AddCursorRect(cursorChangeRect,MouseCursor.ResizeVertical);
         
         if( Event.current.type == EventType.mouseDown && cursorChangeRect.Contains(Event.current.mousePosition)){
             resize = true;
         }
         if(resize){
             currentScrollViewHeight = Event.current.mousePosition.y;
             cursorChangeRect.Set(cursorChangeRect.x,currentScrollViewHeight,cursorChangeRect.width,cursorChangeRect.height);
         }
         if(Event.current.type == EventType.MouseUp)
             resize = false;        
     }
 }

[2]: http://docs.unity3d.com/Documentation/ScriptReference/MouseCursor.html

Answer 2

Yo, I just found this and it is useful! Though there were a few errors in the script due to it being 8 years old. Here is an updated version I edited for 2021.

 using UnityEngine;
 using UnityEditor;
 
 public class SplitViewWindow : EditorWindow
 {
     private Vector2 scrollPos = Vector2.zero;
     float currentScrollViewHeight;
     bool resize = false;
     Rect cursorChangeRect;
 
     [MenuItem("Example/SplitView")]
     public static void Init()
     {
         EditorWindow t = GetWindow<SplitViewWindow>();
     }
 
     void OnEnable()
     {
         this.position = new Rect(200, 200, 400, 300);
         currentScrollViewHeight = this.position.height / 2;
         cursorChangeRect = new Rect(0, currentScrollViewHeight, this.position.width, 5f);
     }
 
     void OnGUI()
     {
         GUILayout.BeginVertical();
         scrollPos = GUILayout.BeginScrollView(scrollPos, GUILayout.Height(currentScrollViewHeight));
         for (int i = 0; i < 20; i++)
             GUILayout.Label("dfs");
         GUILayout.EndScrollView();
 
         ResizeScrollView();
         GUILayout.FlexibleSpace();
         GUILayout.Label("Lower part");
 
         GUILayout.EndVertical();
         Repaint();
     }
 
     private void ResizeScrollView()
     {
         GUI.DrawTexture(cursorChangeRect, EditorGUIUtility.whiteTexture);
         EditorGUIUtility.AddCursorRect(cursorChangeRect, MouseCursor.ResizeVertical);
 
         if (Event.current.type == EventType.MouseDown && cursorChangeRect.Contains(Event.current.mousePosition))
         {
             resize = true;
         }
         if (resize)
         {
             currentScrollViewHeight = Event.current.mousePosition.y;
             cursorChangeRect.Set(cursorChangeRect.x, currentScrollViewHeight, cursorChangeRect.width, cursorChangeRect.height);
         }
         if (Event.current.type == EventType.MouseUp)
             resize = false;
     }
 }

EditorGUILayout split view (resizable scroll view)

2 Replies

Your answer

Follow this Question

Related Questions