Android >> Introducción a Spans en Android

En esta artículo voy a mostrar un mecanismo muy útil que nos permitirá aplicar diferentes estilos en diferentes secciones de un texto, como por ejemplo el texto escrito en una vista TextView. Esto es similar a lo que ocurre en HTML, donde podemos modificar el estilo del texto mediante el uso de etiquetas. El problema de usar HTML para dar formato al texto es que no todas las etiquetas HTML5 están soportadas actualmente en Android, por ese motivo no es muy recomendable el uso de este método. Para no tener ningún problema es recomendable usar otro mecanismo, los spans, que nos permitirá dar formato al texto sin ningún problema.

Vamos a comenzar mostrando un ejemplo del uso de código HTML para formatear texto contenido en una vista TextView:

TextView textView1 = (TextView) findViewById(R.id.textView1);

// Usamos código HTML para definir un texto con formato.
textView1.setText(
    Html.fromHtml(
        "<h2>Lorem ipsum</h2> ad his scripta blandit partiendo, eum fastidii <b>accumsan euripidis in</b>, eum liber hendrerit an."));

introduccion-spans-0

Como hemos dicho, no es recomendable el uso de este método, por ello vamos a empezar a mostrar el uso de los spans en Android. En este primer ejemplo, lo primero que debemos hacer es definir nuestro texto usando un objeto SpannableStringBuilder, este tipo de objeto es un híbrido entre las clases StringBuilder y Spannable. A continuación hemos aplicado un span para poner una sección del texto en negrita (bold), otro span para poner otra sección en cursiva (italic) y por último hemos aplicado otro span a otra sección para cambiar el tamaño del texto.

TextView textView2 = (TextView) findViewById(R.id.textView2);

// Definimos el texto que vamos a formatear.
SpannableStringBuilder ssb1 = new SpannableStringBuilder(
	"Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.");

// Span para poner el texto en negrita.
StyleSpan boldSpan = new StyleSpan(Typeface.BOLD);

// Span para poner el texto en cursiva.
StyleSpan italicSpan = new StyleSpan(Typeface.ITALIC);

// Span para cambiar el tamaño del texto.
AbsoluteSizeSpan headerSpan = new AbsoluteSizeSpan(100);

// Seleccionamos las secciones del texto a las que vamos a aplicar los distintos spans definidos. 
ssb1.setSpan(boldSpan, 0, 5, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
ssb1.setSpan(headerSpan, 35, 44, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
ssb1.setSpan(italicSpan, 50, 58, Spannable.SPAN_INCLUSIVE_INCLUSIVE);

// Mostramos el texto formateado.
textView2.setText(ssb1, BufferType.SPANNABLE);

introduccion-spans-1

Ahora vamos a ver un ejemplo de cómo añadir imágenes dentro del texto definido en una vista TextView. En esta ocasión, al igual que el anterior, lo primero que debemos hacer es definir un objeto SpannableStringBuilder con el texto que vamos a mostrar, a continuación creamos un Bitmap cargando la imagen que queremos mostrar, y por último hemos creado un ImageSpan a partir de esta imagen. La imagen que hemos usado la puedes descargar aquí.

TextView textView3 = (TextView) findViewById(R.id.textView3);

// Definimos el texto que vamos a formatear.
SpannableStringBuilder ssb2 = new SpannableStringBuilder(
	"Esto es un emoticono ");

// Cargamos la imagen que vamos a mostrar junto al texto.
Bitmap image = BitmapFactory.decodeResource(getResources(),
	R.drawable.emoticon);

// Creamos el span a partir de la imagen cargada.
ImageSpan imageSpan = new ImageSpan(this, image);

// Sustituimos una sección del texto por la imagen.
ssb2.setSpan(imageSpan, 20, 21, Spannable.SPAN_INCLUSIVE_INCLUSIVE);

// Mostramos el texto junto con la imagen.
textView3.setText(ssb2, BufferType.SPANNABLE);

introduccion-spans-2

Por último vamos a ver como añadir una URL en una vista TextView usando un span. En este ejemplo, al igual que antes, definimos un objeto SpannableStringBuilder con el texto que vamos a mostrar, a continuación creamos un URLSpan con la dirección de la Web a la que queremos redirigir y definimos la función onClick para que al hacer clic sobre el enlace se abra el navegador con la Web. Por último, debemos usar la clase LinkMovementMethod para que podamos hacer clic sobre el enlace y ser redirigidos correctamente.

TextView textView4 = (TextView) findViewById(R.id.textView4);

// Definimos el texto que vamos a formatear.
SpannableStringBuilder ssb3 = new SpannableStringBuilder(
	"Visita mi blog https://amatellanes.wordpress.com/");

// Definimos la URL a la que queremos redirigir y definimos el método onClick para abrir la URL en el navegador.
URLSpan urlSpan = new URLSpan("https://amatellanes.wordpress.com/") {
	@Override
	public void onClick(View v) {
		Intent intent = new Intent(Intent.ACTION_VIEW);
		intent.setData(Uri.parse(getURL()));
		startActivity(intent);
	}
};

// Aplicamos el span al texto que usaremos como URL.
ssb3.setSpan(urlSpan, 15, ssb3.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);

// Mostramos el texto con la URL.
textView4.setText(ssb3, BufferType.SPANNABLE);

// Necesario para que se pueda hacer clic sobre la URL
textView4.setMovementMethod(LinkMovementMethod.getInstance());

introduccion-spans-3

Como alternativa al uso de LinkMovementMethod podemos usar la clase Linkify, que analizará el texto en busca de URLs o direcciones de correo electrónico haciéndolas clickable. Vamos a ver un ejemplo de su uso a continuación:

TextView textView4 = (TextView) findViewById(R.id.textView4);

// Definimos el texto que vamos a formatear.
SpannableStringBuilder ssb3 = new SpannableStringBuilder(
	"Visita mi blog https://amatellanes.wordpress.com/");

// Definimos la URL a la que queremos redirigir y definimos el método onClick para abrir la URL en el navegador.
URLSpan urlSpan = new URLSpan("https://amatellanes.wordpress.com/") {
	@Override
	public void onClick(View v) {
		Intent intent = new Intent(Intent.ACTION_VIEW);
		intent.setData(Uri.parse(getURL()));
		startActivity(intent);
	}
};

// Aplicamos el span al texto que usaremos como URL.
ssb3.setSpan(urlSpan, 15, ssb3.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);

// Mostramos el texto con la URL.
textView4.setText(ssb3, BufferType.SPANNABLE);

// Necesario para poder hacer clic sobre el enlace y sea abierto correctamente.
// Con Linkify.WEB_URLS solo buscará direcciones Web.
Linkify.addLinks(textView4, Linkify.WEB_URLS);

Con esto hemos acabado esta introducción a los spans en Android. Puedes encontrar el código completo en mi Github.

Etiquetado , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: