Android元件(SearchView) — SearchView使用

前言：

可以代替EditText的東西。
如果要做收尋一般我都會想到EditText。
但android有一個官方使用的SearchView
也可以考慮使用

---

程式碼：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hello.kaiser.searchviewtest.MainActivity">

    <android.support.v7.widget.SearchView
        android:id="@+id/search_view"
        style="@style/Theme.SearchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

 

看到上方佈局文件內的style嗎？
我們要在values內的styles寫入我們需要的東西。

styles.xml

<style name="Theme.SearchView" parent="Base.Widget.AppCompat.SearchView">
        <item name="searchIcon">@drawable/search_icon</item>
        <item name="closeIcon">@drawable/icon_search_bar_dismiss</item>
        ·<item name="queryHint">你好我是自訂的底文字</item>
        <!--<item name="queryBackground">@drawable/background</item>-->
    </style>
 

上面drawable內的東西就自己去google下載自己喜歡的圖面囉。這裡就不提供了。

可以試試看效果了

大概就是上述的效果。
如果不需要icon點進去，想要直接顯示SearchView的話呢？

  //原本點擊SearchIcon才會出現搜尋的那個icon，改成在整條searchView前方顯示
        mSearchView.setIconifiedByDefault(false);
 

此時就會變成這樣。

原本的searchIcon會移到前面去。
後面的closeIcon在你已經打了文字後才會出現。而且closeIcon的效果變成刪除所有文字內容。




































如此我們客製化的內容已經完成了。
但如果我們要讓前面的searchIcon消失呢？
因為styles內的設定不可以是null
所以我們就可以使用程式碼。

  //讓searchIcon消失or自訂
        ImageView searchIcon = (ImageView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
        searchIcon.setImageDrawable(null);
 

順利讓前方的null消失了！


除了style的方式外，也可以拿程式碼的方式更換自己想要的圖片。
我提供兩個示意，方法可以自己依樣畫葫蘆。上方用style可以完成的事情，用程式碼都可以完成。

  //自訂closeIcon
        ImageView closeIcon = (ImageView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
        closeIcon.setImageResource(R.drawable.search_dismiss);
        mSearchView.setQueryHint("搜尋...");

        //自訂文字size
        TextView textview = (TextView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
        textview.setTextSize(TypedValue.COMPLEX_UNIT_SP, getResources().getDimension(R.dimen.default_font_size));

 

還有一個比較特別的submit方法。
在SearchView旁邊會出現一個箭頭，按下去就是送出搜尋結果的意思。

 //設置true打了文字後旁會邊出現箭頭，代表submit
        mSearchView.setSubmitButtonEnabled(true);
 

客製化的畫面完成囉。

簡易使用：

這時候就要參照官方文檔了。
https://developer.android.com/reference/android/widget/SearchView.html

mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(MainActivity.this, "搜尋結果為：" + query, Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                Log.d("當文字改變時", "改變的文字 ：" + newText);
                return false;
            }
        });
 

如上述onQueryTTextSubmit是當你按下enter時觸發。
onQueryTextChange是當你在SearchView上打的每一個文字都會觸發的效果，詳細可以見你的Log

完整MainActivity.java程式碼：

public class MainActivity extends AppCompatActivity {

    private SearchView mSearchView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSearchView = (SearchView) findViewById(R.id.search_view);

        //讓searchIcon消失or自訂
        ImageView searchIcon = (ImageView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);
        searchIcon.setImageDrawable(null);

        //自訂closeIcon
//        ImageView closeIcon = (ImageView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
//        closeIcon.setImageResource(R.drawable.search_dismiss);
//        mSearchView.setQueryHint("搜尋...");

        //自訂文字size
//        TextView textview = (TextView) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
//        textview.setTextSize(TypedValue.COMPLEX_UNIT_SP, getResources().getDimension(R.dimen.default_font_size));

        //原本點擊SearchIcon才會出現搜尋的那個icon，改成在整條searchView前方顯示
        mSearchView.setIconifiedByDefault(false);
        //設置true打了文字後旁會邊出現箭頭，代表submit
        mSearchView.setSubmitButtonEnabled(true);

        mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(MainActivity.this, "搜尋結果為：" + query, Toast.LENGTH_SHORT).show();
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                Log.d("當文字改變時", "改變的文字 ：" + newText);
                return false;
            }
        });
    }
}

 

demo:
https://drive.google.com/open?id=0Byk75IYx-dKXZzJqWWo5b0RSSkU