自定义搜索框searchview

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： Android开发 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yankee1967/article/details/52291487
版权
项目需要，要求自定义一个searchview，其实Android自带的就有这个控件，而且做得很好，还有一些是通过修改样式来打造，笔者更喜欢把它抽出来成为一个控件，这样在以后的使用中会方便很多，于是在网上找了找资料，综合各大神的代码，给出自己的解决方案。
上效果图：

1、这个搜索框控件的布局并不是很复杂，左上方那个搜索的小图片是个ImageView，中间是EditText，最右边的小垃圾桶是个ImageView，只是在未输入搜索内容的时候visibility为gone，而搜索框下方是个gridview，gridview放的是搜索的热词，显示搜索内容的是一个webview，gridview是盖在webview上面的，之前有小伙伴问我怎么盖在另外一个控件上，原理很简单，把gridview的xml布局代码写在webview的 xml布局代码 下方就行。。。（很简单但是很有效）
2、这种由几个控件组成的自定义控件首先要做的是写布局文件，布局文件没什么好说的，上代码： 
   
   

    
    

     
     <?xml version="1.0" encoding="utf-8"?>
    
    

    
    

     
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
    

    
    

     
         android:layout_width="match_parent"
    
    

    
    

     
         android:layout_height="match_parent"
    
    

    
    

     
         >
    
    

    
    

     
         <LinearLayout
    
    

    
    

     
             android:orientation="horizontal"
    
    

    
    

     
             android:layout_width="match_parent"
    
    

    
    

     
             android:id="@+id/search_area"
    
    

    
    

     
             android:background="@drawable/rect_gray"
    
    

    
    

     
             android:layout_height="wrap_content">
    
    

    
    

     
             <ImageView
    
    

    
    

     
                 android:layout_marginLeft="10dp"
    
    

    
    

     
                 android:src="@android:drawable/ic_menu_search"
    
    

    
    

     
                 android:id="@+id/search_iv_search"
    
    

    
    

     
                 android:layout_gravity="left|center_vertical"
    
    

    
    

     
                 android:layout_width="wrap_content"
    
    

    
    

     
                 android:layout_height="wrap_content"/>
    
    

    
    

     
             <EditText
    
    

    
    

     
                 android:id="@+id/search_et_input"
    
    

    
    

     
                 android:layout_gravity="center_vertical"
    
    

    
    

     
                 android:layout_margin="10dp"
    
    

    
    

     
                 android:layout_width="0dp"
    
    

    
    

     
                 android:layout_weight="1"
    
    

    
    

     
                 android:layout_height="wrap_content"
    
    

    
    

     
                 android:textSize="16sp"
    
    

    
    

     
                 android:background="@null"
    
    

    
    

     
                 android:imeOptions="actionSearch"
    
    

    
    

     
                 android:inputType="text"
    
    

    
    

     
                 android:textCursorDrawable="@null"
    
    

    
    

     
                 android:hint="Google search"/>
    
    

    
    

     
      
    
    

    
    

     
             <ImageView
    
    

    
    

     
                 android:visibility="gone"
    
    

    
    

     
                 android:layout_marginRight="10dp"
    
    

    
    

     
                 android:src="@android:drawable/ic_menu_delete"
    
    

    
    

     
                 android:id="@+id/search_iv_delete"
    
    

    
    

     
                 android:layout_gravity="right|center_vertical"
    
    

    
    

     
                 android:layout_width="wrap_content"
    
    

    
    

     
                 android:layout_height="wrap_content"/>
    
    

    
    

     
         </LinearLayout>
    
    

    
    

     
         <WebView
    
    

    
    

     
             android:layout_width="match_parent"
    
    

    
    

     
             android:layout_height="match_parent"
    
    

    
    

     
             android:layout_below="@id/search_area"
    
    

    
    

     
             android:id="@+id/search_wv_result"
    
    

    
    

     
             />
    
    

    
    

     
         <GridView
    
    

    
    

     
             android:layout_below="@id/search_area"
    
    

    
    

     
             android:background="@drawable/rect_gray"
    
    

    
    

     
             android:numColumns="2"
    
    

    
    

     
             android:id="@+id/search_lv_tips"
    
    

    
    

     
             android:layout_width="match_parent"
    
    

    
    

     
             android:layout_height="wrap_content">
    
    

    
    

     
         </GridView >
    
    

    
    

     
     </RelativeLayout>
3、布局代码中就可以猜测到，我们将在一个LinearLayout或者一个RelativeLayout中去操作，我们让这个自定义控件继承自 LinearLayout（当然也可以继承自 RelativeLayout ），这里可能需要频繁的调用开始搜索的代码，去做搜索onSearch（）方法里的内容，还有就是每次搜索的时候都要隐藏键盘，  至于这个EditChangedListener， 只是为了在在输入过程中动态的一些操作  ，笔者也是第一次使用TextWatcher。有gridview的地方就免不了adapter，通过外部设置给自定义控件一个adapter
直接上代码吧： 
   
   

    
    

     
     public
     
      
     
     class
     
      
     
     YankeeSearchView
     
      
     
     extends
     
      
     
     LinearLayout
     
      
     
     implements
     
      
     
     View
     
     .
     
     OnClickListener
     
      
     
     {

    
    

    
    

     
         private EditText etInput;
    
    

    
    

     
         private ImageView ivDelete;
    
    

    
    

     
         private ImageView ivSearch;
    
    

    
    

     
         private Context mContext;
    
    

    
    

     
         private GridView lvTips;
    
    

    
    

     
         private WebView wvSearch;
    
    

    
    

     
         private ArrayAdapter<String> mHintAdapter;
    
    

    
    

     
         private SearchViewListener mListener;
    
    

    
    

     
         public YankeeSearchView(Context context, AttributeSet attrs) {
    
    

    
    

     
             super(context, attrs);
    
    

    
    

     
             mContext = context;
    
    

    
    

     
             LayoutInflater.from(context).inflate(R.layout.search_layout, this);
    
    

    
    

     
             initViews();
    
    

    
    

     
         }
    
    

    
    

     
         private void initViews() {
    
    

    
    

     
             etInput = (EditText) findViewById(R.id.search_et_input);
    
    

    
    

     
             ivDelete = (ImageView) findViewById(R.id.search_iv_delete);
    
    

    
    

     
             ivSearch=(ImageView) findViewById(R.id.search_iv_search);
    
    

    
    

     
             lvTips = (GridView) findViewById(R.id.search_lv_tips);
    
    

    
    

     
             wvSearch= (WebView) findViewById(R.id.search_wv_result);
    
    

    
    

     
             wvSearch.setOnTouchListener(new OnTouchListener() {
    
    

    
    

     
                 @Override
    
    

    
    

     
                 public boolean onTouch(View v, MotionEvent event) {
    
    

    
    

     
                     lvTips.setVisibility(GONE);
    
    

    
    

     
                     return false;
    
    

    
    

     
                 }
    
    

    
    

     
             });
    
    

    
    

     
             lvTips.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    
    

    
    

     
                 @Override
    
    

    
    

     
                 public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
    
    

    
    

     
                     String text = lvTips.getAdapter().getItem(i).toString();
    
    

    
    

     
                     etInput.setText(text);
    
    

    
    

     
                     etInput.setSelection(text.length());
    
    

    
    

     
                     lvTips.setVisibility(View.GONE);
    
    

    
    

     
                     notifyStartSearching(text);
    
    

    
    

     
                 }
    
    

    
    

     
             });
    
    

    
    

     
             ivDelete.setOnClickListener(this);
    
    

    
    

     
             ivSearch.setOnClickListener(this);
    
    

    
    

     
             etInput.addTextChangedListener(new EditChangedListener());
    
    

    
    

     
             etInput.setOnClickListener(this);
    
    

    
    

     
             etInput.setOnEditorActionListener(new TextView.OnEditorActionListener() {
    
    

    
    

     
                 @Override
    
    

    
    

     
                 public boolean onEditorAction(TextView textView, int actionId, KeyEvent keyEvent) {
    
    

    
    

     
                     if (actionId == EditorInfo.IME_ACTION_SEARCH) {
    
    

    
    

     
                         lvTips.setVisibility(GONE);
    
    

    
    

     
                         notifyStartSearching(etInput.getText().toString());
    
    

    
    

     
                     }
    
    

    
    

     
                     return true;
    
    

    
    

     
                 }
    
    

    
    

     
             });
    
    

    
    

     
         }
    
    

    
    

     
         private void notifyStartSearching(String text){
    
    

    
    

     
             if (mListener != null) {
    
    

    
    

     
                 mListener.onSearch(etInput.getText().toString());
    
    

    
    

     
             }
    
    

    
    

     
             InputMethodManager imm = (InputMethodManager) mContext.getSystemService(Context.INPUT_METHOD_SERVICE);
    
    

    
    

     
             imm.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);
    
    

    
    

     
         }
    
    

    
    


    
    

    
    

     
         public void setTipsHintAdapter(ArrayAdapter<String> adapter) {
    
    

    
    

     
             this.mHintAdapter = adapter;
    
    

    
    

     
             if (lvTips.getAdapter() == null) {
    
    

    
    

     
                 lvTips.setAdapter(mHintAdapter);
    
    

    
    

     
             }
    
    

    
    

     
         }
    
    

    
    

     
         private class EditChangedListener implements TextWatcher {
    
    

    
    

     
             @Override
    
    

    
    

     
             public void beforeTextChanged(CharSequence charSequence, int i, int i2, int i3) {
    
    

    
    

     
             }
    
    

    
    

     
             @Override
    
    

    
    

     
             public void onTextChanged(CharSequence charSequence, int i, int i2, int i3) {
    
    

    
    

     
                 if (!"".equals(charSequence.toString())) {
    
    

    
    

     
                     ivDelete.setVisibility(VISIBLE);
    
    

    
    

     
                     lvTips.setVisibility(VISIBLE);
    
    

    
    

     
                 } else {
    
    

    
    

     
                     ivDelete.setVisibility(GONE);
    
    

    
    

     
                     if (mHintAdapter != null) {
    
    

    
    

     
                         lvTips.setAdapter(mHintAdapter);
    
    

    
    

     
                     }
    
    

    
    

     
                     lvTips.setVisibility(GONE);
    
    

    
    

     
                 }
    
    

    
    

     
             }
    
    

    
    

     
             @Override
    
    

    
    

     
             public void afterTextChanged(Editable editable) {
    
    

    
    

     
             }
    
    

    
    

     
         }
    
    

    
    

     
      
    
    

    
    

     
         @Override
    
    

    
    

     
         public void onClick(View view) {
    
    

    
    

     
             switch (view.getId()) {
    
    

    
    

     
                 case R.id.search_et_input:
    
    

    
    

     
                     lvTips.setVisibility(VISIBLE);
    
    

    
    

     
                     break;
    
    

    
    

     
                 case R.id.search_iv_delete:
    
    

    
    

     
                     etInput.setText("");
    
    

    
    

     
                     ivDelete.setVisibility(GONE);
    
    

    
    

     
                     break;
    
    

    
    

     
                 case R.id.search_iv_search:
    
    

    
    

     
                     lvTips.setVisibility(GONE);
    
    

    
    

     
                     notifyStartSearching(etInput.getText().toString());
    
    

    
    

     
                     break;
    
    

    
    

     
             }
    
    

    
    

     
         }
    
    

    
    

     
         public void setSearchViewListener(SearchViewListener listener) {
    
    

    
    

     
             mListener = listener;
    
    

    
    

     
         }
    
    

    
    

     
         public interface SearchViewListener {
    
    

    
    

     
             void onSearch(String text);
    
    

    
    

     
         }
    
    

    
    

     
         public void setWebViewUrl(String url){
    
    

    
    

     
             if (url!=null){
    
    

    
    

     
                 wvSearch.loadUrl(url);
    
    

    
    

     
                 wvSearch.setWebViewClient(new WebViewClient() {
    
    

    
    

     
                     @Override
    
    

    
    

     
                     public boolean shouldOverrideUrlLoading(WebView view, String url) {
    
    

    
    

     
                         view.loadUrl(url);
    
    

    
    

     
                         return true;
    
    

    
    

     
                     }
    
    

    
    

     
                 });
    
    

    
    

     
             }
    
    

    
    

     
      
    
    

    
    

     
         }
    
    

    
    

     
      
    
    

    
    

     
     }

4、代码里都是一些隐藏显示的操作，比较重要的是对外的接口，还有就是setWebViewUrl()方法，用来对输入内容展开搜索。构造函数里传入了三个参数，传入一个布局文件，如果要自定义ite，可以写一个adapter，demo中为了简单，使用的是Android自带的只有一个textview的布局，而adapter使用的是 ArrayAdapter < String >， 的是再有就是通过简单修改代码就可以把gridview替换成ListView，笔者不操作了
5、至于调用，在 activity_main 布局文件中只要添加： 
   
   

    
    

     
     <com.yankee.yankeesearchview.YankeeSearchView
    
    

    
    

     
             android:id="@+id/main_search_layout"
    
    

    
    

     
             android:layout_width="match_parent"
    
    

    
    

     
             android:layout_height="wrap_content"/>
6、在activity中，通过给searchview设置listener复写onSearch（）方法，在方法里操作，别忘了通过 setTipsHintAdapter（）方法 设置adapter： 
   
   

    
    

     
     public class MainActivity extends AppCompatActivity{
    
    

    
    

     
         private YankeeSearchView searchView;
    
    

    
    

     
         private ArrayAdapter<String> hintAdapter;
    
    

    
    

     
         private List<String> hintData;
    
    

    
    

     
         private static int HINT_SIZE=6;
    
    

    
    

     
         @Override
    
    

    
    

     
         protected void onCreate(Bundle savedInstanceState) {
    
    

    
    

     
             super.onCreate(savedInstanceState);
    
    

    
    

     
             setContentView(R.layout.activity_main);
    
    

    
    

     
             initData();
    
    

    
    

     
             initView();
    
    

    
    

     
         }
    
    

    
    

     
      
    
    

    
    

     
         private void initView() {
    
    

    
    

     
             searchView = (YankeeSearchView) findViewById(R.id.main_search_layout);
    
    

    
    

     
             searchView.setSearchViewListener(new YankeeSearchView.SearchViewListener() {
    
    

    
    

     
                 @Override
    
    

    
    

     
                 public void onSearch(String text) {
    
    

    
    

     
                     Toast.makeText(MainActivity.this, "Search Complete", Toast.LENGTH_SHORT).show();
    
    

    
    

     
                     searchView.setWebViewUrl("https://www.baidu.com/baidu?ie=utf-8&wd="+text);
    
    

    
    

     
                 }
    
    

    
    

     
             });
    
    

    
    

     
             searchView.setTipsHintAdapter(hintAdapter);
    
    

    
    

     
         }
    
    

    
    

     
      
    
    

    
    

     
         private void initData() {
    
    

    
    

     
             hintData = new ArrayList<>(HINT_SIZE);
    
    

    
    

     
             for (int i = 1; i <= HINT_SIZE; i++) {
    
    

    
    

     
                 hintData.add("Rio Olympic Games");
    
    

    
    

     
             }
    
    

    
    

     
             hintAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, hintData);
    
    

    
    

     
         }
    
    

    
    

     
     }

Yankee1967
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义超简单SearchView搜索框
07-18
自定义超简单SearchView搜索框，非常简单，使用，可以自定义！
【Vue】二次封装elementUI自定义样式的input搜索框
Fortaro的博客
09-28 2430
二次封装elementUI，制作自定义样式的input搜索框
搜索框自定义
chengchong_cc的博客
03-20 58
avue vue
Android开发自定义搜索框实现源码详解
m0_70749039的博客
03-19 829
快速使用目前已经发布至远程Maven，大家可以进行远程依赖使用。1、在你的根项目下的build.gradle文件下，引入maven。2、在你需要使用的Module中build.gradle文件下，引入依赖。具体代码1、xml中引入SearchLayout（搜索框）和SearchList（搜索列表），在实际开发中，根据需求可选择使用，二者是互不关联的。2、代码逻辑，以下是测试代码，如用到实际项目，请以实际项目获取控件为主。) {//搜索内容改变}, {//软键盘点击了搜索})
Qt学习之自定义搜索框（两种方案）
似末的博客
03-18 7450
本文介绍两种方法来设计一个自定义搜索框，详细过程+源码。
Android自定义View——自定义搜索框（SearchView）
Yetwish的专栏
06-16 7613
打造Android自定义SearchView，自动补全框不止能显示文字，还能显示图片或其他自定义布局；带清除按钮；可带热搜版或搜索历史板块
Android开发之搜索框SearchView用法示例
08-26
主要介绍了Android开发之搜索框SearchView用法,结合实例形式分析了Android搜索框SearchView的基本功能、用法及相关操作注意事项,需要的朋友可以参考下
Android自定义View实现搜索框（SearchView）功能
08-28
主要为大家详细介绍了Android自定义View实现搜索框SearchView功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义SearchView+关键字搜索
12-15
SearchView（可以进行关键字搜索，代码已设置为展开，解决部分机型展开后有两个搜索图标的问题，可以自定义编辑框内文字颜色，去掉底部下划线，去掉焦点，编辑框内容为空时不显示delete键，不为空时显示，delete键的...
Qt之自定义搜索框
Cong的专栏
05-10 1000
简述 效果 细节分析 Coding 源码下载简述关于搜索框，大家都经常接触。例如：浏览器搜索、Windows资源管理器搜索等。当然，这些对于Qt实现来说毫无压力，只要思路清晰，分分钟搞定。效果细节分析实现细节需要如下步骤：组合实现，输入框+按钮 事件关联 获取输入文本，进行文本搜索 为了更人性、易用，这里有一些细节需要注意：输入框的文本不能处于按钮之下 输入框无文本时必须给与友好性提
html自定义搜索框
08-17
html自定义搜索框，与select2不同，请参看本人博客介绍
自定义搜索框
10-24
一个自定义搜索框，希望有人喜欢，鉴定不错的！
自定义搜索框实现搜索功能
12-12
利用EditText实现自定义搜索框，实现了搜索的功能，该apk可以安装自己体验。
Android自定义搜索框的代码例子
05-19
Android自定义搜索框的代码例子。用于演示自定义搜索框的功能，搜索框的实现方式有三种：1、利用Actionbar的SearchView控件；2、利用AutoCompleteTextView控件进行扩展；3、基于EditText+ListView实现自定义搜索框。
Google Analytics For Android的使用
Yankee1967的博客
08-10 1451
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
关于MAC环境下ADT模拟器无法连接网络的解决方法
Yankee1967的博客
01-20 1142
1.打开终端，进入adb所在文件夹（如果有配置adb当然更好） 2.使用 adb shell 点击回车 3.使用 getprop 点击回车可以拿到模拟器的一些属性，注意查看net.dns1,一般是［10.0.2.2］ 4.使用setprop net.dns1 本机的dns 点击回车即可
项目实战：谷歌电子市场学习笔记1
Yankee1967的博客
03-21 879
接触这个小项目最初的目的是为了学习本项目中大量使用的跟网络相关的知识，随着一步步深入的发掘，发现这个项目其实对界面设计和制作的启发远比网络来的充实： 废话不多说，let’s do this! day1: 1.项目总体使用的actionbar并不是安卓自带的，而是存在于v7包中，所以第一步要做的就是导入v7包，也是在这个项目中才知道v7包的具体位置▸ sdk ▸ extras ▸ android
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 828
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
使用materialdesign的searchview结合navigation实现搜索框
03-24
// 处理搜索框文本变化事件 return false; } }); // 设置NavigationView NavigationView navigationView = findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值