Buenas gente! en esta entrada vamos a ver que herramienta nos proporciona
libGDX y como usarla para crear nuestra propia lista de objetos con scroll para desplazarnos por ellos. Vamos a ello:
Creando el Scroll
Primero necesitaremos una clase
Scroll que extienda de la clase
ScrollPane de
libGDX en ella tendremos varias variables:
Crearemos una lista de objetos (más adelante veremos como crearla)
También tendremos un texto que mostraremos cuando no haya ningún objeto.
Por último también guardaremos el tamaño que tendrán los objetos. En mi case, un 25% del alto de la pantalla, pero puede ser el que queráis.
Veamos ahora como inicializar nuestro
Scroll en el constructor:
A nuestro constructor le pasaremos la lista de objetos (veremos más adelante como crearlos). En un principio llamaremos al constructor de la clase superior con
null, es decir, sin asignarle ningún
widget (
línea 2) ya que en el siguiente paso crearemos nuestra lista
rawList pasándole la lista de objetos que se le pasa al constructor y la asignaremos como
widget al
Scroll (
líneas 3 y 4).
Para continuar hacemos que el
Scroll tenga el mismo tamaño que la lista (
líneas 5 y 6).
Con la función de la línea 7 le indicamos hacia donde se hará el
scroll, el primer booleano indica si queremos que se haga en horizontal y el segundo en vertical. En mi caso puse para que solo se pudiese hacer scroll en vertical, ponedlo según os interese.
Si queremos añadir una vez creado el
Scroll nuevos objetos, deberemos añadir a nuestra clase la siguiente función:
En esta función le asignamos a la lista los nuevos objetos y le decimos al
scroll que pase a tener el mismo alto que la lista (en caso de que los nuevos objetos también modifiquen el ancho de la lista tendremos que poner al
Scroll el ancho de la lista también).
Creando la lista de objetos
Ahora vamos a crear la clase de la lista de objetos.
Tanto la clase de la lista como la de los objetos las podemos poner dentro de la misma clase
Scroll, o bien ponerlas en ficheros separados como suele hacerse normalmente.
Creamos entonces nuestra clase
MyRawList (Podéis llamarla como queráis) que extienda de la clase
Widget. Veamos el código de ejemplo y ahora lo explicaré paso a paso:
En primer lugar, tendremos una variable de tipo
Scroll donde guardaremos el
Scroll al que pertenecerá nuestra lista. Tendremos también la lista de objetos que contendrá la lista y el tamaño de esta.
En el constructor asignaremos los objetos que se le pasan a la lista, y se le define el ancho y alto que tendrá.
En la función
setItems(...) le asignamos los objetos que le pasamos y, en caso de que sean mayor que 0, se calcula el tamaño de la lista según el número de objetos y el tamaño de estos.
La función
draw primero mirará si hay objetos. En caso de no haberlos muestra por pantalla el texto indicándolo y termina la función.
En caso de si haber objetos, recorremos cada uno de los objetos para dibujarlos en caso de que estén dentro del rango de visión de la pantalla. (
línea 40).
Si está dentro de un rango en el que se ve el objeto pasamos a dibujar todo lo que haya dentro suya (
línea 50). Esta parte dependerá de qué contengan vuestros objetos, así que llamaremos a la función
draw(...) que tendrán nuestros objetos para cada uno de ellos.
Veremos en el próximo apartado como crear cada uno de los objetos.
Creando los objetos
Ahora veremos como crear un objeto de la lista. Esta clase dependerá completamente de lo que queráis añadir en cada objeto. Yo os muestro como hacer un objeto con un fondo, una imagen y un texto:
Simplemente tenemos que crear una clase con los elementos que queramos, inicializarlos con los valores que le pasemos al constructor y crear una función que dibuje todos los elementos del objeto.
Para el fondo simplemente le indico donde y con que tamaño quiero que se dibuje. Para la imagen le indico donde quiero que se sitúe y luego la dibujo. Para la fuente primero la escalo para que tenga un tamaño adecuado y luego la dibujo.
Con esto ya tendremos todo listo para crear donde queramos nuestro
Scroll.
Creando nuestro Scroll
Para crear nuestro
Scroll primero necesitaremos crear los objetos que tendrá. Para ello creamos un nuevo
ScrollItem[] en el que meteremos los objetos que iremos creando. Luego le pasaremos este vector al Scroll cuando lo creemos:
Puedes crear los objetos con un bucle, leyendo desde un fichero o como mejor te venga. En este caso, y a modo de ejemplo, los he creado uno por uno directamente.
Para dibujar nuestro
Scroll tan solo tendremos que añadirlo a nuestra
Table o a nuestro
Stage.
Notas
- No olvides hacer el dispose() de los objetos Texture que crees para liberar la memoria.
- Aunque en este ejemplo hemos visto el Scroll para una lista de objetos, puedes hacerlo para una imagen, un texto, etc. Puedes ver más información aquí.
- Puedes ver más información y funciones del ScrollPane aquí.
