SearchView和RecyclerView實現搜尋介面,2018/1/1 04
阿新 • • 發佈:2019-01-04
<?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"
android:orientation ="vertical"
tools:context="com.example.searchdemo.MainActivity">
<RelativeLayout
android:layout_marginTop="24px"
android:layout_marginBottom="24px"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginRight ="44px"
android:layout_marginLeft="33px"
android:id="@+id/search_cancel_text_view"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:text="取消"
android:textSize="44px"
android:textColor ="@color/yi_666666"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v7.widget.SearchView
android:id="@+id/search_search_view"
android:layout_toLeftOf="@id/search_cancel_text_view"
android:layout_marginLeft="44px"
app:iconifiedByDefault="true"
app:searchHintIcon="@mipmap/cm_search"
app:searchIcon="@mipmap/cm_search"
app:defaultQueryHint="輸入姓名搜尋"
app:queryBackground="@drawable/shape_round_rectangle_f5f5f5_2"
android:background="@drawable/shape_round_rectangle_f5f5f5_2"
android:layout_width="match_parent"
android:layout_height="78px"/>
</RelativeLayout>
<View
android:background="@color/yi_dbdbdb"
android:layout_width="match_parent"
android:layout_height="2px"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="44px"
android:layout_marginTop="44px"
android:textSize="40px"
android:textColor="@color/yi_666666"
android:text="最近搜尋"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/search_clear_text_view"
android:layout_alignParentRight="true"
android:layout_marginRight="44px"
android:layout_marginTop="44px"
android:textSize="40px"
android:textColor="@color/yi_666666"
android:text="清空"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="33px"
android:id="@+id/search_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
其中iconifiedByDefault:控制進入頁面時是否直接為搜尋狀態
true為顯示搜尋提示圖片(searchIcon)點選之後進入搜尋狀態,之後搜尋圖片顯示為searchHintIcon,提示文字為defaultQueryHint,搜尋狀態的背景為queryBackground。
false則直接為搜尋狀態。
程式碼實現:
一,SearchView 初始設定
//找到SearchView中的textview ,從而修改輸入的文字顏色字型大小等
LinearLayout linearLayout1 = (LinearLayout) mSearchView.getChildAt(0);
LinearLayout linearLayout2 = (LinearLayout) linearLayout1.getChildAt(2);
LinearLayout linearLayout3 = (LinearLayout) linearLayout2.getChildAt(1);
mAutoCompleteTextView = (AutoCompleteTextView) linearLayout3.getChildAt(0);
mAutoCompleteTextView.setTextSize(13);
mAutoCompleteTextView.setTextColor(getResources().getColor(R.color.colorAccent));
mSearchCancelTextView.setOnClickListener(this);
mSearchClearTextView.setOnClickListener(this);
mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
@Override
public boolean onQueryTextSubmit(String query) {
//當點選輸入鍵盤上的確定 按鈕時的回撥返回輸入的搜尋的資料
//這裡是通過sp儲存資料,並且是把所有搜尋的資料轉成json之後報錯
mSearchNames.add(query);
SharedPreferencesHelper.getEditor().putString("search_names", JsonUtil.ListToJsonString(mSearchNames)).commit();
return false;
}
@Override
public boolean onQueryTextChange(String newText) {
mQueryText=newText;
//為空則為取消狀態,點選取消可以返回上一頁
//當有資料時則為搜尋狀態,點選搜尋
if(mQueryText.equals("")){
mState=0;
mSearchCancelTextView.setText("取消");
}else{
mState=1;
mSearchCancelTextView.setText("搜尋");
}
return true;
}
});
二,RecyclerView初始設定
其中涉及到了FlexFoxLayout這是google推出的一個能夠動態顯示textView的佈局,因為直接使用感覺太過麻煩需要建好多textView,我就改為使用RecyclerView加FlexboxLayoutManager 來實現同樣的效果。
FlexFoxLayout Github連結
//從sp中取出之前搜尋過的內容
String searchNames = SharedPreferencesHelper.getSharedPreferences().getString("search_names", "");
//裝成list集合
mSearchNames = JsonUtil.JsonToListString(searchNames);
FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
mRecyclerView.setLayoutManager(flexboxLayoutManager);
mSearchAdapter = new MySearchAdapter();
mRecyclerView.setAdapter(mSearchAdapter);
private class MySearchAdapter extends RecyclerView.Adapter<SearchViewHolder> {
@Override
public SearchViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
TextView textView=new TextView(MainActivity.this);
textView.setTextColor(getResources().getColor(R.color.colorPrimary));
textView.setTextSize(16);
//必須是FlexboxLayoutManager下的LayoutParams
FlexboxLayoutManager.LayoutParams layoutParams= new FlexboxLayoutManager.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(44,30,44,30);
textView.setLayoutParams(layoutParams);
return new SearchViewHolder(textView);
}
@Override
public void onBindViewHolder(SearchViewHolder holder, int position) {
holder.bindViewHolder();
}
@Override
public int getItemCount() {
return mSearchNames.size();
}
}
private class SearchViewHolder extends RecyclerView.ViewHolder {
private SearchViewHolder(View itemView) {
super(itemView);
}
private void bindViewHolder(){
if(itemView instanceof TextView) {
//如果itemView是TextView 進行初始化搜尋過的資料
((TextView) itemView).setText(mSearchNames.get(mSearchNames.size()-getAdapterPosition()-1));
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//處理點選搜尋
}
});
}
}
}