Elementos gráficos – Textos

Posted by in Android, Interfaz gráfica

Los controles de texto son aquellos que permiten tanto la inserción como la captura de texto dentro de una aplicación. Por ello este tipo de componentes son básicos a la hora de añadir funcionalidad . Los principales elementos de texto son:

TextView

El control TextView es el elemento destinado al mostrado de texto. Se puede asociar al concepto de etiqueta al que se le setea un texto concreto. Este tipo de elementos no suele tener interacción directa con la aplicación ya que tan solo se utiliza para mostrar información

Además de los atributos normales, se ha incluido un atributo llamada textAppearence para modificar el aspecto del texto, poniéndolo más grande. También podríamos utilizar cualquier atributo asociado al text para modificar sus características. Si se lleva este elemento a un código java, los principales métodos que se podrían utilizar son:

EditText

El control EditText permite tanto mostrar información como introducir información para que esta sea capturada. Este tipo de elementos es el utilizado para una interacción directa con el usuario ya que son los encargados de recoger parte de la información de un formulario. Para crear un componente EditText utilizaremos el siguiente código

Se han añadido las propiedades:

  • hint muestra un texto sobre el EditText mientras el elemento está vacío y no tiene el foco
  • inputType fuerza a que solo determinados elementos puedan ser introducidos en el control. Este tipo de restricción es de sistema, es decir que si marcamos como inputType number a la hora de introducir datos tan solo se nos mostrará el teclado numérico.
  • digits fuerza a que solo se puedan introducir los elementos específico
  • maxLength indica el numero máximo de dígitos que pueden estar contenidos en el elemento
  • drawableLeft coloca un objeto de tipo imagen en miniatura al lado del control

Al llevar un EditText a código java, los métodos más utilizados son:

Además de estos métodos, todas las propiedades que se pueden poner en el xml pueden ser accedidas y modificadas mediante los métodos getter y setter.

TextInputLayout

El control TextInputLayout no viene en las librerías básicas de android ya que es una funcionalidad que fue añadida con MaterialDesign. Para poder utilizarla con soporte hay que indicar en el gradle que se compile la librería de diseño (trae bastantes elementos que se verán en futuras entradas) añadiendo la siguiente linea dentro de las dependencias

Una vez la libreria de diseño está preparada en nuestro proyecto podremos utilizar este control. Su uso se basa en la existencia de un hint, el cual será movido a la parte superior del elemento en el momento que este sea seleccionado. De la misma forma se podrá evaluar en contenido del EditText y poner un texto especifico en este hint flotante

La codificación es muy parecida a un EditText normal, con la diferencia que los dos elementos tendrán un id para poder ser utilizados en el código java. Los métodos más comunes del TextInputLayout es:

A este método habría que unirle todos los que pueden ser utilizados en un control EditText normal

Manejo de eventos en los textos

Para poder manejar los eventos dentro de los controles de texto, casi siempre se evaluarán a posteriori, es decir después de haber introducido un texto y completado un formulario al pulsar en botón enviar. Sin embargo hay veces que puede resultar útil hacerlo en el momento que se produce la inserción del texto. Para ello se utiliza el escuchador TextChangedListener. En este evento se evalúa la acción antes, durante y después del cambio, donde los parámetros de los métodos son el texto antes o después, y el número de elementos que han cambiado.

Hay que tener en cuenta que este listener se comporta de forma un tanto especial ya que no admite como parámetro un objeto de tipo listener, sino que admite un parámetro de tipo TextWatcher.

Otro listener que puede ser utilizados es el FocusListener, el cual puede evaluar el texto al tomar el foco (al seleccionar el elemento) o al quitar el foco (cuando se selecciona otro elemento). En este caso el método onFocusChange evaluar mediante el parámetro hasFocus si el elemento tiene o no tiene el foco