賽拉維的秋天

SearchView 是 Android 官方的元件，
它可以讓我們快速寫出 搜尋框的功能，
並能整合在 Toolbar 元件中。
由於最近在進行 AppCompat support library 升級的動作，
發現原本一些客製化外觀的效果不見了，
所以花了時間研究一下。

Google 官方的文件，
也許因為 Android 的版本眾多，
又有 一般 library 跟 support library，
總覺得很難查找最新的資料。

關於客製化 AppCompat SearchView 外觀 的說明，
可能以這篇官方部落格的文章比較 正確。

以下是我實驗與快速筆記，

res/menu/menu_main.xml 中，跟原本設定 SearchView 的設定差不多，
但是要注意 actionViewClass 與 showAsAction 要用 app 這個 namespace，
另外， 我 SearchView 也使用了 android.support.v7.widget.SearchView 

<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="@android:drawable/ic_menu_search"
android:orderInCategory="100"
android:title="@string/action_settings"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
</menu>

我的 MainActivity 是 extends AppCompatActivity，
要注意在 onCreateOptionMenu 若要使用 searchView，
要記得用新方法 MenuItemCompat.getActionView，

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);

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

    searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));
    return true;
}

(SearchView) menu.findItem(R.id.menu_search).getActionView();

是會取得 null 的 。

根據上面的步驟，
順利的話可以將 搜尋按紐放到 Toolbar

點下搜尋按鈕就會出現以下預設的搜尋框。

這個時候，
讓我們為 Toolbar 加上一個 theme

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/AppTheme.Toolbar" />

並在 styles.xml ，
加上以下設定，
其中 searchViewStyle 連結到的 style 設定了 官方部落格的文章 指出可客製化的屬性，
而 homeAsUpIndicator，則可設定點下後左方圖示的 drawable 樣式。

<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="searchViewStyle">@style/AppTheme.SearchView</item>
    <item name="homeAsUpIndicator">@drawable/ic_search_back</item>
</style>

<style name="AppTheme.SearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@drawable/ic_action_name</item>
    <item name="closeIcon">@drawable/ic_action_name</item>
    <item name="queryBackground">@drawable/ic_search_bg</item>
    <item name="goIcon">@drawable/ic_action_name</item>
    <item name="queryHint">This is Search Hint</item>
</style>

做出的效果如下，

然後輸入搜尋文字後，
後方本來叉叉的取消按鈕，
則變成安卓機器人圖示。 

希望跟我遇到有客製化 SearchView 外觀，
能有所幫助，
如果哪邊寫錯了，
或有需要改進，
也歡迎跟我說喔。

當然如果有朝一日，
Google 的 Android 文件能夠新又正確，
然後不要語焉不詳是最好了。

ref:

1. https://philio.me/styling-the-searchview-with-appcompat-v21/
2. http://stackoverflow.com/questions/27348479/how-to-customize-the-up-button-when-the-searchview-is-being-expanded 
3. http://diary.syarihu.net/2014/09/androidappcompatsearchview.html  這裡有寫到一些，用程式去改變外觀的範例，但並不是每個屬性都改得動。
4.  http://blog.luxteam.net/2013/11/04/styling-appcompat-searchview/