How to calculate sizeDelta in RectTransform?

Question

I write a custom content fitter that is required for my custom layout. So, I need to control RectTransform.sizeDelta property when anchors aren't same but I can't get that shows this value.
I don't need Unity3D API reference, I read it and got a nothing cuz it says only:

The size of this RectTransform relative to the distances between the anchors. If the anchors are together, sizeDelta is the same as size. If the anchors are in each of the four corners of the parent, the sizeDelta is how much bigger or smaller the rectangle is compared to its parent.

Can anyone explain in normal language what does it mean? And how can I calculate it manually when anchors aren't same?

Answer 1

The definition is somewhat confusing, indeed.

sizeDelta, basically, returns the difference between the actual rectangle of the UI element and the rectangle defined by the anchors.

For example, given a rectangle of 300x200:

Anchors in the same place as the corners of the rectangle: sizeDelta is (0,0)

Left or right anchors at half width of the rectangle: sizeDelta is (150,0)

All four anchors in a point: sizeDelta is (300,200) (i.e.: same size as the rectangle)

As you can see, it doesn't matter at all where the center of the rectangle defined by the anchors is, the only thing that matters is the difference between the width and height of the element rectangle and the anchors rectangle.

In pseudo-code, it's like this:

sizeDelta.x = UIElementRectangle.width - AnchorsRectangle.width;
sizeDelta.y = UIElementRectangle.height - AnchorsRectangle.height;

So, if the UI Rectangle has a dimension bigger than the anchors' one, sizeDelta is positive, if it's smaller, sizeDelta is negative.

Answer 2

sizeDelta: If you made a search, and end up here for an explanation of what sizeDelta means, like GetComponent().sizeDelta.y, then clear your mind.

Visualize a small PANEL, resting on top of a big CANVAS, it's Parent object. In the PANEL's Rect Transform component, there are 2 rectangles defined:

(a) The rectangle defined by its Anchors. Those triangles. Normally related to the Parent Object location and dimensions, in this case the CANVAS.

(b) The rectangle defined by its own size, the PANEL's own dimension.

sizeDelta = (b) - (a)

That's it. Because normally an interactive component like a Button, smaller in size compared to the object where it rests, like a Panel, and because of that, normally sizeDelta is a negative value. Button size - Panel size = a negative value, normally. You know the term Negative Space, used in general Design theory? Think of it, as the space NOT used by a Button resting on a Panel.

Example: How to find the height of a Panel, that is a Child of a Canvas that is a Camera overlay, thus screen sized. The Anchors of the Panel are related to the Canvas dimensions. Script is on the Panel object:

panelHeight = Screen.height + this.GetComponent().sizeDelta.y;

Remember, sizeDelta is normally negative so it reads more like this pseudo code:

panelHeight = Screen.height - this.sizeDelta.y

Hope this helps you, drove me crazy for a while. Cheers!

References:

https://www.youtube.com/watch?v=VhGxKDIKRvc

https://www.youtube.com/watch?v=FeheZqu85WI