1. 程式人生 > >SearchView和RecyclerView實現搜尋介面,2018/1/1 04

SearchView和RecyclerView實現搜尋介面,2018/1/1 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) {
                        //處理點選搜尋
                    }
                });
            }
        }
    }