MaterialDesign 之 SearchView 全面解鎖

時間  2019-11-17
標籤 materialdesign searchview 全面 解鎖 简体版
原文   原文鏈接

1、簡述

SearchView是v7包中的一個兼容性控件，它能夠單獨使用，也能夠配合menu+toolbar一塊兒使用。本文將使用第二種方式，對SearchView進行探索。最後將經過代碼實戰，實現 「仿網易雲音樂本地音樂搜索」 效果，帶你全面解鎖SearchView的UI定製及查詢功能的實現。javascript

2、常規使用

*本文重點是SearchView，因此對Toolbar的使用及注意事項在本文中將不會有過多的體現，如需瞭解可自行百度或直接查看本Demo源碼（源碼在文末）。java

一、在menu的xml文件中配置

要跟menu一塊兒使用，就必須在menu的xml文件中對其中的一個item進行actionViewClass屬性配置，如：android

<?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" xmlns:tools="http://schemas.android.com/tools"> <item android:id="@+id/menu_search" android:orderInCategory="100" android:title="搜索" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="always" /> ... </menu>複製代碼

這個item跟普通item的差異在於使用了app:actionViewClass屬性（注意是app:開頭的！！！），這裏使用的是兼容性控件裏的SearchView，因此取值"android.support.v7.widget.SearchView"。其中title的設置不會生效（通常設置了title的item，長按後會有彈出提示文字），這裏去掉也無所謂。git

二、在onCreateOptionsMenu()中獲得SearchView

咱們知道menu在建立時會回調Activity中的onCreateOptionsMenu(Menu menu)方法，經過該方法能夠獲得Menu對象，而SearchView是Menu中item的一個actionView，actionView能夠經過MenuItemCompat獲取，故，經過Menu對象能夠獲得SearchView。github

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_view, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_search);
    //經過MenuItem獲得SearchView
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    ...
    return super.onCreateOptionsMenu(menu);
}複製代碼

到這裏就能夠看到效果了：數據庫

三、對SearchView進行設置

默認展開搜索框

手淘的首頁搜索框是默認展開的，使用SearchView能夠作同樣的效果。此外，SearchView有三種默認展開的設置，效果上有略微不一樣，請結合註釋與圖片仔細觀察。app

/*------------------ SearchView有三種默認展開搜索框的設置方式，區別以下： ------------------*/
//設置搜索框直接展開顯示。左側有放大鏡(在搜索框中) 右側有叉叉 能夠關閉搜索框
mSearchView.setIconified(false);
//設置搜索框直接展開顯示。左側有放大鏡(在搜索框外) 右側無叉叉 有輸入內容後有叉叉 不能關閉搜索框
mSearchView.setIconifiedByDefault(false);
//設置搜索框直接展開顯示。左側有無放大鏡(在搜索框中) 右側無叉叉 有輸入內容後有叉叉 不能關閉搜索框
mSearchView.onActionViewExpanded();複製代碼

按順序效果依次以下：ionic

setIconified(false)

setIconifiedByDefault(false)

onActionViewExpanded()

SearchView的常規設置

//設置最大寬度
mSearchView.setMaxWidth(500);
//設置是否顯示搜索框展開時的提交按鈕
mSearchView.setSubmitButtonEnabled(true);
//設置輸入框提示語
mSearchView.setQueryHint("hint");複製代碼

比較容易，直接看下效果：ide

SearchView的事件監聽

SearchView提供的事件監聽仍是比較豐富的，通常經常使用的有打開搜索框按鈕的點擊事件、清空或關閉搜索框按鈕的點擊事件、搜索框文字變化事件等。佈局

//搜索框展開時後面叉叉按鈕的點擊事件
mSearchView.setOnCloseListener(new SearchView.OnCloseListener() {
    @Override
    public boolean onClose() {
        Toast.makeText(getApplicationContext(), "Close", Toast.LENGTH_SHORT).show();
        return false;
    }
});
//搜索圖標按鈕(打開搜索框的按鈕)的點擊事件
mSearchView.setOnSearchClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "Open", Toast.LENGTH_SHORT).show();
    }
});
//搜索框文字變化監聽
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String s) {
        Log.e("CSDN_LQR", "TextSubmit : " + s);
        return false;
    }

    @Override
    public boolean onQueryTextChange(String s) {
        Log.e("CSDN_LQR", "TextChange --> " + s);
        return false;
    }
});複製代碼

這個也比較容易，直接看下效果：

以上就是SearchView給開發者提供的常規方法調用和屬性設置，可是這並不能知足咱們的開發需求，由於開發中大部分設計師根據無論MaterialDesign的設計規範，因此大多數狀況下須要根據UI設計稿自定義SearchView的樣式了，這相對比較複雜，下面將經過實戰來學習SearchView的樣式自定義，以此來知足咱們的開發需求。

3、實戰

仿網易雲音樂本地音樂搜索，先看下效果，而後開始實戰：

一、設置Toolbar

1）建立該界面的佈局activity_search_view2.xml

指定Toolbar的高度、NaviagtionIcon、標題、字體等

<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" style="@style/Toolbar.MyStyle" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:navigationIcon="@mipmap/lg" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:title="本地音樂" app:titleTextAppearance="@style/Toolbar.TitleText" app:titleTextColor="@android:color/white"/> </LinearLayout>複製代碼

其中style指向的Toolbar.MyStyle是設置標題與NavigationIcon的距離，titleTextAppearance指向的Toolbar.TitleText是設置標題文字大小。

在style.xml中建立Toolbar的自定義樣式

<!--標題與NavigationIcon的距離-->
<style name="Toolbar.MyStyle" parent="Base.Widget.AppCompat.Toolbar"> <item name="contentInsetStart">0dp</item> <item name="contentInsetStartWithNavigation">0dp</item> </style>

<!--Toolbar標題文字大小-->
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">15sp</item> </style>複製代碼

若是不設置的話，效果很差，NavigationIcon和Toolbar的標題以前的間距看起來很大，下面看下設置先後的差異：

2）設置去除ActionBar的主題

在Style.xml中建立無ActionBar的主題，並設置主題背景色

<style name="AppTheme.NoActionBar2" parent="AppTheme">
    <item name="colorPrimary">#D33A31</item>
    <item name="colorPrimaryDark">#D33A31</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <!--設置menu中item的圖標顏色-->
    <item name="android:textColorSecondary">#ffffff</item>
</style>複製代碼

不設置textColorSecondary的話，默認menu的item圖標是黑色，下面看下設置先後的差異：


爲Activity設置主題

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.lqr.materialdesigndemo"> <application ... android:theme="@style/AppTheme"> ... <activity android:name=".SearchViewActivity2" android:screenOrientation="portrait" android:theme="@style/AppTheme.NoActionBar2"/> </application> </manifest>複製代碼

3）在Activity中設置Toolbar的代碼以下：

public class SearchViewActivity2 extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search_view2);
        // 使用Toolbar代替actionbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
    ...
}複製代碼

二、設置Menu

1）建立菜單佈局search_view.xml

跟以前的代碼相比，只是多加了幾個item而已。

<?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"
      xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/menu_search"
        android:orderInCategory="100"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"
        />
    <item
        android:id="@+id/scan_local_music"
        android:icon="@mipmap/lv"
        android:orderInCategory="100"
        android:title="掃描本地音樂"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/select_sort_way"
        android:icon="@mipmap/lt"
        android:orderInCategory="100"
        android:title="選擇排序方式"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/get_cover_lyrics"
        android:icon="@mipmap/lq"
        android:orderInCategory="100"
        android:title="獲取封面歌詞"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/imporve_tone_quality"
        android:icon="@mipmap/lw"
        android:orderInCategory="100"
        android:title="升級音質"
        app:showAsAction="never"
        />
</menu>複製代碼

2）在Activity中設置Menu的代碼以下：

public class SearchViewActivity2 extends AppCompatActivity {

    private SearchView mSearchView;
    ...
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search_view, menu);
        MenuItem searchItem = menu.findItem(R.id.menu_search);

        //經過MenuItem獲得SearchView
        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);

        return super.onCreateOptionsMenu(menu);
    }

    // 讓菜單同時顯示圖標和文字
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equalsIgnoreCase("MenuBuilder")) {
                try {
                    Method method = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    method.setAccessible(true);
                    method.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }
}複製代碼

到這裏，除了搜索框（SearchView）之外，整個佈局的效果大致上都實現了：

三、定製SearchView樣式

接下來要實現的樣式自定義有：

重點來了，咱們先來分析一下。SearchView自己不向外提供 「關閉搜索框」 和 「設置搜索框左邊的搜索圖標」 等方法，因此須要經過其餘的方式來實現樣式自定義。

考慮：

若是SearchView的佈局結構是經過xml佈局文件來實現的，那麼能夠經過SearchView.findViewById（）的方式獲得其中的部分或全部的控件；若是是經過代碼動態添加的話，那麼能夠經過反射的方式獲得咱們須要的控件，進而對控件進行樣式設置。

結論：

實現證實，SearchView的佈局結構就是使用xml佈局文件實現的，該xml文件名爲abc_search_view.xml，且基本上每一個控件都有id，這樣就能夠拿到須要的控件來實現樣式自定義了。

1）點擊返回按鈕，退出搜索框（若搜索框顯示的話）

SearchView自己沒有提供關閉搜索框的方法（反正我是沒找到啊~~），不過SearchView中正好有一個onCloseClicked()方法是用來關閉搜索框，咱們能夠經過反射來調用該方法，先來理解下該方法都作了什麼，onCloseClicked()的代碼以下：

void onCloseClicked() {
    Editable text = this.mSearchSrcTextView.getText();
    //若是搜索框中有文字，則清除其中的文字
    if(TextUtils.isEmpty(text)) {
        if(this.mIconifiedByDefault && (this.mOnCloseListener == null || !this.mOnCloseListener.onClose())) {
            this.clearFocus();
            this.updateViewsVisibility(true);
        }
    } 
    //不然關閉搜索框
    else {
        this.mSearchSrcTextView.setText("");
        this.mSearchSrcTextView.requestFocus();
        this.setImeVisibility(true);
    }
}複製代碼

這裏要考慮到，當搜索框顯示時，按下Toolbar的返回按鈕關閉搜索框，不然就關閉當前界面。由於搜索框也有id，因此咱們能夠經過id能夠獲得搜索框控件，用來判斷當前搜索框的顯隱狀態。結合SearchView內部的onCloseClicked()方法，最後Toolbar返回按鈕的點擊事件代碼能夠這麼寫：

public class SearchViewActivity2 extends AppCompatActivity {

    private SearchView mSearchView;
    private SearchView.SearchAutoComplete mSearchAutoComplete;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search_view2);
        ...
        //Toolbar返回按鈕的點擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mSearchAutoComplete.isShown()) {
                    try {
                        //若是搜索框中有文字，則會先清空文字，但網易雲音樂是在點擊返回鍵時直接關閉搜索框
                        mSearchAutoComplete.setText("");
                        Method method = mSearchView.getClass().getDeclaredMethod("onCloseClicked");
                        method.setAccessible(true);
                        method.invoke(mSearchView);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                } else {
                    finish();
                }
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search_view, menu);
        MenuItem searchItem = menu.findItem(R.id.menu_search);

        //經過MenuItem獲得SearchView
        mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
        //經過id獲得搜索框控件
        mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);

        return super.onCreateOptionsMenu(menu);
    }

    ...
}複製代碼

2）隱藏搜索框左邊的搜索圖標

搜索框中左邊的搜索圖標不是一個控件，因此沒辦法經過id獲得，但好在能夠經過設置style的方式來修改SearchView全部的圖標。方法也很簡單，只需建立一個style（這裏取名Widget.SearchView）繼承自Widget.AppCompat.SearchView，而後替換須要修改的屬性便可。先看下Widget.AppCompat.SearchView的父級Base.Widget.AppCompat.SearchView吧：

能夠看到，這個父級style提供了SearchView中幾乎全部的Icon屬性，這意味着在圖標定製上能夠有很大拓展性。其中，layout是指定SearchView的佈局，原始佈局就是abc_search_view.xml，咱們通常不會去動這個屬性。
這裏咱們只須要去掉搜索框左邊的圖標（即：searchHintIcon），直接設置爲@null就行了，以下修改style文件中的Widget.SearchView主題：

<!--沒有ActionBar主題，自定義SearchView樣式-->
<style name="AppTheme.NoActionBar2" parent="AppTheme"> ... <!--引入SearchView的自定義樣式--> <item name="searchViewStyle">@style/Widget.SearchView</item> </style>

<style name="Widget.SearchView" parent="Widget.AppCompat.SearchView">
    <!--修改搜索框提示文字--> <item name="defaultQueryHint">搜索本地歌曲</item> <!--修改打開搜索框的搜索按鈕的圖標--> <item name="searchIcon">@mipmap/m5</item> <!--修改搜索框左邊的搜索按鈕圖標--> <item name="searchHintIcon">@null</item> </style>複製代碼

3）設置搜索框的提示文字

修改提示文字內容

修改搜索框提示文字的方式有兩種，一種就是修改SearchView的style，如上一步中，修改Widget.AppCompat.SearchView的defaultQueryHint屬性；另外一種方式是調用SearchView的setQueryHint()來修改。這兩種方式均可以，若是同時用這兩種方式來設置搜索框的提示語，則最終的提示內容將以代碼設置方式爲主。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_view, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_search);

    //經過MenuItem獲得SearchView
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);

    //經過代碼方式修改提示文字內容
    mSearchView.setQueryHint("搜索本地歌曲by code");

｝複製代碼

修改提示文字樣式

SearchView也沒有提供任何直接修改搜索框提示文字樣式的方法，但既然咱們能夠經過id獲得搜索框控件，那設置提示文字的樣式便不是什麼問題了，代碼以下：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_view, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_search);

    //經過MenuItem獲得SearchView
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
    mSearchView.setQueryHint("搜索本地歌曲by code");

    //設置輸入框提示文字樣式
    mSearchAutoComplete.setHintTextColor(getResources().getColor(android.R.color.darker_gray));
    mSearchAutoComplete.setTextColor(getResources().getColor(android.R.color.background_light));
    mSearchAutoComplete.setTextSize(14);

    return super.onCreateOptionsMenu(menu);
}複製代碼

4）根據搜索框中有無文字，來顯隱搜索框右邊的叉叉

這個有點像searchView.onActionViewExpanded()的效果，惟一的區別就是搜索框不能是默認展開的，這要怎麼辦呢？經過觀察onActionViewExpanded()的源碼，能夠發現該方法中調用了setIconified(false)！！！再聯想到setIconified(false)自己就有讓搜索框默認展開的效果，這是否是意味着，只要讓onActionViewExpanded()的setIconified(false)改成setIconified(true)就行了呢？答案是是的。並且不須要重寫SearchView，由於onActionViewExpanded()和setIconified(true)是能夠搭配使用的，只要依次調用這兩個方法就能夠實現這種效果了，代碼以下：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_view, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_search);

    //經過MenuItem獲得SearchView
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
    mSearchView.setQueryHint("搜索本地歌曲by code");

    //設置輸入框提示文字樣式
    mSearchAutoComplete.setHintTextColor(getResources().getColor(android.R.color.darker_gray));
    mSearchAutoComplete.setTextColor(getResources().getColor(android.R.color.background_light));
    mSearchAutoComplete.setTextSize(14);

    //設置搜索框有字時顯示叉叉，無字時隱藏叉叉
    mSearchView.onActionViewExpanded();
    mSearchView.setIconified(true);

    //修改搜索框控件間的間隔（這樣只是爲了在細節上更加接近網易雲音樂的搜索框）
    LinearLayout search_edit_frame = (LinearLayout) mSearchView.findViewById(R.id.search_edit_frame);
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) search_edit_frame.getLayoutParams();
    params.leftMargin = 0;
    params.rightMargin = 0;
    search_edit_frame.setLayoutParams(params);
    return super.onCreateOptionsMenu(menu);
}複製代碼

四、實現搜索提示功能

上面咱們已經學習了SearchView的UI定製，下面將經過SearchView自身或結合ListView的方式（RecyclerView應該也同樣吧，還沒試過）直接學習SearchView搜索提示功能的實現，繼續完善 「仿網易雲音樂本地音樂搜索」 效果。

1）彈出式搜索提示

SearchView自己的搜索框就是AutoCompleteTextView的一個子類，有圖有真相。

AutoCompleteTextView是能夠經過設置適配器來實現文本補全提示功能的，因此，SearchView中的搜索框同樣也能夠，不過SearchView提供了setSuggestionsAdapter()方法能夠直接爲搜索框設置適配器，須要注意的是，這個適配器必須跟數據庫的Cursor對象一塊兒使用，例如：

mSearchView.setSuggestionsAdapter(new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1}));複製代碼

通常開發中遇到的需求是一邊輸入關鍵字一邊顯示搜索結果，因此須要監聽搜索框的文字輸入，一旦文字變化就查詢數據庫，更新搜索結果，因此代碼能夠這麼寫：

// 監聽搜索框文字變化
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String s) {
        return false;
    }

    @Override
    public boolean onQueryTextChange(String s) {
        Cursor cursor = TextUtils.isEmpty(s) ? null : queryData(s);
        // 不要頻繁建立適配器，若是適配器已經存在，則只須要更新適配器中的cursor對象便可。
        if (mSearchView.getSuggestionsAdapter() == null) {
            mSearchView.setSuggestionsAdapter(new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1}));
        } else {
            mSearchView.getSuggestionsAdapter().changeCursor(cursor);
        }

        return false;
    }
});複製代碼

對於SimpleCursorAdapter的使用，不熟悉的本身百度學習吧，下面看效果：

能夠發現，當輸入第一個文字"a"時，沒有什麼反應，當輸入第二個文字"a"時，彈出了一個列表彈窗，這是因爲AutoCompleteTextView自己默認觸發查詢動做的條件就是該控件中的文字至少要2個以上，若是咱們想修改爲只要有一個文字就觸發查詢的話，則能夠這麼作：

  1. 拿到SearchView中搜索框控件
  2. 調用setThreshold()設置觸發查詢的字數

直接上代碼：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_view, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_search);

    //經過MenuItem獲得SearchView
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchAutoComplete = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
    ...
    //設置觸發查詢的最少字符數（默認2個字符纔會觸發查詢）
    mSearchAutoComplete.setThreshold(1);
｝複製代碼

再看下效果：

好了，彈出式搜索功能作完了，下面貼出條目佈局item_layout.xml和queryData()方法的代碼實現：

① item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/text1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:minHeight="?android:attr/listPreferredItemHeightSmall" android:paddingLeft="10dp" android:paddingRight="10dp" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@android:color/black"/> </LinearLayout>複製代碼

② queryData()

只是簡單的建立一個數據庫（music.db），庫中有一張tb_music表，表中有_id和name兩個字段，而後填充數據，查詢數據，相對比較簡單，這裏就不作過多解釋了。

private Cursor queryData(String key) {
    SQLiteDatabase db = SQLiteDatabase.openOrCreateDatabase(getFilesDir() + "music.db", null);
    Cursor cursor = null;
    try {
        String querySql = "select * from tb_music where name like '%" + key + "%'";
        cursor = db.rawQuery(querySql, null);
    } catch (Exception e) {
        e.printStackTrace();
        String createSql = "create table tb_music (_id integer primary key autoincrement,name varchar(100))";
        db.execSQL(createSql);

        String insertSql = "insert into tb_music values (null,?)";
        for (int i = 0; i < Cheeses.sCheeseStrings.length; i++) {
            db.execSQL(insertSql, new String[]{Cheeses.sCheeseStrings[i]});
        }

        String querySql = "select * from tb_music where name like '%" + key + "%'";
        cursor = db.rawQuery(querySql, null);
    }
    return cursor;
}複製代碼

2）結合ListView實現搜索提示

雖然上面已經實現了搜索提示的功能，但網易雲音樂本地搜索出來的結果並非彈出式的，而是在SearchView下方以列表的方式呈現，要作到這樣的效果，就必需讓SearchView結合ListView一塊兒使用。其實這並不難，由於AutoCompleteTextView設置的適配器跟ListView要設置的適配器是同樣的，直接將上邊的適配器設置給ListView便可。

// 監聽搜索框文字變化
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String s) {
        return false;
    }

    @Override
    public boolean onQueryTextChange(String s) {
        Cursor cursor = TextUtils.isEmpty(s) ? null : queryData(s);
        // 設置或更新ListView的適配器
        setAdapter(cursor);
        return false;
    }
});

private void setAdapter(Cursor cursor) {
    if (mLv.getAdapter() == null) {
        SimpleCursorAdapter adapter = new SimpleCursorAdapter(SearchViewActivity2.this, R.layout.item_layout, cursor, new String[]{"name"}, new int[]{R.id.text1});
        mLv.setAdapter(adapter);
    } else {
        ((SimpleCursorAdapter) mLv.getAdapter()).changeCursor(cursor);
    }
}複製代碼

這樣就完成了，雖然樣式上是醜了點，但，那又怎樣，呵呵~

最後附上Demo連接

github.com/GitLqr/Mate…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程