Anatomía de un text label en Corona

Un elemento sumamente útil para crear interfaces son las etiquetas de texto (text label). En el framework de Corona se accede a este componente mediante la librería display y la función newText().

En esencia una etiqueta de texto es un contenedor que se construye a partir de 2 elementos básicos: un texto y una fuente tipográfica, mismos que se definen en una tabla de propiedades. Hacerlo de esta manera y al ser un contenedor sin dimensiones definidas como ancho y alto, el contenedor crecerá a lo ancho dependiendo la cantidad de texto que se haya creado como sucede en el siguiente ejemplo:

  local opcionesTexto1 = {
      text = "Hola mundo",
      font = native.systemFont
  }
  display.newText( opcionesTexto1 )

  local opcionesTexto2 = {
      text = "Me gusta programar videojuegos",
      font = native.systemFont
  }
  display.newText( opcionesTexto2 )

 

Para poder configurar una etiqueta de texto tenemos disponibles las siguientes propiedades:

• parent : Grupo del tipo display en el que deseas insertar la etiqueta de texto
• text: El texto a mostrar
• x : El valor de la coordenada X de la etiqueta de texto
• y : El valor de la coordenada Y de la etiqueta de texto
• widht : Si es definido este valor, el texto se extenderá hasta este límite y luego generará un salto de línea
• height : Si es definido este valor, el texto se extenderá hasta llegar a este límite y luego se cortará el texto mostrado.
• font : Puede ser uno de los siguientes valores aceptados
  • El nombre de la fuente tipográfica. Para obtener un listado de fuentes disponibles puedes ejecutar el fragmento de código que puedes encontrar en el apendice de este artículo.
  • El nombre de un archivo de fuente tipográfica ubicado en el directorio principal del proyecto (el directorio donde se encuentra el archivo main.lua)
  • Una fuente tipográfica recuperada desde la función native.newFont()
  • Una fuente tipográfica constante como native.systemFont o native.systemFontBold
• fontSize : El tamaño de la fuente tipográfica del texto
• align : Especifica el tipo de alineación del texto cuando el valor de width ha sido definido. El valor por defecto es “left”. Los valores válidos son “left”, “center” o “right”.

Ejemplos de uso y consideraciones

Las propiedades de los diferentes componentes / objetos a los que tienes acceso en Corona pueden ser cambiados después de ser creados pero en el caso de las etiquetas de texto hay restricciones debido a que, por ejemplo, para que puedas emular los saltos de línea en un texto extenso o el uso de una fuente tipográfica específica deberás definirlo en el momento de la creación, de otra manera tus cambios no se verán aplicados o tendrás resultados inesperados.

Las propiedades de una etiqueta de texto que se pueden manipular despues de haber creado el texto sin tener resultados inesperados en el objeto son: coordenadas (x , y), el tamaño de la fuente y el texto.

  local opcionesTexto = {
      text = "Hola mundo",
      font = native.systemFont
  }
  local textoTitulo = display.newText( opcionesTexto )

  -- Cambios después de la creación
  textoTitulo.x = 600 
  textoTitulo.y = 300
  textoTitulo.size = 50
  textoTitulo.text = "Me gusta programar videojuegos"

 

Como podemos en la imágen anterior, al no tener coordenadas el punto de ancla de la etiqueta de texto se ubica en la posición (0,0) de nuestra interfaz, una vez realizados los cambios mostrados en código la etiqueta se posiciona en una nueva coordenada ajustando de forma automática su ancho.

Usando la mismo codficación que el ejemplo anterior, solo que esta vez las propiedades las pondremos directamente en la tabla de propiedades, veamos que pasa si intentamos ajustar el ancho una vez creada la etiqueta para lograr una etiqueta multilínea de texto.

  local opcionesTexto = {
      text = "Me gusta programar videojuegos",
      font = native.systemFont,
      fontSize = 50,
      x = 600,
      y = 300
  }
  local textoTitulo = display.newText( opcionesTexto )

  -- Cambios después de la creación
  textoTitulo.width = 200

Como puedes observar el texto solo se cortará, esto es porque la información que necesita el componente para producir los saltos de línea (propiedad width) debe tenerla antes de que la etiqueta de etxto sea creada.

[su_note note_color=”#FEFBBC” text_color=”#000000″]NOTA: Como pudiste observar en los 2 ejemplos anteriores, para cambiar el tamaño de fuente del texto mostrado se realiza mediante la propiedad object.size cuando la etiqueta ya fue creada y fontSize cuando vas a configurar directamente la etiqueta de texto desde la tabla de propiedades.[/su_note]

Sin embargo, si creamos una etiqueta de texto multilínea desde el inicio podemos cambiar el texto en cualquier momento de forma segura, veamos el ejemplo.

  local opcionesTexto = {
      text = "Hola mundo",
      font = native.systemFont,
      fontSize = 50,
      x = 600,
      y = 300,
      width = 200
  }
  local textoTitulo = display.newText( opcionesTexto )

  -- Cambios después de la creación
  textoTitulo.text = "Me gusta programar videojuegos"

¿Te has encontrado con algún caso para el uso de etiquetas de texto que te haya costado resolver? Puedes compartirlo en los comentarios y con gusto podemos integrar un ejemplo de como resolverlo en este artículo.

Apendice

A continuación comparto el código con el que puedes obtener las fuentes tipográficas disponibles en tu dispositivo, esto basado en la documentación oficial del framework de Corona.

  local systemFonts = native.getFontNames()

  -- Set the string to query for (part of the font name to locate)
  local searchString = "pt"

  -- Display each font in the Terminal/console
  for i, fontName in ipairs( systemFonts ) do
      local j, k = string.find( string.lower(fontName), string.lower(searchString) )
      if ( j ~= nil ) then
          print( "Font Name = " .. tostring( fontName ) )
      end
  end

Espero hayas disfrutado y aprendido muchas cosas de este artículo y por favor siéntete libre de compartir esta información en tus redes sociales para que otras personas interesadas también puedan conocer algo nuevo que les pueda ayudar en sus proyectos futuros. ¡Hasta la próxima!