MaterialDesign 之 SearchView 全面解鎖

DennisHa 7年前發布 | 19K 次閱讀 安卓開發 Android開發 移動開發

一、簡述

SearchView是v7包中的一個兼容性控件,它可以單獨使用,也可以配合menu+toolbar一起使用。本文將使用第二種方式,對SearchView進行探索。最后將通過代碼實戰,實現 “仿網易云音樂本地音樂搜索” 效果,帶你全面解鎖SearchView的UI定制及查詢功能的實現。

二、常規使用

*本文重點是SearchView,所以對Toolbar的使用及注意事項在本文中將不會有過多的體現,如需了解可自行百度或直接查看本Demo源碼(源碼在文末)。

1、在menu的xml文件中配置

要跟menu一起使用,就必須在menu的xml文件中對其中的一個item進行actionViewClass屬性配置,如:

<?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,長按后會有彈出提示文字),這里去掉也無所謂。

2、在onCreateOptionsMenu()中得到SearchView

我們知道menu在創建時會回調Activity中的onCreateOptionsMenu(Menu menu)方法,通過該方法可以得到Menu對象,而SearchView是Menu中item的一個actionView,actionView可以通過MenuItemCompat獲取,故,通過Menu對象可以得到SearchView。

@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);
}

到這里就可以看到效果了:

3、對SearchView進行設置

默認展開搜索框

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

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

按順序效果依次如下:

setIconified(false)

setIconifiedByDefault(false)

onActionViewExpanded()

SearchView的常規設置

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

比較容易,直接看下效果:

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;
}

});</code></pre>

這個也比較容易,直接看下效果:

以上就是SearchView給開發者提供的常規方法調用和屬性設置,但是這并不能滿足我們的開發需求,因為開發中大部分設計師根據不管MaterialDesign的設計規范,所以大多數情況下需要根據UI設計稿自定義SearchView的樣式了,這相對比較復雜,下面將通過實戰來學習SearchView的樣式自定義,以此來滿足我們的開發需求。

三、實戰

仿網易云音樂本地音樂搜索,先看下效果,然后開始實戰:

1、設置Toolbar

1)創建該界面的布局activity_search_view2.xml

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="

<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></code></pre>

其中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></code></pre>

如果不設置的話,效果不好,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="

<application
    ...
    android:theme="@style/AppTheme">
    ...

    <activity
        android:name=".SearchViewActivity2"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.NoActionBar2"/>
</application>

</manifest></code></pre>

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);
}
...

}</code></pre>

2、設置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);
}

}</code></pre>

到這里,除了搜索框(SearchView)以外,整個布局的效果大體上都實現了:

3、定制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);
}

...

}</code></pre>

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></code></pre>

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");

}</code></pre>

修改提示文字樣式

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);

}</code></pre>

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);

}</code></pre>

4、實現搜索提示功能

上面我們已經學習了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;
}

});</code></pre>

對于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);

}</code></pre>

再看下效果:

好了,彈出式搜索功能做完了,下面貼出條目布局item_layout.xml和queryData()方法的代碼實現:

① item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="

<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></code></pre>

② 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;

}</code></pre>

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); } }</code></pre>

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

最后附上Demo鏈接

https://github.com/GitLqr/MaterialDesignDemo

 

 本文由用戶 DennisHa 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!