Aprendizaje del sistema de diseño UGUI

Aprendizaje del sistema de diseño UGUI

---

---

1. Diseño adaptable RectTransform

Cada control UGUI tiene un componente RectTransform (heredado de Transform), que define el punto de anclaje del control, la posición del punto de pivote, el ancho y el alto, la rotación, la escala y otras propiedades. Se utiliza principalmente para controlar el diseño y la alineación.

1.1 pivote:

• Tome el objeto en sí como el sistema de coordenadas, la esquina inferior izquierda es el origen de coordenadas (0,0) y la esquina superior derecha es (1,1).

• El punto de pivote es el punto de referencia para la rotación y el escalado de objetos.

• Cuando el ancho y la altura del objeto cambian, el punto de pivote determina cómo se extiende el objeto a ambos lados.

  Por ejemplo, el punto de pivote (0,4, 0,8) indica que el punto central de la interfaz de usuario actual está en el 40 % del ancho y el 80 % del alto. Cuando intenta expandir el ancho del objeto en Δx, el 40% de Δx se asigna a la izquierda del punto de pivote y el resto se asigna a la derecha del punto de pivote.
  Cuando necesita expandir dinámicamente una interfaz de usuario, como un cuadro de texto, desea que el ancho del cuadro de texto se expanda dinámicamente de acuerdo con los píxeles ocupados por el texto y, al mismo tiempo, el texto se alinea horizontalmente a la izquierda. luego debe establecer el punto de pivote en el borde izquierdo de la interfaz de usuario, es decir, pivot.x = 0, de modo que cuando crezca el ancho del cuadro de texto, solo se expanda hacia la derecha, no hacia los lados.

  Lo mismo ocurre con el escalado de objetos.

• El punto de pivote y el punto de anclaje afectan conjuntamente un conjunto de valores en el panel, que se mostrarán de manera diferente debido a la configuración del punto de anclaje (PosZ generalmente no cambia)

  

  Este conjunto de valores representa el diseño del objeto en relación con el objeto principal.
  No importa cómo cambie el nodo principal, este conjunto de valores permanece sin cambios. En consecuencia, cuando cambia el tamaño del nodo principal, la posición, el ancho y la altura del objeto secundario cambiarán en consecuencia para mantener este conjunto de valores.

1.2 Anclajes:

El punto de anclaje determina cómo cambia la posición y el tamaño de la interfaz de usuario cuando cambia el tamaño del objeto principal.

• Cada RectTransform tiene Min y Max dos puntos de anclaje.
• El punto de anclaje es un vector bidimensional normalizado, con el objeto principal como sistema de coordenadas, la esquina inferior izquierda como origen de coordenadas (0,0) y la esquina superior derecha (1,1).
• Dos puntos de anclaje pueden determinar una línea diagonal, es decir, existe un concepto de cuadro de anclaje. Dependiendo de la posición de los dos puntos de anclaje, hay tres casos:

(1) Los dos puntos de anclaje coinciden, es decir, tanto X como Y son iguales, y el cuadro de anclaje degenera en un punto.

Este conjunto de valores se muestra como: PosX, PosY: la posición del punto de pivote del objeto en relación con el punto de anclaje Ancho, Alto: el ancho y el alto del objeto. En este caso, se denomina valor absoluto
. disposición. En el diseño absoluto, el tamaño del objeto principal cambia, pero el tamaño del objeto secundario no cambia. Para mantener la posición relativa del punto de pivote y el punto de anclaje, la posición del objeto secundario cambiará.

(2) Dos puntos de anclaje están en la misma línea horizontal o en la misma línea vertical, es decir, X e Y tienen el mismo conjunto, y el marco de anclaje degenera en una línea de anclaje.
Por ejemplo: Min(0,1) Max(1,1), es decir, el cuadro de anclaje degenera en el límite superior del nodo principal.

Este conjunto de valores se muestra como: Izquierda, Derecha: la distancia horizontal entre los límites izquierdo y derecho del objeto y los puntos de anclaje izquierdo y derecho; PosY: la distancia vertical entre el punto de pivote del objeto y la línea de anclaje ;Altura: la altura del objeto

En este caso, cuando se amplía el ancho del objeto principal, para mantener sin cambios la distancia horizontal entre los límites izquierdo y derecho del objeto y los puntos de anclaje izquierdo y derecho, el objeto secundario también se ampliará; cuando la altura del objeto principal se estira, para mantener el objeto. La distancia vertical entre el punto de pivote y el punto de anclaje permanece sin cambios, y el objeto secundario aparecerá más alto, pero la altura no se estirará.

La situación es similar para otras líneas de anclaje.

(3) Los dos puntos de anclaje X e Y son diferentes entre sí, formando un cuadro de anclaje rectangular.

Este conjunto de valores se muestra como: Izquierda, Derecha, Arriba, Abajo: Indica la distancia entre los cuatro límites del objeto y los cuatro lados del cuadro de anclaje.

En este caso, siempre que cambie el tamaño del objeto principal, el objeto secundario se estirará.

1.3 AnchorMin,anchorMax,offsetMin,offsetMax,sizeDelta,anchoredPosition

anclaMin,anchorMax : vectores de anclaje normalizados.

offsetMin, offsetMax : representa dos vectores que apuntan desde dos puntos de anclaje a la esquina inferior izquierda y la esquina superior derecha del objeto. offsetmin representa el desplazamiento de la esquina inferior izquierda del objeto actual en relación con el punto de anclaje AnchorMin, y offsetmax representa el desplazamiento de la esquina superior derecha del objeto actual en relación con el punto de anclaje AnchorMax.


sizeDelta : La cantidad de cambio de tamaño, este atributo representa el vector obtenido de offsetMax - offsetMin. El diseño absoluto es el vector desde la esquina inferior izquierda de la imagen hasta la esquina superior derecha.

Dado que rectTransform.rect es de solo lectura, el ancho y el alto del objeto se pueden cambiar directamente modificando el valor de sizeDelta en el diseño absoluto. El diseño relativo se puede entender mejor modificando los valores de offsetMin y offsetMax.

AnchodPosition : el vector representado por la flecha en la figura a continuación.

Descripción: Cuadro verde: nodo secundario; Cuadro rojo: nodo principal; Eje: Pivote, el pequeño círculo azul apuntado por la flecha en la imagen de arriba; Área del punto de anclaje: un cuadro compuesto por AnchoredMin y AnchoredMax, cuatro en la imagen de arriba El área formado por pequeños triángulos blancos; eje virtual: el punto asignado en el área del punto de anclaje por el parámetro de pivote del nodo secundario. Código esquemático:

    float virtualX = Mathf.Lerp(rect.anchorMin.x, rect.anchorMax.x, rect.pivot.x);
    float virtualY = Mathf.Lerp(rect.anchorMin.y, rect.anchorMax.y, rect.pivot.y);
    Vector2 virtualPivot = new Vector2(virtualX, virtualY);
    Vector2 localPosition2D = new Vector2(rect.localPosition.x, rect.localPosition.y);
    Vector2 anchoredPosition = localPosition2D - Vector2.Scale(parent.rect.size, visualPivot - Vector2.one * 0.5f);

1.4 Uso común de la API:

Cambie la parte superior de RectTransform
GetComponent().offsetMax = new Vector2(GetComponent().offsetMax.x, top)
Cambie la derecha de RectTransform
GetComponent().offsetMax = new Vector2(right, GetComponent().offsetMax.y );
cambie RectTransform bottom
GetComponent().offsetMin = new Vector2(GetComponent().offsetMin.x, bottom);
cambie la izquierda de RectTransform
GetComponent().offsetMin = new Vector2(left,GetComponent().offsetMin.y );
cambie el ancho de RectTransform , altura
GetComponent().sizeDelta = nuevo Vector2(ancho, alto);
cambie la posición anclada de RectTransform
GetComponent().anchoredPosition3D = nuevo Vector3(posx,posy,posz);
GetComponent().anchoredPosition = nuevo Vector2(posx, posy);

void GetLocalCorners(Vector3[] fourCornersArray);
Este método significa obtener las coordenadas de las cuatro esquinas de la interfaz de usuario en el sistema de coordenadas con su propio pivote como origen. La matriz Vector3 como parámetro debe declararse por sí misma. El orden para obtener las cuatro esquinas es abajo a la izquierda, arriba a la izquierda, arriba a la derecha, abajo a la derecha.

void GetWorldCorners(Vector3[] fourCornersArray);
Este método significa obtener las coordenadas de las cuatro esquinas de la interfaz de usuario en el sistema de coordenadas mundial.

void SetSizeWithCurrentAnchors(RectTransform.Axis axis, float size);
Establezca el tamaño de acuerdo con la información del ancla actual (en realidad, de acuerdo con el pivote, el resultado de la configuración no tiene nada que ver con el ancla), hay dos parámetros, el primero es el valor del tipo Eje, debe especificar una dirección, horizontal o vertical; el segundo parámetro es el ancho y la altura del mismo.

Ejemplo: establezca el ancho y la altura en (100,30).
RectTransform rt = GetComponent(),
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal,100),
rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical,30);

void SetInsetAndSizeFromParentEdge(RectTransform.Edge edge, float inset, float size);
establece la distancia de la interfaz de usuario actual en relación con el borde de la interfaz de usuario principal y el tamaño de la interfaz de usuario actual. El primer parámetro es un valor de tipo Edge, que necesita se especificará como el borde del objeto principal Benchmark (es decir, uno de los cuatro valores de Superior, Inferior, Izquierda y Derecha, es decir, la alineación); el segundo parámetro es la distancia desde el lado especificado ; el tercer parámetro es el ancho o alto de sí mismo.

Ejemplo: establezca el ancho y el alto en (100,30), la distancia a la derecha de la interfaz de usuario principal es 0 y la distancia a la parte inferior es 0.
RectTransform rt = GetComponent();
rt.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, 100)
;

2. Componentes de diseño: grupo de diseño vertical, grupo de diseño horizontal y grupo de diseño de cuadrícula

Grupo de diseño vertical Grupo de diseño vertical:

Relleno: la distancia desde el borde del objeto principal (ajustado con la alineación)
Espaciado: la distancia entre los objetos secundarios
Alineación secundaria: la
alineación Disposición inversa: la disposición inversa
Control Tamaño secundario: si se debe controlar los elementos de diseño secundarios Anchura y altura
Use Child Scale: Si se usa el tamaño escalado del elemento secundario para el diseño.
Child Force Expand: Si se fuerza al elemento de diseño secundario a expandirse para llenar otro espacio disponible.

Grupo de diseño horizontal El uso del Grupo de diseño horizontal es similar.

Grupo de diseño de cuadrícula Grupo de diseño de cuadrícula:

Restricción: restringe el número de filas o columnas

Por lo general, se usa con el componente Ajustador de tamaño de contenido para hacer que el tamaño del elemento principal se adapte automáticamente.