如何使用Toolbar-Search

情境

如果你想要在Toolbar上使用搜尋列, Android有提供簡單的套件讓你使用。
如何設定搜尋列
根據如何使用Toolbar(Actionbar)+DrawerLayout的程式碼進行微調。

畫面

android本身就幫你實作好SearchView了, 當你按下去就會跳至搜尋結果頁面。
畫面如下:

menu選單會出現搜尋的icon

點搜尋

點下去整個toolbar會變成搜尋狀態

輸入搜尋文字

按下確定就會跳至寫好的activity

該怎麼完成呢?

一開始先在menu.xml內加入SearchView元件
這邊要注意的是showAsAction跟actionViewClass前面都是app(官網的是android:)。

<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_settings" android:title="@string/action_settings"
        android:orderInCategory="100" app:showAsAction="never" />
    <item android:id="@+id/my_search"
        android:title="@string/search_title"
        android:icon="@drawable/ic_open_search"
        app:showAsAction="ifRoom"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

接著初始化menu

public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_main, menu);

    MenuItem menuSearchItem = menu.findItem(R.id.my_search);

    // Get the SearchView and set the searchable configuration
    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    SearchView searchView = (SearchView) menuSearchItem.getActionView();

    // Assumes current activity is the searchable activity
    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

    // 這邊讓icon可以還原到搜尋的icon
    searchView.setIconifiedByDefault(true); 
    return true;
}

接著我們在res/下建立一個xml資料夾
然後建立一個searchable.xml的xml

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:label="@string/app_name"
    android:hint="@string/search_title" />

然後再AndroidManifest.xml加入一些Tag,
由於我們搜尋完會跳至另外一個SearchableActivity, 因此要先在Manifest上面宣告,
注意meta-data不能遺漏,否則無法導過SearchableActivity。

                <!-- Searchable -->
        <activity
            android:name=".SearchableActivity"
            android:theme="@style/Theme.AppCompat.Light"
            android:launchMode="singleTop" >
            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
            </intent-filter>

            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable"
                />
        </activity>

        <!-- Points to searchable activity so the whole app can invoke search. -->
        <meta-data
            android:name="android.app.default_searchable"
            android:value=".SearchableActivity" />

如果要更改search icon可以使用下列程式碼

MenuItem item = mToolbar.getMenu().findItem(R.id.my_search);
SearchView searchView = (SearchView) item.getActionView();
ImageView icon = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_button);
//你想指定的icon
icon.setImageResource(R.drawable.xxx);

這樣就簡單設定完我們的搜尋列了。

程式碼