Search Unity

Horizontal Line in Editor Window

Discussion in 'Immediate Mode GUI (IMGUI)' started by echologin, Mar 7, 2018.

  1. echologin

    echologin

    Joined:
    Apr 11, 2010
    Posts:
    1,078
    How do you make Horizontal lines like in Unity's lighting window in an EditorWindow
    I found a few ways by searching but none look as good as the lighting window

    Screen Shot 2018-03-07 at 2.26.17 PM copy.png
     
    cf-jala likes this.
  2. echologin

    echologin

    Joined:
    Apr 11, 2010
    Posts:
    1,078
    Well I found a solution if anyone has a better idea Im all ears



    //============================================================
    void GuiLine( int i_height = 1 )
    {
    Rect rect = EditorGUILayout.GetControlRect(false, i_height );
    rect.height = i_height;
    EditorGUI.DrawRect(rect, new Color ( 0.5f,0.5f,0.5f, 1 ) );
    }
     
  3. Knarhoi

    Knarhoi

    Joined:
    Apr 11, 2015
    Posts:
    10
  4. Madgvox

    Madgvox

    Joined:
    Apr 13, 2014
    Posts:
    1,317
    I'm in favor of the GUIStyle method. Plays well with layouts and is highly configurable (adjusting margins or width is all done at the style level).

    Code (CSharp):
    1. // create your style
    2. GUIStyle horizontalLine;
    3. horizontalLine = new GUIStyle();
    4. horizontalLine.normal.background = EditorGUIUtility.whiteTexture;
    5. horizontalLine.margin = new RectOffset( 0, 0, 4, 4 );
    6. horizontalLine.fixedHeight = 1;
    7.  
    8. // utility method
    9. static void HorizontalLine ( Color color ) {
    10.     var c = GUI.color;
    11.     GUI.color = color;
    12.     GUILayout.Box( GUIContent.none, horizontalLine );
    13.     GUI.color = c;
    14. }
    15.  
    16. // use it!
    17. GUILayout.Label( "Some content above" );
    18.  
    19. MyGUI.HorizontalLine( Color.grey );
    20.  
    21. GUILayout.Label( "Some content below" );
     
    Last edited: May 31, 2018
  5. StylishCoding

    StylishCoding

    Joined:
    Apr 21, 2018
    Posts:
    140
  6. alexanderameye

    alexanderameye

    Joined:
    Nov 27, 2013
    Posts:
    1,383
    @echologin I use this for my editor windows.

    Code (CSharp):
    1. public static void DrawUILine(Color color, int thickness = 2, int padding = 10)
    2. {
    3.     Rect r = EditorGUILayout.GetControlRect(GUILayout.Height(padding+thickness));
    4.     r.height = thickness;
    5.     r.y+=padding/2;
    6.     r.x-=2;
    7.     r.width +=6;
    8.     EditorGUI.DrawRect(r, color);
    9. }
    It looks pretty good.

     
    Rachan, borgstation, fleity and 22 others like this.
  7. elseforty

    elseforty

    Joined:
    Apr 3, 2018
    Posts:
    290
    i use this , the 15 value is used to get the line to draw from the both extreme sides of the inspector ,

    Code (CSharp):
    1.         var rect = EditorGUILayout.BeginHorizontal();
    2.         Handles.color = Color.gray;
    3.         Handles.DrawLine(new Vector2(rect.x - 15, rect.y), new Vector2(rect.width + 15, rect.y));
    4.         EditorGUILayout.EndHorizontal();
    5.         EditorGUILayout.Space();
     
    Proto-G and echologin like this.
  8. auleek_dev

    auleek_dev

    Joined:
    Feb 23, 2014
    Posts:
    2
    Very nice solution, Thanks. :D
     
  9. Jorhoto

    Jorhoto

    Joined:
    May 7, 2019
    Posts:
    99
    For the very lazys :D

    Code (CSharp):
    1. [Header("----------------")]
     
    camorras, Dor770, rduret and 6 others like this.
  10. Gullie667

    Gullie667

    Joined:
    Apr 21, 2021
    Posts:
    17
    Other lazy options:
    EditorGUILayout.LabelField("_____________________________________________________________");
     
  11. fleity

    fleity

    Joined:
    Oct 13, 2015
    Posts:
    345
    alexanderameye solution is super nice. I want to add a little value for margin, -1 expands the line to the full width of the the current view / inspector, positive values allow you to shrink the line horizontally.

    This can be called without any parameters, the fallback color if no color is specified is Color.grey in the first line of the function.

    Code (CSharp):
    1.    
    2. public static void DrawUILine(Color color = default, int thickness = 1, int padding = 10, int margin = 0)
    3. {
    4.     color = color != default ? color : Color.grey;
    5.     Rect r = EditorGUILayout.GetControlRect(false, GUILayout.Height(padding + thickness));
    6.     r.height = thickness;
    7.     r.y += padding * 0.5f;
    8.  
    9.     switch (margin)
    10.     {
    11.         // expand to maximum width
    12.         case < 0:
    13.             r.x = 0;
    14.             r.width = EditorGUIUtility.currentViewWidth;
    15.  
    16.             break;
    17.         case > 0:
    18.             // shrink line width
    19.             r.x += margin;
    20.             r.width -= margin * 2;
    21.  
    22.             break;
    23.     }
    24.  
    25.     EditorGUI.DrawRect(r, color);
    26. }
    27.  
    Screenshot 2022-10-28 153258.jpg
     
    Last edited: Oct 30, 2022
    Celezt and alexanderameye like this.
  12. ModLunar

    ModLunar

    Joined:
    Oct 16, 2016
    Posts:
    374
    I came across this today, and found my own best approximation, which looks almost identical to Unity's horizontal lines in the inspector. I used some of what was used above, with my own twist to it since I wanted the line to look identical to Unity's horizontal lines.

    I have some hard-coded values in here, including the line color (which I got by screenshotting the inspector and copying the exact color, 26 / 255 gray).
    Feel free to change any of the values to your fitting:

    Code (CSharp):
    1. private static void DrawHorizontalGUILine(int height = 1) {
    2.     GUILayout.Space(4);
    3.  
    4.     Rect rect = GUILayoutUtility.GetRect(10, height, GUILayout.ExpandWidth(true));
    5.     rect.height = height;
    6.     rect.xMin = 0;
    7.     rect.xMax = EditorGUIUtility.currentViewWidth;
    8.  
    9.     Color lineColor = new Color(0.10196f, 0.10196f, 0.10196f, 1);
    10.     EditorGUI.DrawRect(rect, lineColor);
    11.     GUILayout.Space(4);
    12. }
    upload_2022-10-31_2-10-48.png
     
    fdz_, fleity and alexanderameye like this.
  13. Proto-G

    Proto-G

    Joined:
    Nov 22, 2014
    Posts:
    213
    Thank you!
     
  14. Proto-G

    Proto-G

    Joined:
    Nov 22, 2014
    Posts:
    213
    Seems this is more performant in the editor and give the same visual:
    Code (CSharp):
    1. GUIStyle boxStyle = new GUIStyle(GUI.skin.box);
    2.         boxStyle.normal.background = new Texture2D(1, 1);
    3.         boxStyle.normal.background.SetPixel(0, 0, new Color(0.08f, 0.8f, 0.8f, 0.25f));
    4.         boxStyle.normal.background.Apply();
    5.  
    6.         EditorGUILayout.Space(5);
    7.         var one = EditorGUILayout.BeginHorizontal();
    8.         GUILayout.Box("", boxStyle, GUILayout.ExpandWidth(true), GUILayout.Height(2));
    9.         EditorGUILayout.EndHorizontal();
    10.         EditorGUILayout.Space(5);
     
    tonytopper likes this.
  15. Rachan

    Rachan

    Joined:
    Dec 3, 2012
    Posts:
    781
    Thank you very very much! you safe my life!!!
     
  16. Mest

    Mest

    Joined:
    Nov 7, 2012
    Posts:
    18