Horizontal Line in Editor Window

Unity Engine
1

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

3416574--269392--Screen Shot 2018-03-07 at 2.26.17 PM copy.png

1 Like
2

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 ) );
}
16 Likes
3

There are some different solutions out there:
Horizontal Line - Questions & Answers - Unity Discussions
using: EditorGUILayout.LabelField(“”, GUI.skin.horizontalSlider);

Adds dividers into the inspector. Based on a brilliant idea by Matthew Wegner, see: https://twitter.com/mwegner/status/355147544818495488 · GitHub
making a more extravagant one…

7 Likes
4

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).

// create your style
GUIStyle horizontalLine;
horizontalLine = new GUIStyle();
horizontalLine.normal.background = EditorGUIUtility.whiteTexture;
horizontalLine.margin = new RectOffset( 0, 0, 4, 4 );
horizontalLine.fixedHeight = 1;

// utility method
static void HorizontalLine ( Color color ) {
    var c = GUI.color;
    GUI.color = color;
    GUILayout.Box( GUIContent.none, horizontalLine );
    GUI.color = c;
}

// use it!
GUILayout.Label( "Some content above" );

MyGUI.HorizontalLine( Color.grey );

GUILayout.Label( "Some content below" );
8 Likes
5

To draw a simple line in editor gui, you can use Handles.DrawLine.

Yes, it works in editor gui, just pass the vector2 position to it.

4 Likes
6

@echologin I use this for my editor windows.

public static void DrawUILine(Color color, int thickness = 2, int padding = 10)
{
    Rect r = EditorGUILayout.GetControlRect(GUILayout.Height(padding+thickness));
    r.height = thickness;
    r.y+=padding/2;
    r.x-=2;
    r.width +=6;
    EditorGUI.DrawRect(r, color);
}

It looks pretty good.

25 Likes
7

i use this , the 15 value is used to get the line to draw from the both extreme sides of the inspector ,

        var rect = EditorGUILayout.BeginHorizontal();
        Handles.color = Color.gray;
        Handles.DrawLine(new Vector2(rect.x - 15, rect.y), new Vector2(rect.width + 15, rect.y));
        EditorGUILayout.EndHorizontal();
        EditorGUILayout.Space();
2 Likes
8

Very nice solution, Thanks. :smile:

4 Likes
9

For the very lazys :smile:

[Header("----------------")]
14 Likes
10

Other lazy options:
EditorGUILayout.LabelField(“_____________________________________________________________”);

4 Likes
11

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.

public static void DrawUILine(Color color = default, int thickness = 1, int padding = 10, int margin = 0)
{
    color = color != default ? color : Color.grey;
    Rect r = EditorGUILayout.GetControlRect(false, GUILayout.Height(padding + thickness));
    r.height = thickness;
    r.y += padding * 0.5f;

    switch (margin)
    {
        // expand to maximum width
        case < 0:
            r.x = 0;
            r.width = EditorGUIUtility.currentViewWidth;

            break;
        case > 0:
            // shrink line width
            r.x += margin;
            r.width -= margin * 2;

            break;
    }

    EditorGUI.DrawRect(r, color);
}

8546099--1142300--Screenshot 2022-10-28 153258.jpg

2 Likes
12

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:

private static void DrawHorizontalGUILine(int height = 1) {
    GUILayout.Space(4);

    Rect rect = GUILayoutUtility.GetRect(10, height, GUILayout.ExpandWidth(true));
    rect.height = height;
    rect.xMin = 0;
    rect.xMax = EditorGUIUtility.currentViewWidth;

    Color lineColor = new Color(0.10196f, 0.10196f, 0.10196f, 1);
    EditorGUI.DrawRect(rect, lineColor);
    GUILayout.Space(4);
}

8551211--1143383--upload_2022-10-31_2-10-48.png

3 Likes
13

Thank you!

14

Seems this is more performant in the editor and give the same visual:

GUIStyle boxStyle = new GUIStyle(GUI.skin.box);
        boxStyle.normal.background = new Texture2D(1, 1);
        boxStyle.normal.background.SetPixel(0, 0, new Color(0.08f, 0.8f, 0.8f, 0.25f));
        boxStyle.normal.background.Apply();

        EditorGUILayout.Space(5);
        var one = EditorGUILayout.BeginHorizontal();
        GUILayout.Box("", boxStyle, GUILayout.ExpandWidth(true), GUILayout.Height(2));
        EditorGUILayout.EndHorizontal();
        EditorGUILayout.Space(5);
1 Like
15

Thank you very very much! you safe my life!!!

16

Why so complicated?
Here’s a simple solution:

EditorGUILayout.LabelField("", GUI.skin.horizontalSlider);

(credits to Horizontal Line - Questions & Answers - Unity Discussions)

10 Likes
17

It’s very surprising that I had to scroll to the end of this page to find the solution I was sure it existed.

19

Thank you very much!!!