Givemepass's Android 惡補筆記

如何使用Toolbar-Search

| Comments

如果你想要在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" />

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

Comments

comments powered by Disqus