Configurar evento onClick de una Custom ListView

En (tutoriales) por benoffi7 el 23-04-2011

Luego de muchas semanas de investigación y pruebas he logrado al fin conseguir algo que hasta el momento me era imposible. Cuando dejamos de lado las cosas pre-fabricadas por terceros y empezamos a diseñar nuestros propios componentes para adaptarlos a nuestras necesidades, agregarle o modificar funciones y potenciar su utilidad, nos encontramos con la difícil tarea de re diseñar absolutamente todo. No solo ese componente, sino también la forma en que se comunica con el SO y su comportamiento con el usuario.

 

En este tutorial veremos como configurar el evento onClick de una ListView cuyo layout hemos diseñado nosotros.

Antes que nada, preparemos las clases y los layouts.

 

Layouts:

  1. main: un componente ListView
  2. layout_ck: un componente Checkbox

 

Clases:

  1. List
  2. CustomAdapter (extends ArrayAdapter<String>)
  3. CheckBoxClickListener(implements OnClickListener)

 

Ahora el código:

 

En list no hacemos muchas cosas. Primero creamos nuestro array de String que será fijo pero ustedes pueden crearlo con cualquier fuente de datos. Luego levantamos la referencia al componente ListView almacenado en layout_ck. Instanciamos nuestro adaptador y lo configuramos con ese layout personalizado y con el array de nombre. Por ultimo se lo cargamos al Listview.

 

public class list extends Activity
{
    /** Called when the activity is first created. */
	CustomAdapter adaptador;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //creamos nuestro array de nombres
        String []nombres=new String []{"gonzalo", "fer", "natalia", "florencia", 
          "emiliano", "jeronimo", "ivan", "steve", "juan"};
        setContentView(R.layout.main);
        //levantamos de la interfaz XML el componente ListView
        ListView listView=(ListView)findViewById(R.id.lista_productos);
       	//instanciamos nuestro adaptador
        adaptador = new CustomAdapter(list.this, R.layout.layout_ck, nombres);
        //seteamos nuestro adaptador al ListView   
        listView.setAdapter(adaptador);
    }
 }

 

Ahora vamos el algo complicado que es el CustomAdapter. Cuando extendemos de ArrayAdapter<String> tenemos que redefinir varias cosas. Primero el constructor donde recuperaremos el array de nombres, el contexto y el layout personalizado.

Luego su método más importante que es el getView. Este método es el encargado de crear cada elemento visual de nuestra listview. Hace de nexo entre los datos y la interfaz grafica.

La línea de código que hace funcionar todo es la que seteamos el onClickListener de nuestro checkbox.

 

public class CustomAdapter extends ArrayAdapter<String>
{
	String[] lista_nombre_productos;
	private Context context;

	public CustomAdapter(Context Context, int textViewResourceId,
			String[] Lista__nombre_productos)
	{
		super(Context, textViewResourceId, Lista__nombre_productos);
		this.lista_nombre_productos = Lista__nombre_productos;
		this.context = Context;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent)
	{
		LayoutInflater inflater = (LayoutInflater) 
                  context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View row = inflater.inflate(R.layout.layout_ck, null);
		//recuperamos el nombre en el array
                  // la posición es la misma que en el ListView
		String itemText = this.lista_nombre_productos[position];
		//levantamos el Check de la interfaz XML
		CheckBox ch = (CheckBox) row.findViewById(R.id.checkBox1);
		ch.setText(itemText);
		//al evento on Click le asignamos nuestro propio evento OnClick
		ch.setOnClickListener
                  ( 
                       new CheckBoxClickListener
                       (position,this.lista_nombre_productos,context)
                  );
		return (row);
	}
    }
 

Por ultimo nos queda la clase CheckBoxClickListener. Al implementar la interfaz OnClickListener debemos redefinir el evento onClick. Allí mostrarnos una notificación (Toast) con el nombre pulsado. Para el ejemplo solo hace esto pero podemos agregar que solo la muestre cuando seleccione el Check. Agregue un par de líneas por si quieren lanzar una nueva ventana pasándole el nombre que seleccione. Nada complicado.

 

public class CheckBoxClickListener implements OnClickListener
{
	int position;
	String [] nombres;
	Context contexto;
	public CheckBoxClickListener
          (int Position, String[] Nombres, Context Contexto)
	{
		this.position=Position;
		this.nombres=Nombres;
		this.contexto=Contexto;
	}

	@Override
	public void onClick(View v)
	{
		Context context = contexto;
		CharSequence text = nombres[position];
		int duration = Toast.LENGTH_SHORT;
		Toast toast = Toast.makeText(context, text, duration);
		toast.show();
//		Intent intento=new Intent(contexto,seteo.class);
//		intento.putExtra("nombre", nombres[position]);
//        contexto.startActivity(intento);
	}

}
screen

 

Video con el funcionamiento:

 

 

Cualquier duda sobre el código o el funcionamiento, no duden en dejar un comentario en esta entrada.

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

  • Bianco

    Gracias muy muy bueno me ayudo bastante .D saludos desde Chile

  • Bianco

    Muchas gracias por este pequeño tutorial me ayudo bastante. Tengo una duda como puedes manejar los estados, me explico en el caso de que le hagas click a un nombre te mostrara el toast y despues si vuelves a apretar el mismo aparecera nuevamente el toast ,como puedes controlar para solamente desactivar el checkbox

    • http://gonzalobenoffi.com.ar/ Gonzalo Benoffi

      gracias por el comentario. cuando definimos el onClickListener en el Custom Adapter le mandamos el check como paramentro

      ch.setOnClickListener ( new CheckBoxClickListener (position,this.lista_nombre_productos,context,ch) );cambiamos tambien el constructor del listener y agregamos un nuevo campopublic class CheckBoxClickListener implements OnClickListener
      {
      int position;
      String [] nombres;
      Context contexto; CheckBox ch;
      public CheckBoxClickListener (int Position, String[] Nombres, Context Contexto, CheckBox Ch)
      {
      this.position=Position;
      this.nombres=Nombres;
      this.contexto=Contexto; this.ch=Ch;
      }y cuando hacemos click definimos su estadoch.setChecked(true o false)aca te conviene preguntar q estado tiene y setearlo en el contrario a esteSaludos

  • Arturo Hernandez

    Hola como se le haría se en vez de enviar al método toast lo enviaras a una archivo XML para mostrar la imagen de la persona seleccionada con una descripción extensa ? salu2

  • http://www.bestellipticalreviews.org/ Elliptical review

    I suggest adding a “google+” button for the blog!
    Hellen