Ya han pasado más de dos años desde que Unity lanzó la versión 4.6 en la cual empezó a integrar herramientas de UI de forma nativa en el editor. El Scroll View es una de ellas y resulta bastante útil en aplicaciones web, móviles y por supuesto en videojuegos.
Recientemente durante el desarrollo de una aplicación gamificada que realizamos en Gametopia, surgió la necesidad de usar un Scroll View Vertical que se ajustara de forma dinámica al contenido de un texto que se recibía desde un servicio web.
Anteriormente había visto algunos métodos para ajustar de forma dinámica un Scroll View, pero ninguno se ajustaba realmente a lo que necesitábamos en ese momento, así que me puse manos a la obra y después de implementar una solución que resultó exitosa para los requerimientos de la aplicación, quiero compartir un artículo a modo de tutorial donde explico este proceso, el cual puede resultar simple pero requiere conocimientos previos en el manejo de UI en Unity.
Lo primero es agregar un Scroll View a nuestra escena, el panel Hierarchy y la escena deberían quedar de esta forma:
El GameObject -de ahora en adelante GO- que nos interesa es el que se llama “Content” y está como hijo del GO “Viewport”, que a su vez es hijo del GO “Scroll View” que acabamos de agregar a la escena.
En este caso como el contenido que queremos mostrar en el Scroll View es un texto, así que vamos a agregar el componente Text a ese GO, y de paso para un mejor entendimiento lo voy a renombrar como “TextoDinamico”, así:
Luego, como queremos que el texto se vaya desplazando hacia abajo, es necesario asegurarnos que el pivote del GO “TextoDinámico” esté arriba, así:
El siguiente paso es más cuestión de gusto personal, y es ajustar un poco el Scroll View que hemos agregado, en este caso quiero que ocupe gran parte de la escena, además he agregado un título, cambiado los colores y he quitado las barras de desplazamiento que trae por defecto el Scroll View (GO “Scrollbar Horizontal” y “Scrollbar Vertical”).
Esto ya es cuestión de gustos, por lo pronto en mi ejemplo ha quedado así:
Luego volvemos a nuestro protagonista, el GO “TextoDinamico” y le vamos a agregar el componente “mágico” llamado Content Size Fitter. Este componente es un controlador de estilo, el cual hace que el tamaño del GO “TextoDinamico” crezca de tal forma que se ajusta a la cantidad de texto que recibe.
El Content Size Fitter tiene dos propiedades: Horizontal Fit y Vertical Fit, la que nos interesa en este caso es la Vertical Fit, la cual vamos a setear como “Preferred Size”.
Finalmente nos queda restringir que el scroll solo sea vertical, para esto vamos al GO padre “Scroll View” y en su componente Scroll Rect vamos a desmarcar la opción Horizontal, así:
De esta forma ya tendremos un Scroll View vertical que se ajusta de forma dinámica al tamaño del contenido del texto que queramos mostrar.
¿Cómo testearlo?
Una buena forma para testear que el Scroll View se ajusta al contenido de diferentes textos, es usar esta página: http://www.blindtextgenerator.com/es
Allí encontrarás desde el típico texto de Lorem Ipsum hasta los relatos de Don Quijote.
Prueba copiando diferentes números de palabras en el componente Text del GO “TextoDinamico”, y podrás ver como el tamaño del Scroll View se ajusta “mágicamente” a cualquier contenido.
Así ha quedado en mi ejemplo:
¿Te ha gustado? ¡Compártelo!
