Androidアプリ開発 Material design SearchViewを実装する

2016年07月29日(編集2016年12月22日)
このエントリーをはてなブックマークに追加

Androidアプリでは、Material designでSearchViewを扱うことができます。
この記事は、Material designのSearchViewの実装方法を記載した記事です。

環境はAndroid 7.0 (API level 24) です。

環境

  • OS X Yosemite
  • Oracle jdk version 1.8.0_72
  • Android Studio 2.2.3
  • android sdk 25 (25.0.2)

難易度

初心者向け

SearchView

Material designでは、簡単にSearchViewを利用出来るようになりました。
Searchableより機能は劣ります(音声検索や検索履歴がない)が、シンプルな検索機能なら十分です。

build.gradle

Material designが利用できるように、build.gradleファイルでライブラリを設定します。

{project_folder}/build.gradle
android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    // something
}
dependencies {
    // something
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:support-v4:25.0.1'
}
        

Rebuild projectでインストールすれば準備完了です。

MenuXML実装

menuのxmlを記述します。

/app/src/main/res/menu/activity_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/toolbar_menu_search"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />

</menu>
        

■ 実装の解説

1. app:actionViewClassの設定

app:actionViewClassでandroid.support.v7.widget.SearchViewを指定します。

Activity実装

上記で実装したmenuをActivityコードで記述します。

/app/src/main/java/{package}/ui/SearchActivity.java
import android.support.v4.view.MenuItemCompat;
import android.support.v7.widget.SearchView;

public class SearchActivity extends AppCompatActivity {

    private SearchView mSearchView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // something
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Set Menu
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.activity_memory, menu);

        MenuItem menuItem = menu.findItem(R.id.toolbar_menu_search);

        mSearchView = (SearchView) MenuItemCompat.getActionView(menuItem);

        // whether display Magnifying Glass Icon at first
        mSearchView.setIconifiedByDefault(true);

        // whether display Submit Button
        mSearchView.setSubmitButtonEnabled(false);

        mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

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

        return super.onCreateOptionsMenu(menu);
    }
}
        

■ 実装の解説

1. onCreateOptionsMenuメソッド

onCreateOptionsMenu() メソッドは、アクティビティの開始時にシステムが呼び出します。

2. setIconifiedByDefaultメソッド

引数にtrueを設定するとアイコンを表示します。

mSearchView.setIconifiedByDefault(true);
        
setIconifiedByDefault(true)

引数にfalseを設定するとアイコンを非表示にします。

mSearchView.setIconifiedByDefault(false);
        
setIconifiedByDefault(false)

3. SearchView.OnQueryTextListener#onQueryTextSubmitメソッド

検索ボタンを押下すると呼び出されます。

4. SearchView.OnQueryTextListener#onQueryTextChange

テキスト内容が変更されるたびに呼び出されます。
サンプルコードでは、

suggestion_search(newText);
        

としています。
suggestion_searchメソッドは、文字列検索をする独自メソッドです。
こうすることで、文字が変更されるたびに検索が実行されます。

ビルドして実行

実装を終えたら、ビルドしてアプリを実行します。

Sample App

SearchViewが確認できました。

まとめ

Material designのSearchViewを使うことで、簡単に検索処理を記述することができます。
音声検索や検索履歴が必要ない場合は、Material designのSearchViewを利用すると少ない工数で実装できるでしょう。

関連記事

タグ検索で調べてみよう

Android7.0 UI