Search Unity

  1. The 2022.1 beta is now available for testing. To find out what's new, have a look at our 2022.1 beta blog post.
    Dismiss Notice

Maximize and center Panel && preserve relative size and position of child GameObjects

Discussion in 'Editor & General Support' started by dyuldashev, May 17, 2021.

  1. dyuldashev


    Mar 3, 2016
    I am trying to maximize and center a Panel with top offset = 100, and bottom offset = 500. In other words, it's my way of making the Panel fullscreen. However, its children are losing relative scales and positions when I am maximizing by setting the panel's top and bottom offsets to zero in script.
    Here's a video:

    And here's the project:
    How do I achieve this? Thanks.
  2. Kurt-Dekker


    Mar 16, 2013
    Anchors and UI in code is tricky stuff (see bottom).

    I'm pretty sure this can all be handled without code just by setting the anchoring properly for all the involved items.

    Anchoring the outer box will allow it to grow with the screen.

    Anchoring the children at their own corners will help them maintain constant relative size.

    ALSO: look into using AspectRatioFitter to maintain shape, and possibly a Vertical Layout Group to stack a 100-pixel high spacer above the item, depending on how you want it to flow on very tall phones.

    You can make custom resolutions in the Game window to quickly test your layouts on different size device windows.

    This is a very useful "anchor at corners" script that I use in almost all my projects.
    dyuldashev likes this.
  3. dyuldashev


    Mar 3, 2016
    @Kurt-Dekker thanks for replying. Your code seems to work OK when we do not touch the anchored UI at runtime (when UI is static in other words).
    Currently, I have a panel, and it has a child square image.
    I imported Lean Touch in order to rotate and scale UI elements. Then, I tried maximizing the Panel after translating the child square to a different position.
    Here's the result:

    My question is how do I maximize the Panel properly if I change its child's position/scale at runtime.
    I updated the git repo as well in case you want to take a look.
  4. dyuldashev


    Mar 3, 2016
    I tried setting the anchors after translating and scaling at runtime in this fashion:
    Code (CSharp):
    1.     void AnchorAroundObject()
    2.     {    
    3.         var parentTransform = rectTransform.parent.GetComponent<RectTransform>();
    4.         var offsetMin = rectTransform.offsetMin;
    5.         var offsetMax = rectTransform.offsetMax;
    6.         var oldAnchorMin = rectTransform.anchorMin;
    7.         var oldAnchorMax = rectTransform.anchorMax;
    8.         var parentWidth = parentTransform.rect.width;
    9.         var parentHeight = parentTransform.rect.height;
    10.         var anchorMin = new Vector2(oldAnchorMin.x + (offsetMin.x / parentWidth),
    11.                                         oldAnchorMin.y + (offsetMin.y / parentHeight));
    12.         var anchorMax = new Vector2(oldAnchorMax.x + (offsetMax.x / parentWidth),
    13.                                         oldAnchorMax.y + (offsetMax.y / parentHeight));
    14.         rectTransform.anchorMin = anchorMin;
    15.         rectTransform.anchorMax = anchorMax;
    16.         rectTransform.offsetMin = new Vector2(0, 0);
    17.         rectTransform.offsetMax = new Vector2(0, 0);
    18.         rectTransform.pivot = new Vector2(0.5f, 0.5f);
    19.         //rectTransform.localPosition.Set( 0, rectTransform.position.y, rectTransform.position.z);
    20.         Debug.Log("Rect position: " + rectTransform.position);
    21.     }
    It kind of works, but the X position is always ending up with weird values:
    If I set X to 0 in the Editor, it scales perfectly. I tried setting it in code (localPosition, anchoredPosition, position, and etc.). The only way that worked was setting rectTransform.anchoredPosition to after resizing the parent panel.
    Appreciate your help @Kurt-Dekker.
    Last edited: May 18, 2021