Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
12 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by Xtro · Nov 22, 2016 at 11:09 PM · guiguilayoutstyle

How to highlight a field's background in a custom editor without having its size (borders) enlarged?

Hi.

I want to highlight the background of a field in my custom editor. This highlight is going to be conditional so it will toggle on and off.

I tried and make it work actually but the way I did it, the field gains an extra border when I apply the highlighted background style so it changes its size. If I keep toggling the highlight condition, it makes every other thing in the editor move up and down.

The thing I noticed is, GUILayout.BeginHorizontal causes this problem. If I pass it a style parameter (even an empty style), it adds an extra border to the horizontal area (wrong). If I call BeginHorizontal without a parameter, the horizontal area comes without an extra border so it's size is smaller (correct and better).

Here is my example code:

     static bool Highlighted;
     public override void OnInspectorGUI()
     {
         Highlighted = GUILayout.Toggle(Highlighted, "highlight?");

         GUI.backgroundColor = Highlighted ? Color.green : Color.white;

         var HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };

         if (Highlighted) GUILayout.BeginHorizontal(HighlightStyle); // with style parameter
         else GUILayout.BeginHorizontal(); // no style parameter

         GUI.backgroundColor = Color.white;
         EditorGUILayout.ColorField(Color.white);

         GUILayout.EndHorizontal();
     }

alt text

extra-border.png (30.7 kB)
Comment
Add comment · Show 3
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Xtro · Nov 23, 2016 at 04:23 PM 0
Share

Bump......

avatar image Xtro · Nov 24, 2016 at 03:03 PM 0
Share

No one know this?

avatar image Xtro · Nov 24, 2016 at 07:23 PM 0
Share

Hi @Eric5h5, sorry for summoning you here but no one seems to know the answer. Do you have an idea? Please?

3 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by Xtro · Nov 26, 2016 at 03:54 PM

EDIT: After so many trial and errors, this is my final solution. I want to thank Izzy2000 so much for his help. Mostly he came up with the idea. I just tested his suggestions and compiled them into the solution. Please note that this solution is a HACK. If Unity team fixes this bug in the future, this solution may be invalid.

Here is my entire code:


    public static class EditorUtilities
    {
        public static readonly GUIStyle SolidBackgroundStyle = new GUIStyle { margin = { left = -4, right = -4, top = -2, bottom = -2 }, normal = { background = Texture2D.whiteTexture } };
        public static readonly GUIStyle SolidBackgroundStyleFix = new GUIStyle { padding = { left = -4, right = -4, top = -2, bottom = -2 } };
}
 using UnityEditor;
 using UnityEngine;
 
 [CustomEditor(typeof(WidgetDriver))]
 class WidgetDriverEditor : UnityEditor.Editor
 {
     static bool Highlighted;
     public override void OnInspectorGUI()
     {
         EditorGUILayout.ColorField(Color.red); // extra place holder field
 
         Highlighted = GUILayout.Toggle(Highlighted, "highlight?");
 
         GUI.backgroundColor = Highlighted ? Color.green : Color.white;
         if (Highlighted)
         {
             GUILayout.BeginHorizontal(EditorUtilities.SolidBackgroundStyleFix);
             GUILayout.BeginHorizontal(EditorUtilities.SolidBackgroundStyle);
         }
         else GUILayout.BeginHorizontal(); // no style parameter
 
         GUI.backgroundColor = Color.white;
         EditorGUILayout.ColorField(Color.white);
 
         GUILayout.EndHorizontal();
         if (Highlighted) GUILayout.EndHorizontal(); // for SolidBackgroundStyleFix
 
         EditorGUILayout.ColorField(Color.red); // extra place holder field
     }
 }

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
1

Answer by Lathspell · Apr 30, 2019 at 07:17 PM

3 years later, but I'll throw my two cents here just in case someone finds it useful. This solution works, but feels really hacky, as stated by Xtro. This has been my solution; not in the same approach Xtro tried, but the same result.

     public static Color ColorField(
         string label, 
         Color value, 
         bool highlight, 
         int hMargin = 1, 
         int vMargin = 1)
     {
         Rect fieldRect = EditorGUILayout.GetControlRect(
             hasLabel: true,
             height: EditorGUIUtility.singleLineHeight, 
             style: EditorStyles.colorField);

         if (highlight)
         {
             Rect highlightRect = new Rect(
                 x: fieldRect.x - hMargin + EditorGUIUtility.labelWidth, 
                 y: fieldRect.y - vMargin, 
                 width: fieldRect.width + (hMargin*2) - EditorGUIUtility.labelWidth, 
                 height: fieldRect.height + vMargin*2);
             EditorGUI.DrawRect(highlightRect, Color.green);
         }
         return EditorGUI.ColorField(fieldRect, label, value);
     }

As you can see, first I reserve an area of the Inspector UI by creating a Rect. In my example, this Rect is specified to be a ColorField with a label that will be single line.

The call to GetControlRect will already save the space, so if you try to run the code to that point, you'll see a blank area on your UI.

Next step is to create the Rect of the highlight, if needed. For doing so, I make a Rect based on the dimensions of the one Unity provided me, but adding the margin. Since the colorField I'm doing will have a label, I take out the labelWidth as well, because I don't want the label to be coloured.

Notice that this second rect has been done from scratch, so it won't save any space on the UI, but it will paint over anything found in that position. Now I use this Rect to paint a solid green square, that will be on the background.

Over it, I use the initial Rect to paint the ColorField as Unity would do by calling EditorGUILayout.ColorField. I skipped many of the options it has, but you can use them all.

After using this new control on your editor, the result should be something like this:

         EditorGUILayoutExtensions.ColorField("Highlighted colorField", Color.red, true, 4, 2);
         EditorGUILayoutExtensions.ColorField("Regular colorField", Color.red, false, 4, 2);

alt text


sin-nombre.png (2.9 kB)
Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Xtro · Apr 30, 2019 at 08:48 PM 0
Share

It's never too late. Thank you for sharing :) I'll check it out if I have free time :)

avatar image
0

Answer by MechUnit5 · Nov 25, 2016 at 07:57 AM

It seems that there are spacing differences between the default GUIStyle and a newly created GUIStyle. This can be solved by having a second, uncustomized style is used whenever you want the regular style.

     static bool Highlighted;
     public override void OnInspectorGUI()
     {
         Highlighted = GUILayout.Toggle(Highlighted, "highlight?");
 
         GUI.backgroundColor = Highlighted ? Color.green : Color.white;
 
         var HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };
         var BlankStyle = new GUIStyle(); //BLANK STYLE USED IN PLACE OF DEFAULT STYLE
 
         if (Highlighted) {
             EditorGUILayout.BeginHorizontal(HighlightStyle); // with style parameter
         }
         else {
             EditorGUILayout.BeginHorizontal(BlankStyle); // no style parameter
         }
          
         GUI.backgroundColor = Color.white;
         EditorGUILayout.ColorField(Color.white);
 
         EditorGUILayout.EndHorizontal();
     }

The only change from the code you posted was that second style.

A side note on the code itself. Custom Inspector classes have their own OnEnable() function that gets fired when they are created in the inspector. Basically, whenever you click on the object and the Inspector is visible and unlocked. I'd recommend setting your styles in that function, which would look something like this:

     GUIStyle HighlightStyle;
     GUIStyle BlankStyle;
 
     void OnEnable()
     {
         HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };
         BlankStyle = new GUIStyle();
     }

For an editor this size it's not really necessary, but it's only a little more code to keep the garbage collector a little happier.

Also, the use of the static bool. That's gonna be shared across multiple inspectors, but not in a way you may think. The weird behavior can be seen if you open up two inspectors next two each other, each locked to a different object that has this custom inspector, and start playing with the "highlight?" checkbox. Sometimes one will turn on, sometimes it will flicker and reset to its previous state. I recommend using a regular old bool instead.

Comment
Add comment · Show 1 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Xtro · Nov 25, 2016 at 02:55 PM 0
Share

Thank you for your effort to help me but you actually hid the extra border but it's still there. The color field is smaller than is should be. You can measure it to see it appears smaller than the one rendered in a styleless befinhorizontal area (parameterless).

The other issues like caching the styles and using a static bool is not important here. They were only for test purposes.

I still don't understand how this bug wasn't discovered until me. It is so obvious. I am not the best Unity extension developer.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

94 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Change Text Size and height EditorGuiLayout.Popup 1 Answer

Can you use GUIStyle with GUILayout? 0 Answers

EditorGUI like light explorer window 1 Answer

Drawing several BeginArea inside a BeginScrollview (GUILayout) produces an unexpected behaviour 1 Answer

ArgumentException: Getting control 0's position in a group with only 0 controls when doing Repaint. Mysterious Window? Script breaking? Why? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges