Diseño de Interfaz de Usuario Android: Controles Básicos de Texto

En este tutorial aprenderá cómo crear en Android básicos controles de texto. Después aprenderá a cómo configurar, aplicar estilo y manipular los controles en muchas formas.

Este tutorial muestra los pasos para crear un número diferente de controles TextView en su aplicación Android. Primero, aprenda a cómo añadir controles de texto básicos a sus archivos layout y lo que son algunos de sus atributos más útiles. Después aprenda cómo ajustar los contenidos de los controles de texto en dos formas diferentes. Finalmente, discutiremos algunas de las otras características disponibles para los controles TextView en Android.

Android SDK incluye un control de texto static sencillo para usar dentro de sus layouts: TextView (android.widget.TextView). Un buen ejemplo del uso de los controles TextView sería mostrar etiquetas textuales para otros controles como: "Enter a Date:", o "Enter a Password:".

Aquí está un ejemplo de una pantalla con muchos controles TextView diferentes mostrado en él:

Paso 1: Crear una aplicación Android

Comience por crear un proyecto Android. Implemente su aplicación Android como normal. Una vez que tenga un proyecto configurado y la aplicación ejecutándose, decida bajo que pantalla quiere añadir los controles de texto. Quizás usted sencillamente creó un nuevo proyecto Android con su Activity y layout por defecto (main.xml). Esto funcionará para este ejercicio. Una vez que tenga configurado su proyecto Android, entonces está listo para proceder con este tutorial.

Paso 2: Añadiendo el control TextView a un Layout

Los controles TextView son, por lo general, incluidos como parte del archivo de recurso layout del Activity. Por ejemplo, para añadir un control TextView al archivo main.xml asociado con su aplicación, usted debe editar el archivo layout. Usted puede hacer esto dentro de Eclipse usando el diseñador Layout Resource, o al editar directamente el XML. Los controles, también, pueden ser creado por medio de programación y añadir una pantalla en tiempo de ejecución. Simplemente haga un control TextView (android.widget.TextView) y agréguelo a su layout dentro de su Activity.

Para añadir un control TextView a un archivo layout resource, abra el archivo layout /res/layout/main.xml que es parte de su proyecto Android. Haga clic en LinearLayout (o el control principal layout) que usted desea añadir al control TextView. En Eclisep, desde dentro del diseñador gráfico Layout Resource, usted puede seleccionar el control TextView y arrastrarlo en el layout principa.

Para configurar cómo luce y funciona el control TextView, ajuste los atributos del control al seleccionar el control (ya sea en la pestaña Outline o en la ventana Preview) y cambiando sus atributos, como muestra la pestaña Propiedades. Además, puede editar directamente el archivo XML.

Atributos específicos de los controles TextView que querrá tener en cuenta:

• De al control TextView un nombre único usando la propiedad id.
• Ajuste el texto mostrado dentro del control TextView usando la propiedad texto, por medio de programación ajustelo con el método setText().
• Ajuste las propiedades de control de la altura y la anchura del layout como sea apropiado.
• Ajuste cualquier otro atributo que usted desea para ajustar los controles de apariencia. Por ejemplo, ajuste el tamaño del texto, fuente u otro estilo de ajuste.

Vamos a discutir algunos de los atributos más comunes para los controles TextView.

Paso 3: Alineando el Texto dentro del control TextView

Por defecto, los contenedores de texto de un control TextView están alineados a la izquierda. Sin embargo, puede posicionar el texto usando el atributo gravedad. Este ajusta las posiciones de su texto relativo a los controles en general de la anchura y la altura y solamente tiene sentido usar si hay espacio en blanco dentro del control TextView debido a que usted ha ajustado su layout_height y su layout_width para algún otro wrap_content. En XML, esta propiedad aparecería dentro de su control TextView como:

1

2

android:gravity="center"

Puede ver un ejemplo de un control TextView alineado al centro en la siguiente figura, contemplada como "Texto Centrado". Este control TextView tiene un layout_width de match_parent y un layout_height de wrap_content.

Si está trabajando con controles TextView en su código Java, también puede configurar la alineación de su control TextView por medio de programación usando el método setGravity() de la clase TextView.

Paso 4: Controlando el Fondo de un control TextView.

Por defecto, el fondo de un control TextView es transparente. Eso es porque está detrás del control que se muestra. Sin embargo, puede configurar el fondo de un control explicito, a un recurso de color, o a un drawable (es decir, una imagen). En XML, esta propiedad aparecería dentro de control TextView como:

1

2

android:background="#0000ff"

Usted puede ver un ejemplo de un control TextView con un fondo de color azul en la siguiente figura. Este control TextView tiene un layout_width de match_parent y un layout_heigth de wrap_content. Note que el control entero tiene el fondo y no solamente el área con los contenidos de texto.

Si está trabajando con un control TextView en su código Java, también puede ajustar la alineación de su control TextView por medio de programación usando el método setBackgroundResource() de la clase View.

Paso 5: Enlazar automáticamente los contenidos de los controles TextView

Por defecto, cualquier contenido de texto dentro de un control TextView es mostrado como texto sin formato. Sin embargo, al ajusta un sólo atributo llamado autoLink, usted puede activar la detección automática de la web, correos, teléfonos e informaciones de dirección dentro del texto. En XML, esta propiedad aparecería dentro de su control TextView como:

1

2

android:autoLink="all"

Puede ver un ejemplo de un control TextView con enlaces automáticos en la siguiente figura. Este control TextView no tiene un controlador especial de enlace, sus contenidos son sólo un string. El sistema operativo Android detecta el número de teléfono que cuando es pulsado, lanzando la aplicación Phone. De manera similar, el email lanzar la aplicación de corre de preferencia del usuario. La URL lanza la aplicación Browser. Si fuera a incluir una dirección completamente solucionable, entonces sería enlazada con la aplicación Map.
Si está trabajando con un control TextView en su código Java, también puede ajustar la función autoLink de su control TextView por medio de programación usando el método setAutoLinkMask() de la clase TextView.

Paso 6: Trabajando con los controles TextView Múlti-Line

Por defecto, los contenidos de texto de un control TextView envolverá y continuará en múltiples líneas a menos que de los contrario usted lo especifique. Usted puede personalizar este comportamiento en un número de formas:

• Puede usar el atributo android:lines para configurar el control TextView para un número específico de líneas.
• Puede usar los atributos android:minLines y android:maxLines para justa el control TextView para que nunca aumente el número de líneas que el especificado.
• Puede usar el atributo android:singleLine para evitar envolverlo dentro de múltiples líneas, pero en su lugar proporcione una línea alterativa del texto.
• Puede usar el atributo android:lineSpacingExtra para especificar la distancia de espacio en blanco entre cada línea (por ejemplo, doble espaciado para legibilidad).

Puede ver ejemplos de multi-line y line-space del control TextView en la siguiente figura:

Si está trabajando con un control TextView en su código Java, entonces también puede modificar estos ajustes por medio de programación usando los métodos apropiados de la clase TextView (ver la información en detalles de la clase TextView en la documentación Android SDK).

Paso 7: Personalizando el Color de Texto de un control TextView

Puede controlar el color del texto dentro del control TextView usando el atributo textColor. Este atributo puede ser ajustado a un color resource, o a un color específico por medio de un valor hexadecimal. En XML, esta propiedad aparecería dentro de su control TextView como:

1

2

android:textColor="#ff0000"

Puede ver un ejemplo de un control rojo TextView en la siguiente figura. Si está trabajando con el control TextView en su código Java, entonces puede ajustar el atributo color de su control TextView por medio de programación usando el método setTextColor() de la clase TextView.

Usted puede crear un sutil tipo de efecto de brillo en su control TextView usando los atributos; shadowColor, shadowDx, ShadowDy y ShadowRadius como se muestra al fondo del control TextView de la figura. Estos atributos de programación son equivalentes al método setShadowLayer() de la clase TextView().

Paso 8: Personalizando el Estilo y la Familia de Fuente de un Control TextView

Puede controlar el estilo de texto (bold, italic) y la familia de fuente (sans o monospace) dentro del control TextView usando el atributo textStyle. En XML, éstas propiedades aparecerían dentro de su control TextView como:

1

2

android:textStyle="bold"

3

android:typeface="monospace"

Puede ver ejemplos de bold y monospace de controles de TextView en la siguiente figura. Si está trabajando con control TextView en su código Java, entonces puede ajustar ambos atributos de su control TextView por medio de programación usando el método setTypeface() de la clase TextView.

En conclusión

Los controles TextView son usados comúnmente en aplicación de interfaz de usuario Android para mostrar contenidos de texto en diferentes maneras. En este tutorial aprendió a cómo crear controles TextView Android y a personalizarlos en muchas formas diferentes. Estos atributos pueden ser mezclados y combinados para permitir mucha flexibilidad de presentación al texto en la pantalla.