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

    dyuldashev

    Joined:
    Mar 3, 2016
    Posts:
    66
    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:
    https://github.com/dilnur92/MinMaxWindow
    How do I achieve this? Thanks.
     
  2. Kurt-Dekker

    Kurt-Dekker

    Joined:
    Mar 16, 2013
    Posts:
    21,259
    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.

    https://gist.github.com/kurtdekker/5e64b1772443a70f0943853a91511078
     
    dyuldashev likes this.
  3. dyuldashev

    dyuldashev

    Joined:
    Mar 3, 2016
    Posts:
    66
    @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.
    Thanks.
     
  4. dyuldashev

    dyuldashev

    Joined:
    Mar 3, 2016
    Posts:
    66
    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:
    x_pos.png
    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 Vector2.zero after resizing the parent panel.
    Appreciate your help @Kurt-Dekker.
     
    Last edited: May 18, 2021
unityunity