Understanding Unity-UI Layout Element - Mininum and Preferred Size

Question

I have been working with Unity for some time, and I am trying to get a better understand of the UI system.

I am a mobile developer and am redesigning the UI but I am unable to achieve what I want.

My game is in portrait mode and I have a panel. I want the panel to have a maximum width of 1080 pixels. In cases where the panel doesn't fit on the screen because the aspect ratio is less (like the new iPhone X), I want it to shrink it a bit with a minimum width of 700 pixels. In the case that the screen is larger than 1080p (like the iPad Pro) I want the panel to have the maximum size.

Here are visuals of what I want to achieve:

Nexus 6P ( 1080x1920)

iPhone X(1125x2436)

iPad pro (2048x2732)

I have been playing with Layout Element and Content Size Fitter components without success.

If I set the min width size to 700 pixels and preferred size to 1080 pixels nothing happens (even after setting flexible width.)

If I set the Content Size Fitter to the preferred size it just always reverts to the preferred size. The same thing happens with min.

How do these components work, and how I can achieve the desired effect?

Canvas configuration:

Answer 1

I don't believe this can be accomplished with the ContentSizeFitter and LayoutElement components. Instead, you will need a custom script that sniffs the device's screen size and computes the aspect ratio and adjusts the RectTransform accordingly.

Fortunately this is quite simple. Here is a demo to show how this can be done. For this example we have a Canvas gameobject with a Panel child. This panel will be the target of our scaling.

The canvas' CanvasScaler component can be set to any of the three UIScaleModes -- all work. The panel's RectTransform anchor preset should be set to stretch/stretch and the top, bottom, left and right values should all be set to zero to have the panel fill the canvas by default.

For demo purposes, the script is attached to an empty gameobject. Also for demo purposes, the scaling routine runs in the Update loop -- something you would obviously never want to do in a real application. Here's the script:

using UnityEngine;

public class AspectRatioDemo : MonoBehaviour
{
    public RectTransform panel;
    public float maxAspectRatio = 1080f / 1920f; // example: Nexus 6P

    // routine shown in Update for demo purposes, obviously you would only do this once...
    void Update()
    {
        float currentAspectRatio = (float)Screen.width / (float)Screen.height;
        if(currentAspectRatio > maxAspectRatio)
        {
            float padding = (currentAspectRatio - maxAspectRatio)/2f;
            if(padding > .5f)
            {
                Debug.LogError("unsupported aspect ratio"); //addition logic required to support landscape mode
                return;
            }
            panel.anchorMax = new Vector2(1.0f - padding, 1.0f);
            panel.anchorMin = new Vector2(padding, 0);
        }
        else // this is only necessary if panel was previously resized
        {
            panel.anchorMax = Vector2.one;
            panel.anchorMin = Vector2.zero;
        }
    }
}

maxAspectRatio represents the widest aspect you'll allow before padding the panel's margins. By default I have it set to 1080/1920 (.5625). The routine checks whether the actual aspect ratio exceeds this by dividing Screen.width by Screen.Height. If not, it does nothing. If it does, it computes a padding value. (Note the if the computed padding value is greater than .5 we're talking about a device in landcape mode which is unexpected and unsupported here.) Finally the code adjusts the anchors to create the padding.

Answer 2

I think you can solve this problem using Anchors. Set your anchor of parent panel to stretch.

below I attached a screenshot to make you understand what I am saying,

You can found this tool in Unity UI's Rect Transform component where you have to click on the icon and it pops up the attached screenshot.

Now press Alt + Shift (Alt to set position and Shift to set pivot of the object). You will achieve the result you wanted by pressing both alt and shift together and select right one on the downside (last one).

you can learn or read more about anchor point in this unity doc :

Setting UI for multiple screen resolution