“This is the 28th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

What is RectTransform?

When creating a UGUI component, look in the Inspector panel and see that the Transform has been replaced with a RectTransform and the panel properties are different as shown in the following image:


Unity’s RectTransform description:

Position, size, anchor and pivot information for a rectangle. RectTransforms are used for GUI but can also be used for other things. It’s used to store and manipulate the position, size, and anchoring of a rectangle and supports various forms of scaling based on a parent RectTransform.

Rectangle position, size, anchor point, and pivot information.

RectTransforms is used for GUIs and can be used for other uses as well. It is used to store and manipulate the position, size, and anchoring of rectangles, and supports various forms of scaling based on parent rectangle transformations

RectTransform provides more power to manipulate rectangles than RectTransform, thanks to the addition of two new concepts: Anchor and Pivot.

When doing adaptation, mainly set up the anchor point and the position to let it display,

For its basic setup:


//posx, y, z --> relative position
 go.transform.localPosition = new Vector3(35.0.0);
 
// You can do that
go.GetComponent<RectTransform>().anchoredPosition3D =new Vector3(35.0.0);
go.GetComponent<RectTransform>().anchoredPosition = new Vector2(0.1);

/ / width, height -- -- >
go.GetComponent<RectTransform>().sizeDelta = new Vector2(134.187);

// Top --> Click Unity's predefined anchor position and the values of Min and Max under its Anchors will change
// The code is set to the corresponding value, the corresponding effect will be
 go.transform.GetComponent<RectTransform>().anchorMin = new Vector2(0.5 f.1);
 go.transform.GetComponent<RectTransform>().anchorMax = new Vector2(0.5 f.1);                   
Copy the code

The official document: docs.unity3d.com/ScriptRefer…

The basic operation will not be said here, the official has a very detailed explanation, other bloggers also have a very detailed analysis,


Goal: UI generated at different resolutions in relative positions

Below :(no matter what proportion, keep some distance from the top)

PS: If only used here, it is perfectly possible to set the anchor point like this:

But I use it multiple times, and I don’t want to fit two preforms, so I have to use code to help me implement it

UGUI has two built-in methods,

SetInsetAndSizeFromParentEdge
SetSizeWithCurrentAnchors
Copy the code

To get the dynamically generated UI (RectTransform) and the debugged relative position offset, call the following method:

    /// <summary>
    ///Set the relative location of the generated UI (right)
    ///Change operator to set Left (for example, comment)
    /// </summary>
    /// <param name="rect">RectTransform</param>
    /// <param name="right">Bot value</param>
    public void SetRight(RectTransform rect, float right)
    {
        if (right < -rect.offsetMax.x)  //Left (left < rect.offsetMin.x)
        {
            float value = -rect.offsetMax.x - right;//rect.offsetMin.x - left;

            rect.offsetMin = new Vector2(rect.offsetMin.x + value, rect.offsetMin.y);// - value
            rect.offsetMax = new Vector2(-right, rect.offsetMax.y); //(left, rect.offsetMax.y)
        }
        else if (right > -rect.offsetMax.x) // (left > rect.offsetMin.x)
        {
            float value = right + rect.offsetMax.x; //-

            rect.offsetMin = new Vector2(rect.offsetMin.x - value, rect.offsetMin.y);// + value
            rect.offsetMax = new Vector2(-right, rect.offsetMax.y); //(left, rect.offsetMax.y)}}/// <summary>
    ///Set the relative location of the generated UI (Bottom)
    ///Change the operator to set Top (for example, comments)
    /// </summary>
    /// <param name="rect">RectTransform</param>
    /// <param name="bot">Bot value</param>
    public void SetBottom(RectTransform rect, float bot)
    {
        if (bot < rect.offsetMin.y) //(top < -rect.offsetMax.y)
        {
            float value = rect.offsetMin.y - bot; //-rect.offsetMax.y - top;

            rect.offsetMin = new Vector2(rect.offsetMin.x, bot);
            rect.offsetMax = new Vector2(rect.offsetMax.x, rect.offsetMax.y - value);//top: + value
        }
        else if (bot > rect.offsetMin.y) //(top > -rt.offsetMax.y)
        {
            float value = bot - rect.offsetMin.y; //top + 

            rect.offsetMin = new Vector2(rect.offsetMin.x, bot); // - top
            rect.offsetMax = new Vector2(rect.offsetMax.x, rect.offsetMax.y + value); // - value}}Copy the code

Very practical method,, this can be achieved in different resolutions generated in the relative position of the UI, (of course, if you can set the prefab in advance, directly set the position can be generated)

There’s another handy way to do this:

Set the anchor point of the UI you want to target, and then set the position relative to the anchor point using the anchoredPosition3D property (not relative to the center point, as shown below).

using UnityEngine;
using UnityEngine.UI;

public class TestTransDemo : MonoBehaviour {
    
    public Image img_1;
    public Image img_2;
    public Image img_3;


    // Use this for initialization
    void Start () {
    	// The anchor point is centered
        img_1.transform.localPosition = Vector3.zero;
        // The anchor point is in the upper left
        img_2.rectTransform.anchoredPosition3D = Vector3.zero;
        // Set the anchor point to the upper rightimg_3.GetComponent<RectTransform>().anchorMax = Vector2.one; img_3.GetComponent<RectTransform>().anchorMin = Vector2.one; img_3.rectTransform.anchoredPosition3D = Vector3.zero; }}Copy the code

Img_1,2,3 correspond to the above code,Operation effect picture: