Configurar evento onClick de una Custom ListView

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *