Construcción de un control personalizado en Android

Carlos García Pérez

Técnico especialista en informática de empresa (CEU).

Ingeniero Técnico en Informática de Sistemas (UPM)

Creador de MobileTest, Haaala!, Girillo, toi18n.

Charla sobre desarrollo de aplicaciones en Android.

@cgpcosmad

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-05-03

Tutorial visitado 4.844 veces Descargar en PDF

Construcción de un control personalizado en Android

Introducción

En muchas ocasiones es muy interesante crear nuestros propios controles personalizados para poder reutilizarlos rápida y cómodamente en el futuro. En este tutorial vamos a ver un ejemplo de como crear y usar un control personlizado sencillo.

Manos a la obra! construcción del control personalizado

A continuación construiremos un control que nos permita cómodamente elegir mediante una barra de progreso un número entre un determinado intervalo válido, además nos permita personalizar:

El título
El valor máximo.
El valor por defecto seleccionado.

Si deseas el código fuente, puedes descargártelo aquí . (Está autocomentado, no creo que tengas problemas si tienes una base de programación en Android.)

Captura de pantalla de la aplicación a construir:

El control personalizado que construiremos está resaltado con un borde azul.

Interface gráfico de la aplicación (la captura de pantalla)

Observe como definimos declarativamente la pantalla con el control personalizado es.carlosgarcia.widget.SeekBarCustom que construiremos posteriormente:

`es.carlosgarcia.MainActivity`

Único Activity de la aplicación.

package es.carlosgarcia;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
import es.carlosgarcia.widget.SeekBarCustom;

/**
     * Cuando hacemos clic en el botón invocamos un método personalizado y especifico del control
     */
	@Override
	public void onClick(View v) {
		if (seek.isValueSelected()){
			Toast.makeText(this, "Estupendo!!", Toast.LENGTH_LONG).show();
		} else {
			Toast.makeText(this, "Seleccione un valor, por favor.", Toast.LENGTH_LONG).show();
		}
	}
}

`es.carlosgarcia.widget.SeekBarCustom`

Clase que define el control personalizado que deseamos construir (lo resaltado en azul en la captura de pantalla anterior).

Observe como:

Construimos el control combinando (o componiendo) varios controles ya definidos (LinearLayout, SeekBar y TextView)
Leemos los atributos que hemos definido en el XML del GUI. (max, progress, text).

package es.carlosgarcia.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

/**
 * Control personalizado que representa una barra de progreso con un título con:
 * @param min: 		Valor mánimo
 * @param progress: Valor actual
 * @param text:		Título mostrado
 * @author Carlos García. http://www.carlos-garcia.es
 */
public class SeekBarCustom extends LinearLayout implements OnSeekBarChangeListener {
	private static final String NS 		 = "http://schemas.android.com/apk/res/android";
	private static final String PROGRESS = "progress";
	private static final String MAX		 = "max";
	private static final String TEXT	 = "text";
	
	private int		 resCode;
	private SeekBar  bar;
	private TextView caption;
	
	public SeekBarCustom(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.initUI(attrs);
	}
	
	/**
	 * Inizializamos el control leyendo los atributos personalizados max, progress y text
	 * @param attrs
	 */
	private void initUI(AttributeSet attrs){
		this.caption = new TextView(this.getContext());
		this.bar   	 = new SeekBar(this.getContext());
		this.resCode = attrs.getAttributeResourceValue(NS, TEXT, 0);
		
		this.setOrientation(LinearLayout.VERTICAL);
		this.addView(caption);
		this.addView(bar);

int progress = attrs.getAttributeUnsignedIntValue(NS, PROGRESS, 1);
		caption.setText(getResources().getString(resCode, progress));
		
		bar.setMax(attrs.getAttributeUnsignedIntValue(NS, MAX, 100) + 1);
		bar.setProgress(progress);
		
		
		bar.setOnSeekBarChangeListener(this);
	}

/**
	 * Permite al usuario establecer el valor, validamos que sea un valor correcto.
	 */
	public void setProgress(int p){
		if ((p < 0) || (p > bar.getMax())){
			throw new IllegalArgumentException();
		}
		bar.setProgress(p);
	}

public int getProgress(){
		return bar.getProgress();
	}	
	
	/**
	 * Indica si el usuario ha seleccionado algún valor
	 */
	public boolean isValueSelected(){
		return (bar.getProgress() > 0);
	}
	
	/**
	 * Cambiamos el título del control cuando el usuario mueve el SeekBar.
	 */
	@Override
	public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
		caption.setText(getResources().getString(resCode, progress));
	}

@Override
	public void onStartTrackingTouch(SeekBar seekBar) {}

@Override
	public void onStopTrackingTouch(SeekBar seekBar) {}
}

Archivo de recursos de mensajes `/res/string.xml`

Nota: Si desea traducirlo automáticamente a otros idiomas, puede hacerlo a mano o usar la aplicación toi18n.

Conclusiones

Como veis no es dificil crear estos controles y reutilizarlos en un futuro o incluso crearos vuestras propias librerías de componentes..

Espero que os haya sido útil, un saludo.
Carlos García, http://www.carlos-garcia.es.

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |

Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Catálogo de servicios Autentia

Síguenos a través de:

Últimas Noticias

Últimos Tutoriales

Últimos Tutoriales del Autor

Categorías del Tutorial

Últimas ofertas de empleo

Fecha de publicación del tutorial: 2011-05-03

Construcción de un control personalizado en Android

Introducción

Manos a la obra! construcción del control personalizado

Captura de pantalla de la aplicación a construir:

Interface gráfico de la aplicación (la captura de pantalla)

`es.carlosgarcia.MainActivity`

`es.carlosgarcia.widget.SeekBarCustom`

Archivo de recursos de mensajes `/res/string.xml`

Conclusiones

A continuación puedes evaluarlo:

Por favor, vota +1 o compártelo si te pareció interesante

» Registrate y accede a esta y otras ventajas «

Catálogo de servicios Autentia

Síguenos a través de:

Últimas Noticias

Últimos Tutoriales

Últimos Tutoriales del Autor

Categorías del Tutorial

Últimas ofertas de empleo

Fecha de publicación del tutorial: 2011-05-03

Construcción de un control personalizado en Android

Introducción

Manos a la obra! construcción del control personalizado

Captura de pantalla de la aplicación a construir:

Interface gráfico de la aplicación (la captura de pantalla)

es.carlosgarcia.MainActivity

es.carlosgarcia.widget.SeekBarCustom

Archivo de recursos de mensajes /res/string.xml

Conclusiones

A continuación puedes evaluarlo:

Por favor, vota +1 o compártelo si te pareció interesante

» Registrate y accede a esta y otras ventajas «

`es.carlosgarcia.MainActivity`

`es.carlosgarcia.widget.SeekBarCustom`

Archivo de recursos de mensajes `/res/string.xml`