SearchView

Envie d’ajouter un bouton recherche dans votre ActionBar ? ce tuto est fait pour vous !

device-2015-07-02-172802

Définir votre menu

Première étape, définir un menu, qui sera utilisé par notre Activité. Je vous conseille de lire le tuto dédié à la création de menu sur Android si ce n’est pas encore fait.

Dans votre fichier menu_main, ajouter un item action_search, dont l’actionViewClass sera android.support.v7.widget.SearchView

res/menu/menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_white_36dp"
        android:title="@string/action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom" />

</menu>

Pensez à inclure appcompat-v7 dans votre projet !

Afin d’utiliser les icônes material pour la SearchView, pensez à copier coller les ic_search_white_36dp dans votre projet. Je les ai mit à disposition à l’adresse suivante : Icones Searchview Material

layout-2015-07-02-175616

 

Contenu de la preview

 

Importer menu

Utilisez maintenant ce menu dans votre activité, depuis la méthode onCreateOptionsMenu

Vous pourrez ensuite utiliser l’item action_search depuis menu.findItem, puis utiliser MenuItemCompat afin de récupérer la searchView.

Utilisez ensuite searchView.setOnQueryTextListener afin de récupérer l’évènement “l’utilisateur a rentré un texte, puis clické sur rechercher”.

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    @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);

        final MenuItem searchItem = menu.findItem(R.id.action_search);
        final SearchView searchView = (SearchView)MenuItemCompat.getActionView(searchItem);

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                //votre code ici
                return false;
            }

            @Override
            public boolean onQueryTextChange(String s) {
                return false;
            }
        });

        return true;
    }

}

Exemple

Je vais vous montrer comment utiliser la SearchView dans un projet un peu plus complet. J’ai ici une Activité contenant un Fragment, à mettre à jour avec le texte recherché par l’utilisateur.

Je vais utiliser EventBus afin de communiquer le texte recherché au fragment.

Commencer par créer un Event, contenant le texte recherché :

public class QueryEvent {
    String query;

    public QueryEvent(String query) {
        this.query = query;
    }

    public String getQuery() {
        return query;
    }
}

Publier cet évènement suite à la recherche de l’utilisateur
(utiliser invalidateOptionsMenu() afin de refermer la searchView)

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                EventBus.getDefault().post(new QueryEvent(query));

                //if you want to collapse the searchview
                invalidateOptionsMenu();

                return false;
            }

            @Override
            public boolean onQueryTextChange(String s) {
                return false;
            }
        });

Voici le contenu de mon activity, depuis les layouts j’ai ajouté un MyFragment

layout/activity_main.xml

<FrameLayout 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"
    tools:context=".MainActivity"
    >

    <fragment
        class="com.tutosandroidfrance.searchviewsample.MyFragment"
        android:tag="myFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

Ce MyFragment contient simplement une textView

layout/fragment_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TextView
        android:layout_gravity="center_horizontal"
        android:id="@+id/texte"
        android:layout_marginTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</FrameLayout>

Mon fragment est relié à eventBus, depuis son onStart() et son onStop().
Je réceptionne le QueryEvent avec void onEvent(QueryEvent event), puis je modifie le contenu de ma textView

MyFragment.java

public class MyFragment extends Fragment {

    TextView textView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_main,container,false);
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        textView = (TextView)view.findViewById(R.id.texte);
    }

    @Override
    public void onStart() {
        super.onStart();
        EventBus.getDefault().register(this);
    }

    @Override
    public void onStop() {
        super.onStop();
        EventBus.getDefault().unregister(this);
    }

    public void onEvent(QueryEvent event){
        textView.setText(event.getQuery());
    }

}

Regardons le résultat :

 

1. L’utilisateur click sur la loupe

device-2015-07-02-172802 2

2. Il écrit le texte “salut”, puis click sur l’icone de loupe de son clavier

device-2015-07-02-174705

 

3. Le contenu du fragment se met à jour et affiche “salut”

device-2015-07-02-174739

Les sources de ce tutorial sont disponibles sur github

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *