Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear un SearchView en Android

Android SearchView Example

Hola amigos continuamos nuestro curso aprendiendo cada día mas. En este nivel le enseñare la forma de como aprender a utilizar el control SearchView para realizar búsquedas de información.

SearchView es uno de los widgets / componentes de interfaz de usuario más útiles de android. Widget de vista de búsqueda de Android se puede utilizar en la barra de acción / appbar / barra de herramientas o en su diseño. Tanto el widget de búsqueda como el diálogo se utilizan para buscar texto, video, etc. En este tutorial, aprenderá a implementar el widget de vista de búsqueda en la aplicación android.
 Android Studio - SearchView

Hay dos tipos de búsqueda; Un widget de búsqueda y otro cuadro de diálogo de búsqueda. El widget de búsqueda se coloca en cualquier parte del diseño de la aplicación y el cuadro de diálogo de búsqueda es un componente de interfaz de usuario controlado por el sistema Android. El diálogo de búsqueda aparece en la parte superior de la actividad.

Crear Nuevo Proyecto Android Studio (Aquí).

Vamos a crear el proyecto de Android para continuar con nuestro ejemplo del uso de SearchView y procederemos a desarrollar nuestra aplicación.
Android Studio - SearchView

Design SearchView Layout

Bueno para desarrollar el diseño de nuestra aplicación seleccionaremos el control SearchView el cual lo ubicaremos en la Paleta de herramientas.
Android Studio - SearchView

Ahora utilizaremos un ListView para mostrar los datos realizados en la búsqueda.
Android Studio - SearchView

El código de nuestro diseño en el Activity_Main seria el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <SearchView
        android:id="@+id/searchView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:iconifiedByDefault="false">
        <requestFocus />
    </SearchView>

    <ListView
        android:id="@+id/listview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/searchView" />

</RelativeLayout>
Android Studio - SearchView

Quedaría de la siguiente forma el diseño de nuestra aplicación.
Android Studio - SearchView

Luego agregaremos otro Layout para la lista de búsqueda. Al cual llamaremos list_view_items y el código de nuestro diseño para este quedaría de la siguiente manera.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp">
    <TextView
        android:id="@+id/nombreLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animal : " />
    <TextView
        android:id="@+id/nombre"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/nombreLabel" />
</RelativeLayout>

El diseño quedaría así.
Android Studio - SearchView

Codigo MainActivity

Ahora nos dirigimos al MaintActivity y escribiremos las siguientes lineas de código para nuestra aplicación. Pero antes de esto tendremos que crear una clase a la cual llamaremos ListViewAdapter
Y luego escribiremos el nombre de nuestra clase.
Y presionamos Ok. Y agregaremos una segunda clase a la cual llamaremos NombresAnimales.
Teniendo listas nuestras clases comenzaremos por la clase NombresAnimales.


public class NombresAnimales {
    //--Declaramos la variable que tomara los nombres recibidos en la función
    private String nombresAnimales;
    //--Función que recibe los nombres
    public NombresAnimales(String nombresAnimales) {
        this.nombresAnimales = nombresAnimales;
    }
    //--Función que regresa el nombre recibido y asigando a la variable
    public String getAnimalName() {
        return this.nombresAnimales;
    }
}

Teniendo listo esto nos dirigimos a la siguiente clase ListViewAdapter


public class ListViewAdapter extends BaseAdapter {
    // Declararamos las Variables
    Context mContext;
    LayoutInflater inflater;
    private List<NombresAnimales> nombreListaAnimales = null;
    private ArrayList<NombresAnimales> arraylist;

    public ListViewAdapter(Context context, List<NombresAnimales> animalNamesList) {
        mContext = context;
        this.nombreListaAnimales = animalNamesList;
        inflater = LayoutInflater.from(mContext);
        this.arraylist = new ArrayList<NombresAnimales>();
        this.arraylist.addAll(animalNamesList);
    }

    public class ViewHolder {
        TextView nombre;
    }

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

    @Override
    public NombresAnimales getItem(int position) {
        return nombreListaAnimales.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    public View getView(final int position, View view, ViewGroup parent) {
        final ViewHolder holder;
        if (view == null) {
            holder = new ViewHolder();
            view = inflater.inflate(R.layout.list_view_items, null);
            // Buscar los datos y presentarlos en el listview_item.xml
            holder.nombre = (TextView) view.findViewById(R.id.nombre);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }
        // Establecer resultados en el TextView
        holder.nombre.setText(nombreListaAnimales.get(position).getAnimalName());
        return view;
    }

    // Función filtrar
    public void filter(String charText) {
        charText = charText.toLowerCase(Locale.getDefault());
        nombreListaAnimales.clear();
        if (charText.length() == 0) {
            nombreListaAnimales.addAll(arraylist);
        } else {
            for (NombresAnimales wp : arraylist) {
                if (wp.getAnimalName().toLowerCase(Locale.getDefault()).contains(charText)) {
                    nombreListaAnimales.add(wp);
                }
            }
        }
        notifyDataSetChanged();
    }
}

LayoutInflater

Instancia un archivo XML de diseño en sus objetos de vista correspondientes. Nunca se utiliza directamente. En su lugar, utilice getLayoutInflater () o getSystemService (Class) para recuperar una instancia LayoutInflater estándar que ya está conectada al contexto actual y correctamente configurada para el dispositivo en el que se está ejecutando.

List

La interfaz de List establece estipulaciones adicionales, más allá de las especificadas en la interfaz de recopilación, en los contratos de los métodos iterador, add, remove, equal y hashCode. Las declaraciones de otros métodos heredados también se incluyen aquí para mayor comodidad.

La interfaz de Listproporciona cuatro métodos para el acceso posicional (indexado) a los elementos de la lista. Las List (como arrays de Java) son basadas en cero. Tenga en cuenta que estas operaciones pueden ejecutarse en el tiempo proporcional al valor de índice para algunas implementaciones (la clase LinkedList, por ejemplo). Por lo tanto, la iteración sobre los elementos de una List suele ser preferible a la indexación a través de ella si la persona que llama no conoce la implementación.

La interfaz de List proporciona un iterador especial, denominado ListIterator, que permite la inserción y sustitución de elementos y el acceso bidireccional, además de las operaciones normales que proporciona la interfaz Iterator. Se proporciona un método para obtener un iterador de lista que comienza en una posición especificada en la lista.

La interfaz de List proporciona dos métodos para buscar un objeto especificado. Desde el punto de vista del rendimiento, estos métodos deben utilizarse con precaución. En muchas implementaciones realizarán costosas búsquedas lineales.

Ahora teniendo claros un poco los conceptos utilizados seguiremos en la siguiente clase. MainActivity y escribiremos el siguiente código.


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import android.widget.SearchView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements SearchView.OnQueryTextListener {

    // Declarar Variables
    ListView list;
    ListViewAdapter adapter;
    SearchView editsearch;
    String[] animalNameList;
    ArrayList<NombresAnimales> arraylist = new ArrayList<NombresAnimales>();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Generar datos de muestra

        animalNameList = new String[]{"Leon", "Tigre", "Perro",
                "Gato", "Tortuga", "Raton", "Elefante", "Zorro",
                "Vaca","Mono","Pajaro"};

        // Buscar los datos y presentarlos en el list_view_item.xml
        list = (ListView) findViewById(R.id.Listview);

        for (int i = 0; i < animalNameList.length; i++) {
            NombresAnimales animalNames = new NombresAnimales(animalNameList[i]);
            // Vincula todas las cadenas a una matriz
            arraylist.add(animalNames);
        }

        // Pasar los resultados a la clase ListViewAdapter
        adapter = new ListViewAdapter(this, arraylist);

        // Vincula el adaptador a ListView
        list.setAdapter(adapter);

        // Buscar los datos y presentarlos en el listview_main.xml
        editsearch = (SearchView) findViewById(R.id.SearchView);
        editsearch.setOnQueryTextListener(this);
    }

    @Override
    public boolean onQueryTextSubmit(String query) {

        return false;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        String text = newText;
        adapter.filter(text);
        return false;
    }

}

Tenemos listo el código de nuestra ultima clase.

Ejecutar Aplicación SearchView

Ahora teniendo lista nuestra aplicación vamos a ejecutarla creando un emulador.

Crear Emulador AVD (Aquí)

Teniendo creado nuestro emulador vamos a ejecutar nuestra aplicación para obtener el resultado.
Android Studio - SearchView
Android Studio - SearchView
Y este seria el resultado de nuestra aplicación realizamos la búsqueda del dato que necesitamos y crear los Array de información necesarios. Mas adelante lo conectaremos a una BD remota para realizar búsquedas.

Descargar: Aquí

Espero el contenido haya sido de su agrado cualquier duda o sugerencia espero verla en tus comentarios muchas gracias por tu tiempo.

Los programadores de verdad no documentan. Si fue dificil de escribir, debe ser dificil de entender.
- Anónimo

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner