web-dev-qa-db-fra.com

Barre d'action Android: SearchView pliable avec bouton d'action

Comment construire ActionBar avec une vue de recherche réductible avec un seul élément d'action visible, lorsque la vue de recherche est développée? Pour être plus descriptif, voici ce dont j'ai besoin: 

enter image description here Notez qu’il existe d’autres éléments de menu et que Android:uiOptions="splitActionBarWhenNarrow" est défini dans AndroidManifest.xml.

J'ai essayé de configurer la disposition des éléments de recherche personnalisés:

menu.xml

<item
    Android:id="@+id/menu_search"
    Android:actionLayout="@layout/actionbar_search"
    Android:icon="@drawable/action_search"
    Android:showAsAction="always|collapseActionView"
    Android:title="@string/search" />

actionbar_search.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="right"
    Android:orientation="horizontal" >

    <com.actionbarsherlock.widget.SearchView
        Android:id="@+id/search_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:iconifiedByDefault="false"
        Android:queryHint="@string/search_hint" />

    <ImageButton
        Android:id="@+id/add_item"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        style="@style/Widget.Sherlock.ActionButton"
        Android:src="@drawable/content_new"/>

</LinearLayout>

Mais par défaut, la vue de recherche prend toute la largeur disponible et le bouton n'est pas visible. Je ne sais pas comment forcer SearchView à remplir tout l'espace disponible entre l'icône de l'application et l'élément de menu. Tout ce que j'ai trouvé est la propriété Android:maxWidth, mais cela ne permet que de coder en dur, et je cherche une solution plus flexible. J'ai aussi essayé RelativeLayout avec Android:layout_toRightOf="@id/search_view" sans succès.

androidandroid-actionbarsearchview
20
Rafal Gałka

Après avoir pris en compte les suggestions des commentaires, de nombreuses recherches sur Google et tests ont permis d’obtenir l’effet souhaité. Je ne suis pas fier de cette solution mais cela fonctionne, ce n'est pas trop compliqué et cela devrait suffire dans ce cas.

En résumé ce que j'ai fait: 

  1. Placé SearchView avec le bouton "ajouter un élément" personnalisé dans customView de ActionBar 
  2. collapseActionView et Android:actionLayout supprimés de l'élément de recherche dans menu.xml
  3. Réduire/développer SearchView par programme.

Du code pour mieux comprendre ce que j'ai fait. Peut-être que cela peut être utile pour quelqu'un.

menu.xml

<item
    Android:id="@+id/menu_search"
    Android:icon="@drawable/action_search"
    Android:showAsAction="always"
    Android:title="@string/search" />

// ... other menu items

actionbar_search.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="right"
    Android:orientation="horizontal">

    <com.actionbarsherlock.widget.SearchView
        Android:id="@+id/search_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:iconifiedByDefault="false"
        Android:queryHint="@string/search_hint"
        Android:visibility="invisible" />

    <ImageButton
        Android:id="@+id/add_item"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        style="@style/Widget.Sherlock.ActionButton"
        Android:src="@drawable/content_new"
        Android:title="@string/add_item" />

</LinearLayout>

MainActivity.Java

@Override
public void onCreate(Bundle savedInstanceState) {
    // ...
    actionBar.setCustomView(R.layout.actionbar_search);
    actionBarCustomView = ab.getCustomView();
    searchView = ((SearchView) actionBarCustomView.findViewById(R.id.search_view));
    searchView.setOnCloseListener(new SearchView.OnCloseListener() {
        @Override
        public boolean onClose() {
            searchView.setVisibility(View.INVISIBLE);
            return false;
        }
    });
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        // ...
        case R.id.menu_search:
            if (searchView.getVisibility() == View.VISIBLE) {
                searchView.setIconified(true);
                searchView.setVisibility(View.INVISIBLE);
            } else {
                searchView.setMaxWidth(abCustomView.getWidth() - addButton.getWidth());
                searchView.setVisibility(View.VISIBLE);
                searchView.setIconified(false);
            }
            break;
        // ...
    }
    return true;
}

@Override
public void onBackPressed() {

    if (searchView.getVisibility() == View.VISIBLE) {
        searchView.setIconified(true);
        searchView.setVisibility(View.INVISIBLE);
        return;
    }

    // ...
}
9
Rafal Gałka

Vous pouvez le faire uniquement en utilisant yourmenu.xml.

Configurez votre autre icône de menu pour qu’elle apparaisse toujours comme une action . Votre menu.xml devrait ressembler à ceci:

<item
    Android:id="@+id/menu_search"
    Android:actionLayout="@layout/actionbar_search"
    Android:icon="@drawable/action_search"
    Android:showAsAction="always|collapseActionView"
    Android:title="@string/search"
/>
<item
    Android:id="@+id/your_other_menu_id"
    Android:showAsAction="always"
    Android:icon="@Android:drawable/your_other_menu_ic"
 />
2
JPMagalhaes

Simplement tu peux le faire comme ça

@Override
public boolean onCreateOptionsMenu(Menu menu) {
     getMenuInflater().inflate(R.menu.main, menu);
     MenuItem searchItem = menu.findItem(R.id.action_search);
     searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
     searchView.setIconified(true); //to be opened collapsed
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch(item.getItemId()){

        case R.id.action_search:
            searchView.setIconified(false);// to Expand the SearchView when clicked
            return true;
    }    
    return false;
}

Et à l'élément de recherche dans menu.xml make

showAsAction = "toujours"

Remarque: j'utilise Android.support.v7.widget.SearchView, mais dans votre cas, cela n'a pas d'importance.

1
Salma

Juste un changement de menu xml. préfixe showaction au nom de votre application 

<menu xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto" >

<item
    Android:id="@+id/menu_search"
    Android:actionLayout="@layout/actionbar_search"
    Android:icon="@drawable/action_search"
    app:showAsAction="always|collapseActionView"
    Android:title="@string/search"
/>

</menu>
0
nadafafif