Lista con imágenes y filtro Android Nativo (ListView)

Este es un tutorial que nos solicito muy amablemente un seguidor de nuestra red de Youtube (La chercha O), en el cual vamos a implementar como base nuestro anterios tutorial de Lista con imágenes Android nativo (ListView). Lo que vamos hacer es unas modificaciones para agregar un nuevo campo de búsqueda para realizar nuestro filtro sobre nuestra ListView.

Recuerden que en #HablemosDeAndroid estamos para aprender y enseñar cada día por eso sin más preámbulos he aquí un nuevo tutorial en Android Nativo

Filtro Android Nativo (ListView)

Una vez creado el proyecto en Android vamos a ir a nuestro xml activity.main.xml, creamos el elemento de tipo ListView con el id ContenlistView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:id="@+id/relativeLayout">

        
<SearchView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buscador" />
    
</RelativeLayout>

    
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/relativeLayout">

        
<TextView android:text="Lista Con Imagenes" android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/texto"
            android:layout_alignRight="@+id/ContenlistView"
            android:layout_alignEnd="@+id/ContenlistView" />

        
<ListView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ContenlistView"
            android:layout_alignParentBottom="true"
            android:layout_alignParentTop="true" />
    
</RelativeLayout>



</RelativeLayout>

Cómo se pudieron dar cuenta en nuestro activity.main.xml lo que hicimos fue agregar el cambo SearchView que va hacer nuestro campo de búsqueda, observarán también que realizamos unos ajustes en el diseño para distribuir nuestro xml.

Ahora lo que vamos hacer es crear una nueva clase en nuestro antiguo proyecto llamada Datos.java, con esta clase lo que vamos hacer es crearle atributos a nuestros datos para poder realizar el filtro en nuestro Adapter sin problema.

package android.ejemplo.com.ejemplolistaconimagenes;

/**
 * Created by jcmolanoro on 17/12/2015.
 */
public class Datos {
    private String titulo;
    private Integer img;

    public Datos(String titulo, Integer img){
        this.titulo= titulo;
        this.img = img;
    }

    public String getTitulo() {
        return titulo;
    }

    public void setTitulo(String titulo) {
        this.titulo = titulo;
    }

    public Integer getImg() {
        return img;
    }

    public void setImg(Integer img) {
        this.img= img;
    }
}

Como pueden observar instanciamos los parámetros de nuestros datos esto nos facilitara mucho trabajo en el llamado que haremos en el Adapter.

Dentro de nuestro Adapter llamado ListaAdapter.java es donde seguramente van a observar mas camvios puesto que nuestro antigui proyecto en Android estaba trabajado de otra manera y para poder facilitar nuestra lista (ListView) con filtro habia que ajustarlo.

package android.ejemplo.com.ejemplolistaconimagenes;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by jcmolanoro on 25/03/2015.
 */
public class ListaAdapter extends BaseAdapter implements Filterable{

    // Declare Variables
    Context context;
    ArrayList<Datos> Datos;
    LayoutInflater inflater;
    CustomFilter filtro;
    ArrayList<Datos> filtroList;

    public ListaAdapter(Context context, ArrayList<Datos> Datos) {
        this.context = context;
        this.Datos = Datos;
        this.filtroList = Datos;
    }

    @Override
    public int getCount() {
        return Datos.size();
    }

    @Override
    public Object getItem(int position) {
        return Datos.get(position);
    }

    @Override
    public long getItemId(int position) {
        return Datos.indexOf(getItem(position));
    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        // Declare Variables
        TextView txtTitle;
        ImageView imgImg;

        //http://developer.android.com/intl/es/reference/android/view/LayoutInflater.html
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if(view == null){
            view = inflater.inflate(R.layout.lista_formato, parent, false);
        }


        // Locate the TextViews in listview_item.xml
        txtTitle = (TextView) view.findViewById(R.id.tituloLista);
        imgImg = (ImageView) view.findViewById(R.id.iconLista);

        // Capture position and set to the TextViews
        txtTitle.setText(Datos.get(position).getTitulo());
        imgImg.setImageResource(Datos.get(position).getImg());

        return view;
    }


    @Override
    public Filter getFilter() {
        if(filtro == null){
            filtro = new CustomFilter();
        }

        return filtro;
    }

    class CustomFilter extends Filter{

        @Override
        protected FilterResults performFiltering(CharSequence constraint) {

            FilterResults resulst = new FilterResults();
            if(constraint != null && constraint.length()>0){
                //pasamos a mayusculas
                constraint = constraint.toString().toUpperCase();

                ArrayList<Datos> filtro = new ArrayList<Datos>();

                for(Integer i=0;i<filtroList.size();i++){
                    if(filtroList.get(i).getTitulo().toUpperCase().contains(constraint)){
                        Datos d= new Datos(filtroList.get(i).getTitulo(),filtroList.get(i).getImg());

                        filtro.add(d);
                    }
                }
                resulst.count= filtro.size();
                resulst.values = filtro;
            }else{
                resulst.count= filtroList.size();
                resulst.values = filtroList;
            }

            return resulst;
        }

        @Override
        protected void publishResults(CharSequence constraint, FilterResults results) {
            Datos = (ArrayList<Datos>) results.values;
            notifyDataSetChanged();

        }
    }
}

En este lo que hemos agregado es la implementación de implements Filterable el cual nos da el metodo Filter getFilter() que es el encargado de realizar el filtro.

Tambien encontramos una variables adicionales como: ArrayList<Datos> Datos, CustomFilter filtro, ArrayList<Datos> filtroList. Estas son variables que reemplazan a las anteriores.

En nuestra función ListaAdapter hemos cambiado algunas cosas también, como en el resto de funciones esto con el fin de asociar nuestro Adapter a la clase Datos.java.

En el getView los cambios son mínimos.

También habrán notado que agregamos dos funciones más para ejecutar nuestro filtro.

En el MainActivity.java hemos hecho los siguiente cambios

package android.ejemplo.com.ejemplolistaconimagenes;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.Toast;

import java.util.ArrayList;


public class MainActivity extends ActionBarActivity {

    ListaAdapter adapter;

    String[] titulo = new String[]{
            "Home",
            "Fotos",
            "Contacto",
    };

    int[] imagenes = {
            R.drawable.home,
            R.drawable.fotos,
            R.drawable.contacto
    };


    SearchView buscador;
    ListView lista;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lista = (ListView) findViewById(R.id.ContenlistView);
        buscador = (SearchView) findViewById(R.id.buscador);


        adapter = new ListaAdapter(this, getDatos());
        lista.setAdapter(adapter);

        buscador.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String query) {
                adapter.getFilter().filter(query);
                return false;
            }
        });

        lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click sobre " + i, Toast.LENGTH_SHORT).show();
            }
        });

        lista.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(), "click Largo " + i, Toast.LENGTH_SHORT).show();
                return false;
            }
        });

    }

    private ArrayList<Datos> getDatos(){
        ArrayList<Datos> Datos = new ArrayList<Datos>();
        Datos d;

        for(Integer i=0;i<titulo.length;i++){
            d = new Datos(titulo[i], imagenes[i]);
            Datos.add(d);

        }
        return Datos;
    }



    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Agregamos el llamada del nuestro buscador y implementamos la función setOnQueryTextListener con sus métodos como el onQueryTextChange

Adicional creamos la función para agregar nuestros datos a laArrayList llamada getDatos()

Otra cosa importante es cambiar el adapter = new ListaAdapter(this, getDatos()); que nos asocia los datos en el Adapter con la función anterior.

Listo solo nos queda probarlo y no se olviden de comentar si el tutorial les sirvió de algo muchas gracias por su atención y paciencia para realizar nuestros tutoriales les agradezco me sigan en la redes sociales.

Recuerden también que el conocimiento es para compartirlo

URL DE DESCARGA Lista con imagenes y filtro código fuente

Video