Resumen del capítulo 21. Transformaciones
Nota:
Este libro se publicó en la primavera de 2016 y no se ha actualizado desde entonces. Gran parte del libro sigue siendo útil, pero algunos de los materiales están anticuados y algunos temas ya no son completamente correctos o completos.
Una vista de Xamarin.Forms aparece en la pantalla en una ubicación y con un tamaño determinados por su elemento primario, que generalmente es un derivado de Layout o Layout<View>. La propiedad transform es una característica de Xamarin.Forms que puede modificar esa ubicación, tamaño o incluso orientación.
Xamarin.Forms admite tres tipos básicos de transformaciones:
- Traslación: desplaza un elemento horizontal o verticalmente
- Escala: cambia el tamaño de un elemento
- Rotación: gira un elemento alrededor de un punto o eje
En Xamarin.Forms, el escalado es isotrópico; afecta al ancho y al alto de forma uniforme. La rotación se admite tanto en la superficie bidimensional de la pantalla como en el espacio 3D. No hay ninguna transformación de sesgo (o abundante) ni transformación de matriz generalizada.
Las transformaciones se admiten con ocho propiedades de tipo double definidas por la clase VisualElement:
Todas estas propiedades están respaldadas por propiedades enlazables. Pueden ser destinos de enlace de datos y con estilo. En el Capítulo 22. Animación se indica cómo se pueden animar estas propiedades, pero ya en algunos ejemplos de este capítulo se muestra cómo se pueden animar mediante el Xamarin.Formstemporizador.
Las propiedades de transformación solo afectan al modo en que se representa el elemento y no afectan a la percepción del elemento en el diseño.
Transformación de traslación
Los valores distintos de cero de las propiedades TranslationX y TranslationY desplazan un elemento horizontal o verticalmente.
El programa TranslationDemo permite experimentar con estas propiedades con dos elementos Slider que controlan las propiedades TranslationX y TranslationY de Frame. La transformación también afecta a todos los elementos secundarios de ese Frame.
Efectos de texto
Un uso común de las propiedades de traslación consiste en desplazar ligeramente la representación del texto. Esto se muestra en el ejemplo TextOffsets:
Otro efecto consiste en representar varias copias de Label para que se parezca a un bloque 3D, como se muestra en el ejemplo BlockText.
Saltos y animaciones
En el ejemplo ButtonJump se usa la traslación para trasladar Button cada vez que se pulse, pero el objetivo principal es demostrar que Button recibe la entrada del usuario en la ubicación donde se representa el botón.
El ejemplo ButtonGlide es similar, pero utiliza un temporizador para animar Button de un punto a otro.
Transformación de escala
La transformación de Scale puede aumentar o disminuir el tamaño representado del elemento. El valor predeterminado es 1. Un valor de 0 hace que el elemento sea invisible. Los valores negativos hacen que el elemento aparezca girado 180 grados. La propiedad Scale no afecta a las propiedades Width o Height del elemento. Esos valores siguen siendo los mismos.
Puede experimentar con la propiedad Scale mediante el ejemplo SimpleScaleDemo.
En el ejemplo ButtonScaler se muestra la diferencia entre animar la propiedad Scale de Button y animar la propiedad FontSize. La propiedad FontSize afecta a cómo se percibe el Button en el diseño; la propiedad Scale no lo hace.
El ejemplo ScaleToSize calcula una propiedad Scale que se aplica a un elemento Label para que sea lo más grande posible mientras sigue ajustándose dentro de la página.
Anclaje de la escala
Los elementos escalados en los tres ejemplos anteriores tienen el tamaño aumentado o disminuido en relación con el centro del elemento. En otras palabras, el elemento aumenta o disminuye en tamaño igual en todas las direcciones. Únicamente el punto en el centro del elemento permanece en la misma ubicación durante la escala.
Puede cambiar el centro de la escala estableciendo las propiedades AnchorX y AnchorY. Estas propiedades son relativas al propio elemento. Para AnchorX, un valor de 0 hace referencia al lado izquierdo del elemento y 1 hace referencia al lado derecho. De forma similar para AnchorY, 0 es la parte superior y 1 es la parte inferior. Ambas propiedades tienen valores predeterminados de 0,5, que es el centro.
El ejemplo AnchoredScaleDemo permite experimentar con las propiedades AnchorX y AnchorY, así como la propiedad Scale.
En iOS, el uso de valores no predeterminados de las propiedades AnchorX y AnchorY es generalmente incompatible con los cambios de orientación del teléfono.
Transformación de giro
La propiedad Rotation se especifica en grados y indica el giro en el sentido de las agujas del reloj alrededor de un punto del elemento definido por AnchorX y AnchorY. PlaneRotationDemo permite experimentar con estas tres propiedades.
Efectos de texto girado
En el ejemplo BoxViewCircle se muestran las matemáticas necesarias para dibujar un círculo con 64 elementos pequeños de BoxView girados.
En el ejemplo RotatedText se muestran varios elementos de Label con la misma cadena de texto girada para que aparezcan como radios.
En el ejemplo CircularText se muestra una cadena de texto que aparece ajustada en un círculo.
Un reloj analógico
La biblioteca Xamarin.FormsBook.Toolkit contiene una clase AnalogClockViewModel que calcula los ángulos para las manecillas de un reloj. Para evitar las dependencias de plataforma en ViewModel, la clase usa Task.Delay en lugar de un temporizador para buscar un nuevo valor de DateTime.
También incluido en Xamarin.FormsBook.Toolkit, es una clase SecondTickConverter que implementa IValueConverter y sirve para redondear un segundo ángulo al segundo más cercano.
En MinimalBoxViewClock se usan tres elementos BoxView de rotación para dibujar un reloj analógico.
En BoxViewClock se usa BoxView para gráficos más extensos, incluidas las marcas de graduación en torno a la superficie del reloj, y manecillas que giran una pequeña distancia desde sus extremos:
Además, una clase SecondBackEaseConverter en Xamarin.FormsBook.Toolkit hace que parezca que la segunda manecilla se retrasa un poco antes de avanzar y, a continuación, volver a la posición correcta.
¿Controles deslizante verticales?
En el ejemplo VerticalSliders se muestra que los elementos Slider se pueden girar 90 grados y seguir funcionando. Sin embargo, es difícil colocar estos elementos Slider girados porque en el diseño siguen apareciendo horizontalmente.
Rotaciones tridimensionales
La propiedad RotationX parece girar un elemento alrededor de un eje X en 3D para que parezca que la parte superior e inferior del elemento van hacia el visor o se alejan de este. Del mismo modo, RotationY parece girar un elemento alrededor del eje Y para que parezca que los lados izquierdo y derecho del elemento se acercan o se alejan del visor.
La propiedad AnchorX afecta a RotationY pero no a RotationX. La propiedad AnchorY afecta a RotationX pero no a RotationY. Puede experimentar con el ejemplo ThreeDeeRotationDemo para explorar las interacciones de estas propiedades.
El sistema de coordenadas 3D implicado por Xamarin.Forms es zurdo. Si apunta el dedo índice de la mano izquierda en la dirección de aumentar las coordenadas X (a la derecha) y su dedo medio en la dirección de aumentar las coordenadas Y (hacia abajo), su pulgar apunta en la dirección de aumentar las coordenadas Z (fuera de la pantalla).
Además, para cualquiera de los tres ejes, si apunta con el pulgar izquierdo en la dirección de los valores crecientes, la curva de los dedos indica la dirección de rotación para ángulos de rotación positivos.