Intive-FDV Blog

Size Class

Size Class es una prestación utilizada para adaptar la distribución de la vista según los diferentes tamaños de pantallas y/o las orientaciones de pantalla mediante la simple utilización del creador de interface.
1
A primera vista, puede parecer difícil de entender, pero con un poco de práctica, se puede convertir en una simple y poderosa herramienta. Anteriormente, cuando un proyecto requería una aplicación para soportar orientación horizontal, nos hubiéramos pasado horas programando para ajustar los cuadros y/o limitaciones para adaptar nuestros assets a la orientación horizontal. Con Size Classes, mucho de esto puede evitarse, al punto de que es posible que no debas programar código en absoluto. Eso me lleva al primer concepto erróneo de la herramienta: no necesariamente significa que usarás Clases. Digan que es un nombre inapropiado si lo desean. Ese tema será algo recurrente en este texto, la manera en la cual la herramienta es utilizada no es muy evidente al principio. Por eso usaremos el siguiente ejemplo para explicar cada paso a medida que avanzamos.

Primero, miremos esta pantalla:

2

Como ven, tenemos una vista con una etiqueta arriba. Esta vista tiene restricciones de leading, traillling y top, como también restricción en el alto. Ahora, si giramos la imagen a modo horizontal, podemos ver que la vista naturalmente se queda arriba con la misma altura que antes.

3
Size Class y Restricciones
Miremos en la parte inferior de la vista xib. ¿Puedes ver ese objeto donde dice “wAny hAny”?

4
Eso representa el contexto de tamaño que estás mirando. Significa que cualquier restricción que agreguemos aquí se aplica para todos los tamaños y orientaciones. Ahora, si hacemos click en eso veremos un pop up como el siguiente.

5
Si arrastras el mouse alrededor de él, podrás ver que la descripción del texto cambia. Cada una de estas formas dibujadas en el pop up representa un tamaño u orientación diferente. Elijamos la que dice “Altura Compacta”.

7 6

Esta es para iPhones en modo horizontal. Notar como ahora el botón del editor está en azul. Esto indica que estamos en un contexto diferente de la pantalla.

8El próximo paso es desactivar las restricciones que no se necesitan para la distribución deseada. Comencemos con la restricción de la altura.

9

Luego de seleccionarla, mira el Inspector de Tamaño. ¿Puedes ver el signo “+” al lado del casillero “instalado” abajo? Hazle click.

10

Ahora, deberías ver el cuadro de herramientas contextual con todos los contextos de tamaño disponibles. En la parte superior de la lista deberías ver el contexto de tamaño actual sobre el que estás parado (Any Width /Compact Height). Selecciónalo.

11

Al hacerlo, agrega el contexto al Inspector de Tamaño. Luego, destilda el casillero del ítem que acabamos de agregar.

12 13

 

 

 

 

 

 

Al hacer esto, estamos diciéndole al xib que esta restricción estará deshabilitada en modo horizontal, pero activa en el modo normal vertical. Haz lo mismo con la restricción de trailing. El resultado debería ser como el siguiente:

14El próximo paso es cambiar el tamaño de vista y agregar una restricción de la parte inferior y una restricción de ancho.

15

Hacer click en una de las restricciones que acabamos de agregar. Si miras al Inspector de Tamaño, notarás que sólo nuestro contexto actual está habilitado.

16

Esto aplica para cualquier restricción de distribución que agreguemos bajo este contexto de tamaño. Ahora, si vuelves a hacer click en el botón de Size Class y vuelves al modo “wAny hAny” nuevamente (para eso, también cambia la orientación de vista nuevamente a vertical), verás que las restricciones que acabas de agregar están desactivadas y las que habíamos desactivado previamente están activas nuevamente. Si construyes la aplicación y cambias las orientaciones, tu pantalla se ajustará a los modos que acabas de configurar.

17

18

19

¡Felicitaciones! Acabas de aprender lo básico para utilizar Size Classes. Ahora, esta herramienta puede también ser utilizada para otras cosas además de restricciones.

 

Size Class y Fonts

Tal como las restricciones, puedes tener diferentes fonts para diferentes contextos. Después de todo, podrías tener más o menos espacio con el que trabajar. Cualquier configuración en los inspectores que tenga un signo más al lado puede tener estas diferentes configuraciones.

20

21

 

Size Class y Vistas

Ahora, considera esta situación. ¿Qué pasaría si no quieres mostrar una vista específica en modo horizontal? ¿Qué pasa si la vista debe estar más a la derecha que otra? Con Size Classes también puedes mostrar y ocultar vistas. Digamos por ejemplo que tenemos una flecha debajo del título que señala al usuario en el contenido:

22

No tenemos ningún método para rotar la flecha (al menos no sin utilizar código). Entonces no nos queda otra que esconderla. Si eliges esta vista, verás un símbolo “+” en la parte inferior del Inspector, y también la restricción si agregamos el contexto horizontal y lo deshabilitas, la vista estará “escondida”.

23

Sin embargo, aún necesitamos una flecha para este contexto, si proseguimos agregando la flecha horizontal en este contexto verás que, tal como las restricciones, las vistas agregadas en este contexto de clase de tamaño sólo están habilitadas para la configuración seleccionada.

24

 

Conclusión

Esto debería cubrir las instrucciones básicas requeridas para utilizar Size Classes. Recuerda cambiar la orientación y el tamaño de la pantalla del xib utilizando el Inspector del Controlador de Vista para asegurarte de que las configuraciones que estás estableciendo se ven correctamente.

Para terminar, si miras los diferentes contextos del Size Class, también verás tamaños de iPad incluídos. Esto es porque, en la mente de Apple, el mismo xib debería ser utilizado para todos los casos. Sabemos, por supuesto, que la mayoría del tiempo esto no es posible ya que las imágenes requieren resoluciones muchos más altas. La lógica de Apple tiende más a habilitar o deshabilitar vistas tal como el último punto escrito.

Sin embargo, esto significa tener todos los assets para todos los casos en el mismo xib, lo que podría causar desorden. Está de más decirlo pero esto es una cuestión de opinión y depende de cada caso en particular. Por eso es bueno recordarlo. Eso es todo por ahora, ¡feliz programación!

Ezequiel González

Es desarrollador de software en intive – FDV desde 2012 e integra la Brigada iOS. En el pasado, también trabajó como tester. Estudió la carrera de Diseño y Programación de Videojuegos en la Escuela Da Vinci de Buenos Aires. Es aficionado a los libros de terror y ciencia ficción, a las series y, lógicamente, a los videojuegos.

Deja un comentario