搜索功能是Android常見的功能之一凉蜂，在v7包就有一個(gè)控件SearchView，用來實(shí)現(xiàn)搜索功能，而在普通widget包中也有一個(gè)SearchView尼摹，兩者用處一樣，只不過在使用方式上有一點(diǎn)區(qū)別剂娄，同時(shí)widget包中的SearchView只能在3.0（API 11）版本以上使用蠢涝，而v7包中的SearchView能兼容到2.1（API 7）.
今天介紹的就是v7包中的SearchView.
使用前添加依賴：
compile 'com.android.support:appcompat-v7:25.3.1'
一、單獨(dú)使用
<?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.SearchView
android:id="@+id/searview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:iconifiedByDefault="false"
app:queryHint="請(qǐng)輸入搜索內(nèi)容" />
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
public class MainActivity extends AppCompatActivity {
private SearchView mSearchView;
private ListView mListView;
private ArrayAdapter mAdapter;
private String [] data = {"Java","kotlin","C","C++","C#","Python","PHP","JavaScript"};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mListView = (ListView) findViewById(R.id.listview);
mAdapter = new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, data);
mListView.setAdapter(mAdapter);
mListView.setTextFilterEnabled(true);
mSearchView = (SearchView) findViewById(R.id.searview);
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
return false;
}
@Override
public boolean onQueryTextChange(String newText) {
mAdapter.getFilter().filter(newText);
return false;
}
});
}
}
這里為了書寫簡便就沒有搭配RecyclerView了阅懦，而是搭配ListView使用和二，為SearchView設(shè)置了一個(gè)監(jiān)聽，當(dāng)搜索框內(nèi)容變化時(shí)耳胎，ListView動(dòng)態(tài)過濾內(nèi)容.
二惯吕、SearchView常用屬性、方法
1怕午、搜索圖標(biāo)
默認(rèn)樣式：搜索框默認(rèn)是關(guān)閉的废登，左側(cè)搜索圖標(biāo)在搜索框中，可以通過右側(cè)叉叉關(guān)閉搜索框
默認(rèn)樣式
(1) 方法SearchView.setIconified(false);
搜索框默認(rèn)是開啟的郁惜，左側(cè)搜索圖標(biāo)在搜索框中堡距，可以通過右側(cè)叉叉關(guān)閉搜索框
setIconified(false)
(2) 方法SearchView.setIconifiedByDefault(false);
或者屬性app:iconifiedByDefault="false"
搜索框默認(rèn)是開啟的，左側(cè)搜索圖標(biāo)在搜索框外
右側(cè)一開始沒有叉叉，有輸入內(nèi)容后出現(xiàn)叉叉羽戒，叉叉只能清除搜索框內(nèi)容缤沦，無法關(guān)閉搜索框
app:iconifiedByDefault="false"
(3) 修改搜索圖標(biāo)
app:searchIcon=""
2、搜索框中提示內(nèi)容
app:queryHint=" "
或者方法：SearchView.setQueryHint(...)
3易稠、關(guān)閉圖標(biāo)（就是那個(gè)叉叉）
app:closeIcon=" "
4缸废、搜索框展開時(shí)顯示提交按鈕
SearchView.setSubmitButtonEnabled(true);
5、事件監(jiān)聽
//搜索圖標(biāo)按鈕的點(diǎn)擊事件
mSearchView.setOnSearchClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "打開搜索框", Toast.LENGTH_SHORT).show();
}
});
//搜索框內(nèi)容變化監(jiān)聽
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {//點(diǎn)擊提交按鈕時(shí)
Toast.makeText(MainActivity.this, "Submit---提交", Toast.LENGTH_SHORT).show();
return true;
}
@Override
public boolean onQueryTextChange(String newText) {//搜索框內(nèi)容變化時(shí)
if (!TextUtils.isEmpty(newText)) {
// mListView.setFilterText(newText);
mAdapter.getFilter().filter(newText);
} else {
mListView.clearTextFilter();
}
return true;
}
});
//搜索框展開時(shí)點(diǎn)擊叉叉按鈕關(guān)閉搜索框的點(diǎn)擊事件
mSearchView.setOnCloseListener(new SearchView.OnCloseListener() {
@Override
public boolean onClose() {
Toast.makeText(MainActivity.this, "關(guān)閉搜索框", Toast.LENGTH_SHORT).show();
return false;
}
});
三驶社、搭配Toolbar使用
SearchView搭配Toolbar也是非常常見的一種使用方式.
1企量、方式一
布局文件
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextColor="@android:color/white" />
</LinearLayout>
菜單文件
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/item_searchview"
android:title="沒什么鳥用的title"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always" />
</menu>
Activity中
public class MainActivity extends AppCompatActivity {
private SearchView mSearchView;
private Toolbar mToolbar;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
}
/**
* 重寫此方法顯示Menu Item
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
MenuItem menuItem = menu.findItem(R.id.item_searchview);
//通過MenuItem得到SearchView
mSearchView = (SearchView) MenuItemCompat.getActionView(menuItem);
return true;
}
}
1）這個(gè)menu item跟普通item的差別在于使用了app:actionViewClass屬性，app:actionViewClass="android.support.v7.widget.SearchView"表明使用了v7包下的SearchView.
2）注意：這里我們使用的是v7包下的SearchView衬吆，所以不要寫成android:actionViewClass="android.widget.SearchView".
3）這里的title并沒有什么鳥用梁钾，因?yàn)槭褂盟阉鞴δ軙r(shí)我們一般不會(huì)把它放進(jìn)溢出菜單中，但是不寫是會(huì)報(bào)錯(cuò)的.
4）如果在android:showAsAction屬性中加上collapseActionView屬性逊抡，那么MenuItem的icon屬性必須就要加上了姆泻，不然會(huì)顯示title文字的.
同時(shí)點(diǎn)開后的樣式也不一樣了，左側(cè)會(huì)出現(xiàn)一個(gè)箭頭冒嫡，點(diǎn)擊箭頭退出搜索模式.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/item_searchview"
android:title="沒什么鳥用的title"
app:actionViewClass="android.support.v7.widget.SearchView"
android:icon="@drawable/icon_search"
app:showAsAction="always|collapseActionView" />
</menu>
2拇勃、方式二
因?yàn)門oolbar本身是一個(gè)ViewGroup，可以添加子View孝凌，所以我們可以把SearchView當(dāng)做子View添加到Toolbar上.
布局文件
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextColor="@android:color/white" >
<android.support.v7.widget.SearchView
android:id="@+id/searview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
app:queryHint="請(qǐng)輸入搜索內(nèi)容" />
</android.support.v7.widget.Toolbar>>
</LinearLayout>
Activity中
public class MainActivity extends AppCompatActivity {
private SearchView mSearchView;
private Toolbar mToolbar;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
mSearchView = (SearchView) mToolbar.findViewById(R.id.searview);
// do something
}
}
四方咆、修改SearchView樣式
觀看SearchView源碼可以發(fā)現(xiàn)，SearchView本身布局是通過xml布局文件來實(shí)現(xiàn)的.
public SearchView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
......
final LayoutInflater inflater = LayoutInflater.from(context);
final int layoutResId = a.getResourceId(
R.styleable.SearchView_layout, R.layout.abc_search_view); //☆ 看這里
inflater.inflate(layoutResId, this, true);
mSearchSrcTextView = (SearchAutoComplete) findViewById(R.id.search_src_text);
mSearchSrcTextView.setSearchView(this);
mSearchEditFrame = findViewById(R.id.search_edit_frame);
mSearchPlate = findViewById(R.id.search_plate);
mSubmitArea = findViewById(R.id.submit_area);
mSearchButton = (ImageView) findViewById(R.id.search_button);
mGoButton = (ImageView) findViewById(R.id.search_go_btn);
mCloseButton = (ImageView) findViewById(R.id.search_close_btn);
mVoiceButton = (ImageView) findViewById(R.id.search_voice_btn);
mCollapsedIcon = (ImageView) findViewById(R.id.search_mag_icon);
......
}
找到那個(gè)布局文件
<?xml version="1.0" encoding="utf-8"?>
<!--
/*
* Copyright (C) 2010 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/search_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!-- This is actually used for the badge icon *or* the badge label (or neither) -->
<TextView
android:id="@+id/search_badge"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginBottom="2dip"
android:drawablePadding="0dip"
android:textAppearance="?attr/textAppearanceMedium"
android:textColor="?attr/textColorPrimary"
android:visibility="gone" />
<ImageView
android:id="@+id/search_button"
style="?attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:focusable="true"
android:contentDescription="@string/searchview_description_search" />
<LinearLayout
android:id="@+id/search_edit_frame"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginStart="8dip"
android:layout_marginEnd="8dip"
android:orientation="horizontal"
android:layoutDirection="locale">
<ImageView
android:id="@+id/search_mag_icon"
android:layout_width="@dimen/dropdownitem_icon_width"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:layout_marginStart="@dimen/dropdownitem_text_padding_left"
android:layout_gravity="center_vertical"
android:visibility="gone" />
<!-- Inner layout contains the app icon, button(s) and EditText -->
<LinearLayout
android:id="@+id/search_plate"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
<view class="android.widget.SearchView$SearchAutoComplete"
android:id="@+id/search_src_text"
android:layout_height="36dip"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:paddingStart="@dimen/dropdownitem_text_padding_left"
android:paddingEnd="@dimen/dropdownitem_text_padding_right"
android:singleLine="true"
android:ellipsize="end"
android:background="@null"
android:inputType="text|textAutoComplete|textNoSuggestions"
android:imeOptions="actionSearch"
android:dropDownHeight="wrap_content"
android:dropDownAnchor="@id/search_edit_frame"
android:dropDownVerticalOffset="0dip"
android:dropDownHorizontalOffset="0dip" />
<ImageView
android:id="@+id/search_close_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingStart="8dip"
android:paddingEnd="8dip"
android:layout_gravity="center_vertical"
android:background="?attr/selectableItemBackgroundBorderless"
android:focusable="true"
android:contentDescription="@string/searchview_description_clear" />
</LinearLayout>
<LinearLayout
android:id="@+id/submit_area"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="@+id/search_go_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="16dip"
android:paddingEnd="16dip"
android:background="?attr/selectableItemBackgroundBorderless"
android:visibility="gone"
android:focusable="true"
android:contentDescription="@string/searchview_description_submit" />
<ImageView
android:id="@+id/search_voice_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:paddingStart="16dip"
android:paddingEnd="16dip"
android:background="?attr/selectableItemBackgroundBorderless"
android:visibility="gone"
android:focusable="true"
android:contentDescription="@string/searchview_description_voice" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
ok蟀架，既然是一個(gè)布局文件瓣赂，而且每一個(gè)組件都有id，那么直接通過SearchView.findViewById（）找到你想要改變的組件片拍，然后設(shè)置你想要的樣式不就可以了.
方式1 ：代碼修改
//搜索框
SearchView.SearchAutoComplete tv = (SearchView.SearchAutoComplete) mSearchView.findViewById(R.id.search_src_text);
tv.setTextColor(Color.WHITE);
tv.setHintTextColor(Color.WHITE);
//搜索按鈕
ImageView ivSearch1 = (ImageView) mSearchView.findViewById(R.id.search_button);
ivSearch1.setImageResource(R.drawable.a);
//關(guān)閉按鈕
ImageView ivClose = (ImageView) mSearchView.findViewById(R.id.search_close_btn);
ivClose.setImageResource(R.drawable.b);
更多的樣式你可以自己去設(shè)置煌集，這里就不一一設(shè)置了.
方式2：style修改
原生的SearchView樣式像下面這樣:
<style name="Base.Widget.AppCompat.SearchView" parent="android:Widget">
<item name="layout">@layout/abc_search_view</item>
<item name="queryBackground">@drawable/abc_textfield_search_material</item>
<item name="submitBackground">@drawable/abc_textfield_search_material</item>
<item name="closeIcon">@drawable/abc_ic_clear_material</item>
<item name="searchIcon">@drawable/abc_ic_search_api_material</item>
<item name="searchHintIcon">@drawable/abc_ic_search_api_material</item>
<item name="goIcon">@drawable/abc_ic_go_search_api_material</item>
<item name="voiceIcon">@drawable/abc_ic_voice_search_api_material</item>
<item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
<item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>
</style>
我們可以在上面做一些修改：
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:layout">@layout/abc_search_view</item>
<item name="queryBackground">@drawable/abc_textfield_search_material</item>
<item name="submitBackground">@drawable/abc_textfield_search_material</item>
<item name="closeIcon">@drawable/abc_ic_clear_material</item>
<item name="searchIcon">@drawable/abc_ic_search_api_material</item>
<item name="goIcon">@drawable/abc_ic_go_search_api_material</item>
<item name="voiceIcon">@drawable/abc_ic_voice_search_api_material</item>
<item name="commitIcon">@drawable/abc_ic_commit_search_api_mtrl_alpha</item>
<item name="suggestionRowLayout">@layout/abc_search_dropdown_item_icons_2line</item>
<item name="defaultQueryHint">請(qǐng)輸入搜索內(nèi)容</item>
<item name="searchHintIcon">@drawable/icon_search</item>
</style>
然后引用該樣式即可，想要全局修改直接放在主題style中：
<item name="searchViewStyle">@style/MySearchViewStyle</item>
只想修改某一個(gè)的話給那個(gè)SearchView引用即可
style="@style/MySearchViewStyle"
