質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.54%

ToolBarにSearchViewを実装する際に他のアイコンを消したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,678

hiro094

score 24

現在ToolBarに検索機能を実装するためにSearchViewを使って実装しました。
ToolBarの検索ボタンから検索バーが表示されてそれっぽい挙動にはなったのですが、検索バーが表示された時に他にToolBarに追加してあるボタンが一緒に表示されてしまいます。

イメージ説明

イメージ説明

この実装方法だとこうなってしまうのでしょうか?
検索ボタンからこのように他のToolBarの項目が出ないようにはどうすれば良いでしょうか?
イメージ説明

該当のソースコード

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private SearchView searchView = null;
    Toolbar toolbar = null;

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

        // ツールバーをアクションバーとしてセット
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);

    //メニューボタンを表示する.Toolbarでもこれを実装しないと
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // menu_main.xmlファイルに設定されたメニューを表示する。
        getMenuInflater().inflate(R.menu.menu_main, menu);

        getMenuInflater().inflate(R.menu.menu_search, menu);
        MenuItem searchItem = menu.findItem(R.id.searchView);
        searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        return true;
    }
}

menu_main.xml

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

    <item
        android:id="@+id/action_add"
        android:icon="@android:drawable/ic_menu_add"
        android:title="test"
        android:orderInCategory="100"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_setting"
        android:orderInCategory="102"
        android:title="設定"
        app:showAsAction="never" />
</menu>

menu_search.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/searchView"
        android:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="102"
        app:showAsAction="always"
        android:title="検索"
        app:actionViewClass="android.support.v7.widget.SearchView"/>

</menu>


追記:
menu_search.xmlのshowAsActionにcollapseActionViewを追加したところ、SearchViewに戻るボタンが実装されたのと同時に検索ボタン押下時にsetOnMenuItemClickListenerで他のメニューと同じように拾えるようになったのですが、setVisibleで消したボタンを再度表示するタイミングであるこの戻るボタン押下時のイベントが拾えません・・・。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/searchView"
        android:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="102"
        app:showAsAction="ifRoom|collapseActionView"
        android:title="検索"
        app:actionViewClass="android.support.v7.widget.SearchView"/>

</menu>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

SerchViewの開閉を検知する場合はMenuItemCompat.OnActionExpandListenerをセットする事で可能です。
ただしcollapseActionViewの設定をしてください。

また、ifRoomのmenuは展開中にsetVisibleをすると表示中の横幅の関係のせいかおかしい事になるので可能であればshowAsActionをalwaysに変更します。

どうしてもifRoomは変えれないと言う場合、onMenuItemActionCollapseの際にinvalidateOptionsMenuで対応できると思います。

記載いただいているコードと若干変えてますが以下にサンプルを記載します。
他にもいい方法があると思いますが参考になれば幸いです。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_add"
        android:icon="@android:drawable/ic_menu_add"
        android:title="test"
        android:orderInCategory="100"
        app:showAsAction="always" /> 

    <!--ここではsearchViewもひとまとめにしてます-->
    <item
        android:id="@+id/searchView"
        android:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="102"
        android:title="検索"
        app:showAsAction="always|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView"/>

    <item
        android:id="@+id/action_setting"
        android:orderInCategory="102"
        android:title="設定"
        app:showAsAction="never" />
</menu>
@Override
public boolean onCreateOptionsMenu(final Menu menu) {

    getMenuInflater().inflate(R.menu.menu_main, menu);
    final MenuItem searchItem = menu.findItem(R.id.searchView);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

    //その他・・・

    MenuItemCompat.setOnActionExpandListener(searchItem,new MenuItemCompat.OnActionExpandListener(){

        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            //searchItem以外の全メニューを非表示
            for (int i = 0; i < menu.size(); i++)
                if(searchItem != menu.getItem(i))setVisible(menu.getItem(i),false);
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            //searchItem以外の全メニューを表示
            for (int i = 0; i < menu.size(); i++)
                if(searchItem != menu.getItem(i))setVisible(menu.getItem(i),true);

            //menuをifRoomで行う場合は上をコメントアウトし以下のみでいい;
            //invalidateOptionsMenu();
            return true;
        }
    });

    return true;
}


private void setVisible(MenuItem item, boolean visible){
    if(item != null){
        item.setVisible(visible);
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/23 20:17

    具体的かつ素晴らしい回答ありがとうございます。
    final識別子が必要なのも正直躓きそうでしたので非常に助かりました!

    MenuItemのリスナーからだったのですね・・・。
    それもcollapseActionViewを付けない場合の☓ボタンの検知はSearchView#OnCloseListenerという・・・。

    キャンセル

  • 2017/05/23 20:54

    SerchViewというよりActionViewのリスナーのためですね。

    状況に応じて(4.0以下も対応する場合)であればOnCloseListenerを使う事もあるかと思います。
    ただOnCloseListenerは4.0付近でバグがありますので閉じる状態を検知するやり方は基本OnActionExpandListenerを利用するほうがいいと思います。

    バグ
    https://issuetracker.google.com/issues/36940858

    キャンセル

0

下記の方針でできると思いますよ。
・onCreateOptionsMenuの中で消したいアイコンのMenuItemインスタンスを取得しておく。
・検索ボタンクリック時に消したいアイコンをMenuItem#setVisibleで非表示化する。
・任意のタイミングで非表示化したボタンを表示する。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 13:33

    回答ありがとうございます。
    検索ボタン押下のタイミングがtoolbar.setOnMenuItemClickListenerで拾えなかったのですが、seachviewは別のところで見ないといけないのですかね・・・。とりあえず、setVisible()でアイコンを非表示には出来たのですが、その他のメニューも全て消さなくてはいけない and その個数分Activityのメンバ変数に追加しないといけないのでもう少し綺麗に書けないか検討してみます。

    キャンセル

  • 2017/05/20 14:20

    menu_search.xmlのshowAsActionにcollapseActionViewを追加したところ、SearchViewに戻るボタンが実装されたのと同時に検索ボタン押下時にsetOnMenuItemClickListenerで他のメニューと同じように拾えるようになったのですが、setVisibleで消したボタンを再度表示するタイミングであるこの戻るボタン(←ボタン)押下時のイベントが拾えません・・・。
    これはどこのイベントが呼ばれているのでしょうか?

    キャンセル

0

Activity#invalidateOptionsMenuでオプションメニューを無効化する(再度onCreateOptionsMenuを呼ぶようにする)事ができるので、表示を切り替える際にそれを呼び出し、onCreateOptionsMenuの中では状況によってmenu_main/menu_searchのどちらかのみ生成したほうがスマートだと思います。

public class MainActivity extends AppCompatActivity {
    boolean searchMode = false;
    SearchView searchView = null;

    @Override
    public void onCreateOptionsMenu(Menu menu)
    {
        if (this.searchMode) {
            this.getMenuInflater().inflate(R.menu.menu_search, menu);
            MenuItem searchItem = menu.findItem(R.id.searchView);
            this.searchView = (SearchView)MenuItemCompat.getActionView(searchView);
        }
        else {
            this.getMenuInflater().inflate(R.menu.menu_main, menu);
            this.searchView = null;
        }
    }

    public void startSearchMode()
    {
        this.searchMode = true;
        this.invalidateOptionsMenu();
    }
}

ただ、戻るボタン云々とか聞いていると、もしかしてやりたい事はActionModeではないかと思うのですが、いかがでしょう。

上記はEditTextのフローティングアクションモードの例ですが、単にAppCompatActivity#startSupportActionModeを実行すれば、アクションバーにメニューが表示されます。

public class MainActivity extends AppCompatActivity {
    public void startSearchMode()
    {
        this.startSupportActionMode(new ActionMode.Callback() {
            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu)
            {
                mode.getMenuInflater().inflate(R.menu.menu_search, menu);
                return true;
            }
            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu)
            {
            }
            @Override
            public void onDestroyActionMode(ActionMode mode)
            {
            }
            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item)
            {
                return false;
            }
            });
    }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/20 14:18

    回答ありがとうございます。invalidateOptionsMenuの件はそちらのほうがかなりスマートだと思ったのでmenu_mainの所に検索ボタンを追加し、そこが押されたらstartSearchMode()を実行するようにした所、検索ボタンを押したらmenu_searchに切り替わることは出来て、menu_mainのアイコンは表示されなくなったのですがそこでまた検索ボタンが表示されてしまい、それを押すと入力バーが出る状態になってしまいました。直接入力バーに飛ぶ方法が調べてもわからず詰まってしまいました。

    ActionModeの件ですが、こちらActionModeというものをいまいち理解出来ていません。単にEditText等のテキスト選択からコンテキストメニューのようなものを今風に出すしくみの事でしたらこちらの実装したい内容とは異なります。
    ファイル等の一覧を表示するような画面から検索バーの内容を読み取ってフィルターするというような事がしたく、ToolBarにSearchViewを実装しようとしています。

    キャンセル

  • 2017/05/22 23:51

    申し訳ない、SearchViewって使ったことがなかったのですが、検索ボタンと入力バーが切り替わるんですね。
    切り替わりは、SearchView#setIconifiedメソッドでプログラムから制御することができます。
    他にも、setOnCloseListenerとかsetOnSearchClickListenerとか、いろいろと役に立ちそうなものがありそうなので、SearchViewのリファレンスマニュアルはざっと眺めておいたほうがいいと思います。

    ActionModeについて要らないと思いますがかるく補足しておきますと、ActionModeにはTYPE_FLOATING(EditTextなどで使用されているコンテキストメニューのようなもの)とTYPE_PRIMARY(ActionBarの手前に表示されるもの)の二種類あります。
    見た目が全然違うのですが、ActionModeで検索すると前者ばかり出てくるので、誤解を招いたかもしれません。
    戻るボタンを自身で実装されているのであれば、後者のActionModeを使用したほうがいいかと思って助言しましたが、SearchViewのCloseButton(というのが正解かしらないけど)を使うのであれば、別に使わなくてもいいですね。
    まぁ、予備知識として頭の片隅にでも入れておいてもらえたら。

    キャンセル

  • 2017/05/23 08:40

    SearchView#setIconifiedもsetOnCloseListenerも既に試していますが、相変わらず2重に表示されますし、戻るイベントを拾えません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる