Inspector: create field on the right

Hi,

I have a custom attribute which links Boolean to a variable. (this will save us having to create custom editors all over the place)

I want to place a PropertyField on the right hand side of the editor, to align with the other fields.
using:

Code (csharp):

1.  
2. Vector2 size = GUI.skin.GetStyle("Label").CalcSize(label) ;
3. position.x += size.x +25;
4. EditorGUI.PropertyField(position, property, newlabel);//newlabel=""
5.  

I was able to place the the ProperyField at the end of the label.

However when creating the gap(+100 on position.x), to place the field on the right, the gap changes depending on the width of the editor.



You can see with the field underneath, it changes. I want it to remain aligned with the other fields, no matter the width.

Is there anyway you can just place fields on the right with custom drawers?

(I don't have a custom style, but I am unsure how I use the default, I assume my gui.skin... is correct)

 

1) sorry no one has answered yet...that sux. =(

2) I'm sorry I'm the one responding, because this very thing got me so frustrated I started making my editor tools a scene so I could use uGUI, and I've been alot happier with my interface sense ^_^

its amazing how two UI systems from the same group can be so night in day in regards to user friendly control >_<

Best of luck! Remember, its you versus the machine! You can do it!!! REMEMBER JOHN HENRY!!!! (figured if I can't give anything useful, might as well throw in some moral support =p )

 

lol thanks

 

Maybe something like this could work?

Code (CSharp):

1. EditorGUIUtility.labelWidth = EditorGUIUtility.currentViewWidth - widthOfYourPropertyField;

Instead of labelWidth, it might also have to be fieldWidth

 

Although I don't have a working example, I think you may be on the right lines, thanks

 

... Well, unless im missing something. This is the code to position things on the right

Code (csharp):

1.  
2. MyRect.x = position.x + EditorGUIUtility.labelWidth - ((EditorGUI.indentLevel - 1) * 22) - 1;
3.  

like what? *22? -1? lol

because of the indent stuff, im not 100% sure if is this the be-all end-all solution. but works for us, with a nesting of 3(?)

I used this to make a min max slider, actually functionable. similar to normal sliders:


The float field on the left uses the above code, then there are off sets based on the previous field for the minmax slider and the final float field

 

no! this code isn't correct. for peats sake! what how does unity draw things on the right, why is the equation so secretive?

 

rofl!!!! omg, do I feel your pain...you are not alone...

 

I don't understand why they would keep the equation a secret?



all of these are drawn with the same code :| indenting seems to effect the px size aswell?

 

ok, so I have all boxes aligning correctly.

the int boxes all have a width of 100. As you can see the indentation effects the total width. I will make the other boxes bigger depending on the indentation level.

Code (csharp):

1.  
2. EditorGUIUtility.labelWidth - (EditorGUI.indentLevel*15) + 14;
3.  

yeah... +14, I know :/ maybe it should be EditorGUI.indentLevel - 1 *15 -1

edit

Code (csharp):

1.  
2. Rect MinRect = position;
3.  
4. MinRect.width = 100 + ((EditorGUI.indentLevel - 1) * 15);//where 100 is the desired width
5.  
6. MinRect.x = EditorGUIUtility.labelWidth - ((EditorGUI.indentLevel - 1 )*15 ) -1;
7.  

 

ok. It all aligns correctly.

Code (csharp):

1.  
2. float m_NumFieldWidthraw = 60;
3.  
4. float m_NumFieldWidth = m_NumFieldWidthraw + ((EditorGUI.indentLevel - 1) * 15);
5.  
6. Rect MinRect = position;
7.  
8. MinRect.width = m_NumFieldWidth; //addust for indentation, only needs to happen for the first thing, as other things will be based of this.
9.  
10. MinRect.x = EditorGUIUtility.labelWidth - ((EditorGUI.indentLevel - 1 )*15 ) -1;
11.  
12. Rect BarRect = position;
13.  
14. BarRect.x = MinRect.x + (m_NumFieldWidthraw * 0.75f) + 5;//+2 buffer
15.  
16. BarRect.width = EditorGUIUtility.currentViewWidth - BarRect.x - m_NumFieldWidthraw; // I want the bar to stretch across the inspector, unitl the max box is drawn
17.  
18. Rect MaxRect = position;
19.  
20. MaxRect.width = m_NumFieldWidth;
21.  
22. MaxRect.x = BarRect.x + BarRect.width - ((EditorGUI.indentLevel - 1) * 15) -10; //-10 buffer to align like a normal range
23.  

are the position recs. the +5 -10 and -1 are all soace buffer, so are likely to be arbitrary to the equation.

 

Very nice! suck on that, machines!!!

>_< I'm just joking google, don't strike me down....

lol, be bookmarking this one for future references

 

Use EditorGUILayout blocks with EditorGUILayout slider/float/field/etc to automate all of the above.

 

What do you mean? Do you have an example?
do you mean

Code (csharp):

1.  
2. EditorGUILayout.BeginHorizontal();
3. ....
4. EditorGUILayout.EndHorizontal();
5.  

I am trying to do this in a attribute. Apparently needs a repaint?

 

@BinaryCats - Hi, I think Property Drawers (Property Attrbutes too) only support manual formatting (EditorGUI) and not automatic formatting (EditorGUILayout commands).

 

Hi,
I think I have come to the same conclusion, would be nice of a Dev to confirm this.

If it is, I don't see why it is undocumented (how to format things correctly). Do they not want devs to use attributes?

 

@BinaryCats

http://docs.unity3d.com/Manual/editor-PropertyDrawers.html

Bottom of the page:
"Note that for performance reasons, EditorGUILayout functions are not usable with Property Drawers."

 

... Performance reasons? What? It's not like repaint gets called everyframe. Property Drawers only update thier stuff on repaint(ongui is called for other events but doesn't effect the rendered image side). Furthermore it's somthing that can be omitted in builds.
Only thing o can think is that repainting would take too long?

Anyway still want to know how to format things correctly

 

@BinaryCats

I'm just learning this stuff, but seems like your issue could to be with Formatting of PropertyField (based on your original post).

It automatically ads label, which also messes up width of field itself (int, float values etc) when Inspector is resized. One solution is to remove label from field.

Code (csharp):

1.  
2. // 100 pixel wide "value" field
3. // at inspector right edge, minus indent
4. position.width = 100f;
5. position.x = EditorGUIUtility.currentViewWidth - position.width - 20f;
6. // Don't draw label
7. EditorGUI.PropertyField(position, someFloat, GUIContent.none);
8.  

However, this setup doesn't seem to notice vertical scroll bar... so if field is exactly at right edge, it gets covered by scroll bar, unlike Unity default Inspectors. That's why I added -20f.

 

Making progress Binary! Don't give up! (yea, still just giving moral support)

With that said, I have to wonder if the version of Unity your running has anything to do with success/fail in this regard, I only bring that up because I've recently noticed on my 5.3.2 build that when I have two tabs pulled out together (so I can still see them when on Play with maximized screen) that when I resize the bottom one, the top one will show its new area purely blank until I scroll on it, then it refreshes. Before it was refreshing as soon as I resized in 5.2.x... <_<

It would seem changes were made on how the inspector windows are handled, and when they are refreshed... *duh duh duh!* (this thread was lacking a dramatic element I was convinced the duh duh duh would fix

 

More as an FYI related to the topic..

The snippet below is a handy trick to get some stuff with fixed width to alight to the right.

Creating an empty LabelField and specifying that it's MinWidth is zero will fill the empty space dynamically and allow the additional UI elements to slot in correctly.

(The buttons in this example could be any other UI element)

Code (CSharp):

1. EditorGUILayout.BeginHorizontal();
2.  
3. EditorGUILayout.LabelField("", GUILayout.MinWidth(0f));
4.  
5. if (GUILayout.Button(" + ", EditorStyles.miniButtonLeft, GUILayout.Width(20f)))
6. {
7.     //Create new build setting
8. }
9.  
10. if (GUILayout.Button("Reload", EditorStyles.miniButtonRight, GUILayout.Width(45f)))
11. {
12.     LoadAllBuildSettings();
13. }
14.  
15. EditorGUILayout.EndHorizontal();

 

To anyone looking at this 1+ years later like me...

1. GUILayout.FlexibleSpace();

Before creating the element you would like. Want the slider of your label and slider combo to be locked on the right side?
1. Create label
2. Flexible Space
3. Create slider

Bam.

 

I'm here to make another new post to this topic!

Simply add a blank label with width = EditorGUIUtility.labelWidth to the left of your control and it'll shift everything over.

Code (CSharp):

1.                 EditorGUILayout.BeginHorizontal();
2.                 GUILayout.Label("", GUILayout.Width(EditorGUIUtility.labelWidth));
3.                 myFloat = EditorGUILayout.FloatField(myFloat);
4.                 EditorGUILayout.EndHorizontal();

 

It took me forever to find this thread. When I used the above by Andrew_TTDev, I had to subtract 5 from the labelWidth to get it aligned exactly. For some reason, it was just a tiny bit off. But now it works perfectly, totally using this all the time for custom editors!

 

Adding an EditorGUILayout.Space(); between the two will right-align the second element.

Code (CSharp):

1.  
2. GUILayout.BeginHorizontal();
3. if (GUILayout.Button("", GUILayout.Width(0))) { }
4. EditorGUILayout.Space();
5. if (GUILayout.Button(new GUIContent("Delete", "Delete this component."), GUILayout.Width(60))) {}
6. GUILayout.EndHorizontal();
7.  

 

Thanks man.

 

This post made my day. So many coders can be sour on forums, even when trying to offer support, so it's really nice to see people with a sense of humor and friendliness