使用SearchView+RecyclerView做搜尋框

阿新 • • 發佈：2019-01-06

安卓搜尋框分別使用了EditText+RecycleView和SearchView+RecycleView都實現了一遍對比下兩種的區別！
首先是一張效果圖！
這裡寫圖片描述
一、EditText+RecycleView
先丟上程式碼！

Layout
<?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">

    <EditText
        android:id="@+id/search_tag_input_edit"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background 
="@drawable/shape_tag_search"
        android:layout_margin="8dp"
        android:hint="請輸入檢索Tag"
        android:drawableLeft="@mipmap/ic_search"
        android:drawablePadding="3dp"
        android:padding="8dp"
        android:maxLength="20"
        android:inputType="text"
        android:maxLines 
="1"
        android:textSize="12sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/search_tag_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:listSelector="@android:color/transparent" />
</LinearLayout>

Activity
package net.yeah.lililearn.searchrecyclerview;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;

import net.yeah.lililearn.searchrecyclerview.adapter.SearchAdapter;
import net.yeah.lililearn.searchrecyclerview.model.SearchTag;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private EditText mSearchTagEdit;
    private RecyclerView mRecyclerView;
    private Handler handler = new Handler();
    private List<SearchTag> searchTagList;
    private SearchAdapter mAdapter;

    private Runnable delayRun = new Runnable() {
        @Override
        public void run() {
            searchTags(mSearchTagEdit.getText().toString().trim());
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initAdapter();
        setEvent();
    }

    private void initView() {
        mSearchTagEdit = (EditText) findViewById(R.id.search_tag_input_edit);
        mRecyclerView = (RecyclerView) findViewById(R.id.search_tag_recycler);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setAnimation(null);
    }

    private void initAdapter() {
        searchTagList = new ArrayList<>();
        mAdapter = new SearchAdapter(searchTagList, this);
        mRecyclerView.setAdapter(mAdapter);
    }

    private void setEvent() {
        mSearchTagEdit.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //no-op
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //no-op
            }

            @Override
            public void afterTextChanged(Editable editable) {
                //輸入完成後嚴重8毫秒在請求
                if (delayRun != null) {
                    handler.removeCallbacks(delayRun);
                }
                handler.postDelayed(delayRun, 800);
            }
        });

    }

    /**
     * 請求資料
     * @param searchTagName
     */
    private void searchTags(String searchTagName) {
        List<SearchTag> searchTags=new ArrayList<>();
        searchTags.add(new SearchTag("測試資料1"));
        searchTags.add(new SearchTag("測試資料2"));
        searchTags.add(new SearchTag("測試資料3"));
        searchTags.add(new SearchTag("測試資料4"));
        searchTags.add(new SearchTag("測試資料5"));
        searchTags.add(new SearchTag("測試資料6"));
        searchTags.add(new SearchTag("測試資料7"));
        searchTags.add(new SearchTag("測試資料8"));
        searchTags.add(new SearchTag("測試資料9"));
        searchTags.add(new SearchTag("測試資料10"));
        searchTagList.clear();
        searchTagList.addAll(searchTags);
        mAdapter.notifyDataSetChanged();
    }
}

adapter

package net.yeah.lililearn.searchrecyclerview.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebViewFragment;
import android.widget.RelativeLayout;
import android.widget.TextView;

import net.yeah.lililearn.searchrecyclerview.R;
import net.yeah.lililearn.searchrecyclerview.model.SearchTag;

import java.util.List;

import lombok.NonNull;


public class SearchAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static final int VIEW_TYPE_TOP = 0;
    private static final int VIEW_TYPE_ITEM = 1;
    private static final int VIEW_TYPE_END = 2;
    private static final int VIEW_TYPE_EMPTY = 3;

    private List<SearchTag> searchTagList;
    private Context context;

    public SearchAdapter(@NonNull List<SearchTag> Tags,
                         @NonNull Context context) {
        this.context = context;
        this.searchTagList = Tags;
        Log.e("11",searchTagList.toString());
    }

    @Override
    public int getItemViewType(int position) {
        Log.e("11",searchTagList.toString());
        if (searchTagList.isEmpty()) {
            if (position == 0) {
                return VIEW_TYPE_EMPTY;
            }
            return VIEW_TYPE_END;
        }
        if (position == 0) {
            return VIEW_TYPE_TOP;
        } else if (position == getItemCount() - 1) {
            return VIEW_TYPE_END;
        }
        return VIEW_TYPE_ITEM;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case VIEW_TYPE_TOP: {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_goods_tag_top, parent, false);
                return new GoodsTagTopHolder(view);
            }
            case VIEW_TYPE_ITEM: {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_goods_tag_item, parent, false);
                return new GoodsTagItemHolder(view);
            }
            case VIEW_TYPE_END: {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_goods_tag_end, parent, false);
                GoodsTagEndHolder holder = new GoodsTagEndHolder(view);
                holder.setEvent();
                return holder;
            }
            default: {
                View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_goods_tag_empty, parent, false);
                return new EmptyViewHolder(view);
            }
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof GoodsTagItemHolder) {
            SearchTag searchTag = searchTagList.get(position - 1);
            GoodsTagItemHolder goodsTagItemHolder = (GoodsTagItemHolder) holder;
            goodsTagItemHolder.setData(searchTag);
            goodsTagItemHolder.setEvent(searchTag);
        }
    }

    @Override
    public int getItemCount() {
        if (searchTagList.isEmpty()) {
            return 2;
        }
        return searchTagList.size() + 2;
    }

    private class GoodsTagTopHolder extends RecyclerView.ViewHolder {
        GoodsTagTopHolder(View view) {
            super(view);
        }
    }

    private class GoodsTagItemHolder extends RecyclerView.ViewHolder {
        private TextView mGoodsTagItemTv;
        private RelativeLayout mGoodsTagItemLayout;

        GoodsTagItemHolder(View view) {
            super(view);
            mGoodsTagItemLayout = (RelativeLayout) view.findViewById(R.id.goods_tag_item_layout);
            mGoodsTagItemTv = (TextView) view.findViewById(R.id.goods_tag_item_tv);
        }

        public void setData(SearchTag searchTag) {
            String label = searchTag.getName();
            mGoodsTagItemTv.setText(label);
        }

        public void setEvent(SearchTag searchTag) {

        }
    }

    private class GoodsTagEndHolder extends RecyclerView.ViewHolder {
        private TextView mGoodsTagLinkTv;

        GoodsTagEndHolder(View view) {
            super(view);
            mGoodsTagLinkTv = (TextView) view.findViewById(R.id.goods_tag_link_tv);
        }

        public void setEvent() {
            mGoodsTagLinkTv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                }
            });
        }
    }

    private class EmptyViewHolder extends RecyclerView.ViewHolder {
        EmptyViewHolder(View itemView) {
            super(itemView);
            TextView textView = (TextView) itemView.findViewById(R.id.empty_text);
        }
    }
}

SearchView雖然是官方的但是一般不推薦使用！對於搜尋框的實現官方提供了SearchView但是很多坑需要去填推薦用EditText！

SearchView屬性

屬性名稱	相關方法	描述
android:iconifiedByDefault	setIconifiedByDefault（boolean）	設定搜尋圖示是否顯示在搜尋框內
android:imeOptions	setImeOptions(int)	設定輸入法搜尋選項欄位，預設是搜尋，可以是：下一頁、傳送、完成等
android:inputType	setInputType(int)	設定輸入型別
android:maxWidth	setMaxWidth(int)	設定最大寬度
android:queryHint	setQueryHint(CharSequence)	設定查詢提示字串
setSubmitButtonEnabled (boolean enabled)	設定是否出現提交按鈕

package net.yeah.lililearn.searchrecyclerview.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;;
import android.text.TextUtils;
import android.widget.SearchView;

import net.yeah.lililearn.searchrecyclerview.R;
import net.yeah.lililearn.searchrecyclerview.adapter.SearchAdapter;
import net.yeah.lililearn.searchrecyclerview.model.SearchTag;

import java.util.ArrayList;
import java.util.List;

public class SearchViewActivity extends AppCompatActivity {
    private RecyclerView mSearchTagRecycler;
    private List<SearchTag> searchTagList;
    private SearchAdapter mAdapter;
    private SearchView mSearchTagView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        initView();
        initAdapter();
        setEvent();
    }

    private void initView() {
        mSearchTagView = (SearchView) findViewById(R.id.search_tag_view);
        mSearchTagRecycler = (RecyclerView) findViewById(R.id.search_tag_recycler);
        mSearchTagRecycler.setLayoutManager(new LinearLayoutManager(this));
        mSearchTagRecycler.setAnimation(null);
    }

    private void initAdapter() {
        searchTagList = new ArrayList<>();
        mAdapter = new SearchAdapter(searchTagList, this);
        mSearchTagRecycler.setAdapter(mAdapter);
    }

    private void setEvent() {
        mSearchTagView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // 當點選搜尋按鈕時觸發該方法
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                // 當搜尋內容改變時觸發該方法
                if (!TextUtils.isEmpty(newText.trim())){
                    searchTags(newText.trim());

                }else{
                    searchTagList.clear();
                    mAdapter.notifyDataSetChanged();
                }
                return false;
            }
        });
    }


    /**
     * 請求資料
     * @param searchTagName
     */
    private void searchTags(String searchTagName) {
        List<SearchTag> searchTags=new ArrayList<>();
        searchTags.add(new SearchTag("測試資料1"));
        searchTags.add(new SearchTag("測試資料2"));
        searchTags.add(new SearchTag("測試資料3"));
        searchTags.add(new SearchTag("測試資料4"));
        searchTags.add(new SearchTag("測試資料5"));
        searchTags.add(new SearchTag("測試資料6"));
        searchTags.add(new SearchTag("測試資料7"));
        searchTags.add(new SearchTag("測試資料8"));
        searchTags.add(new SearchTag("測試資料9"));
        searchTags.add(new SearchTag("測試資料10"));
        searchTagList.clear();
        searchTagList.addAll(searchTags);
        mAdapter.notifyDataSetChanged();
    }
}

<?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">

    <SearchView
        android:id="@+id/search_tag_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:iconifiedByDefault="false"
        android:layout_margin="8dp"
        android:background="@drawable/shape_tag_search"
        android:queryHint="請輸入搜尋內容" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/search_tag_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@null"
        android:listSelector="@android:color/transparent" />
</LinearLayout>

貼上效果圖
這裡寫圖片描述

專案中經常遇到的問題
1.放大鏡圖示的替換
2.X圖示的刪除
3.Text框下劃線刪除

總結：雖然官方的元件挺好使的，但是在專案中使用需要自己重寫一下才能使用。還是EditText比較適合！

使用SearchView+RecyclerView做搜尋框

安卓搜尋框分別使用了EditText+RecycleView和SearchView+RecycleView都實現了一遍對比下兩種的區別！首先是一張效果圖！一、EditText+RecycleView 先丟上程式碼！ Layout <?xm

Android自定義View——自定義搜尋框（SearchView）非常實用的控制元件

好多東西寫起來太麻煩了,而且我在最開始用的也不是自己寫的,所以找了一個非常棒的測試了一下. 轉載的在 Android開發中，當系統資料項比較多時，常常會在app新增搜尋功能，方便使用者能快速獲得需要的資料。搜尋欄對於我們並不陌生，在許多app都能見到它，比如豌

Android-搜尋框SearchView

介紹： SearchView時搜尋元件，可以讓使用者輸入文字，見他輸入匹配結果效果：基本的用法我就不詳細描述了這裡主要說一些我遇到的問題：如下：一、點選listView後讓文字自動補全到searchView上：首先需要設定adapter

【Android自定義View實戰】之自定義超簡單SearchView搜尋框

package cn.bluemobi.dylan.searchview; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.util.A

SearchView和RecyclerView實現搜尋介面，2018/1/1 04

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.and

Android 搜尋框：SearchView 的屬性和用法詳解

SearchView簡介 SearchView是Android原生的搜尋框控制元件，它提供了一個使用者介面，用於使用者搜尋查詢。 SearchView預設是展示一個search的icon，

SearchView+RecyclerView+GreenDao的搜尋功能實現（2）

簡單的介面效果如下佈局如下，通過一個RecyclerView控制顯示三種情況的顯示 <RelativeLayout xmlns:android="http://schema

Android搜尋框元件SearchView的使用

一、SearchView概述SearchView是搜尋框元件，它可以讓使用者在文字框內輸入文字，並允許通過監聽器監控使用者輸入，當用戶輸入完成後提交搜尋時，也可通過監聽器執行實際的搜尋。SearchView預設是展示一個search的icon，點選icon展開搜尋框，也可以自己設定圖示。用SearchView

修改SearchView搜尋框的背景線.(或著其他屬性)

今天是來移動的第二天,雨好大... 專案經理讓我修改一下android4.2.2日曆中的SearchView. 要求去掉當SearchView得到焦點時候出現的藍色背景線. 怎麼說呢,很苦惱,基本沒看過原始碼.而且android studio用的還不是太溜,電腦也卡才4G

android searchView 去掉預設下劃線改為圓角搜尋框

客戶要實現一個圓角的搜尋框，我想著5分鐘就可以搞定了，於是開始碼 1、先定義搜尋框 <SearchView android:id="@+id/sv_cus" android:layout_width="match_par

Android中的搜尋框（SearchView）的功能和用法

1、SearchView是搜尋框元件，它可以讓使用者在文字框裡輸入文字，通過監聽器取得使用者的輸入，當用戶點選搜尋時，監聽器執行實際的搜尋。 2、SearchView元件的常用方法如下： ①setIconifiedByDefault(boolean iconified) =

搜尋框（SearchView）用法

SearchView是Android原生的搜尋框控制元件，它提供了一個使用者介面，可以讓使用者在文字框內輸入文字，並允許通過看監聽器監控使用者輸入，當用戶輸入完成後提交搜尋時，也可通過監聽器執行實際的搜尋。 SearchView屬性如下： XML屬性相關方法說明 Android:I

通過jquery做密碼框的顯示和隱藏效果

pen glyphicon 屬性 tex -c 分享 watermark 打開樣式原理通過jquery修改input的type屬性，為password時是隱藏，text則是顯示。另外把眼睛的樣式打開。很多時候看著很強大的功能其實很簡單 html <div

shape圓角邊框，搜尋框圓角邊框

搜尋圓角邊框：在drawable資料夾下建立xml檔案，根佈局設定<shape> <shape android:shape="rectangle" xmlns:android="http://schemas.android.co

Javascript：仿淘寶搜尋框使用者輸入事件的實現

開啟淘寶網首頁，找到淘寶首頁的搜尋框，大家可以看到，當頁面一開啟，搜尋框中就可以看到灰色字型“少女高跟鞋”，還有閃爍的游標。當用戶點選輸入的時候，灰色字消失。當用戶清空文字框的所有內容的時候，灰色字自動恢復。接下來，這個小案例就是要介紹如何實現這種效果，即使用者輸入事件。判斷使用者輸入的事件有 oni

常見的搜尋框下拉提示

像我們用百度搜索打一個"你"字，就會彈出"你到底有沒有愛過我"還有"你是我的小蘋果" 等等，這些都是下拉框模糊匹配。那麼模糊匹配下拉框是如何實現的呢? 下面我寫了個Demo簡單總結下: <html> <head> <meta chars

jquery實現搜尋框從中間向兩邊擴充套件（左右放大）

顯示效果：隱藏效果：前端核心程式碼如下： <div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col-sm-offset-5 col-xs-offset-

圓角搜尋框

一：shape佈局 <shape xmlns:android="http://schemas.android.com/apk/res/android"> //背景顏色 <solid android:color="#d9d1d1"></solid> //

input搜尋框獲取焦點時，placeholder消失

/* 點選搜尋框獲取焦點 placeholder消失-開始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速

游標聚焦事件—搜尋框例項

要點： 1. .onfocus事件是游標聚集響應的事件 .onblur是焦點失去事件 2. 注意游標聚焦時，將提示內容去掉，並將字型的前景色改為黑色，和使用者輸入顏色上作區分，在改回提示內容時，將前景色改為灰色 html和內建的js程式碼： <!DOCT

使用SearchView+RecyclerView做搜尋框

相關推薦