自定义超简单SearchView搜索框

先看效果图

Java代码:

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.app.Activity;

public class MainActivity extends Activity {

	private EditText mEtSearch = null;// 输入搜索内容
	private Button mBtnClearSearchText = null;// 清空搜索信息的按钮
	private LinearLayout mLayoutClearSearchText = null;

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

		mEtSearch = (EditText) findViewById(R.id.et_search);
		mBtnClearSearchText = (Button) findViewById(R.id.btn_clear_search_text);
		mLayoutClearSearchText = (LinearLayout) findViewById(R.id.layout_clear_search_text);
		mEtSearch.addTextChangedListener(new TextWatcher() {

			@Override
			public void onTextChanged(CharSequence s, int start, int before,
					int count) {

			}

			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}

			@Override
			public void afterTextChanged(Editable s) {
				int textLength = mEtSearch.getText().length();
				if (textLength > 0) {
					mLayoutClearSearchText.setVisibility(View.VISIBLE);
				} else {
					mLayoutClearSearchText.setVisibility(View.GONE);
				}
			}
		});

		mBtnClearSearchText.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mEtSearch.setText("");
				mLayoutClearSearchText.setVisibility(View.GONE);
			}
		});
		mEtSearch.setOnKeyListener(new OnKeyListener() {

			@Override
			public boolean onKey(View arg0, int keyCode, KeyEvent event) {
				if (keyCode == KeyEvent.KEYCODE_ENTER) {
					Toast.makeText(MainActivity.this,
							mEtSearch.getText().toString().trim(),
							Toast.LENGTH_LONG).show();
				}
				return false;
			}
		});
	}

}

布局文件

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
 	 android:orientation="vertical">

    <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="12dp"
    android:background="@drawable/shape_search_app_bg_yj"
    android:orientation="horizontal">

        <!-- 输入的搜索信息 -->
       <EditText
        android:id="@+id/et_search"
        android:layout_weight="4"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:imeOptions="actionSearch"
        android:layout_marginLeft="10dp"
        android:textColor="#0e0e0e"
        android:textSize="17sp"
        android:singleLine="true"
        android:hint="搜索"
        android:textColorHint="#b0c6ce"
        android:gravity="center_vertical"
        android:drawableLeft="@drawable/ic_search_app_left"
        android:background="@null"/>

       <!-- 清空搜索文字按钮 -->
       <LinearLayout
           android:id="@+id/layout_clear_search_text"
           android:layout_weight="0.5"
           android:layout_width="0dp"
           android:layout_height="fill_parent"
           android:visibility="gone"
           android:orientation="horizontal">
       <Button
           android:id="@+id/btn_clear_search_text"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="right|center_vertical"
           android:background="@drawable/selector_btn_search_clear_text_right"
         />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

源码下载

时间: 2024-11-06 03:31:24

自定义超简单SearchView搜索框的相关文章

【Android自定义View实战】之超简单SearchView

[Android自定义View实战]之超简单SearchView 在Android开发中我们经常会用到搜索框,而系统提供的又不尽完美.所以自定义一个比较简单的SearchView. 效果图 实现代码 package cn.bluemobi.dylan.searchview; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.ut

js:ajax的get方法实现简单的搜索框提示

效果演示: 一,使用nodejs搭建后台环境,通过ajax的get方法将文本框中的值,实时传输到后台进行比较,后台返回相应的结果,将结果返回到ul中 1,创建路由 app4.js /** * Created by dyb on 2018/1/2. */ var express = require('express'); var fs= require('fs'); var url = require('url'); var app = express(); var mysql = require

PullToRefreshScrollView实现顶层搜索框 滑动可隐藏 下面刷自定义GridView

最近项目里有个需求,要求用GridView去显示商品,滑动到底部下拉能加载更多商品,向下滑动过程中需要隐藏掉自定义的Action(搜索框)布局,向上滑动能显示出来,整体效果类似淘宝APP搜索结果页那样. 起初觉得挺简单的,但是后来才发现还是得转一点脑子.最开始我想用PullToRefreshGridView,但是后来发现GridView没有添加headview的方法,只能采用PullToRefreshScrollView内嵌套GridView的方法,Scrollview里多放一个空白布局当Gri

java简单的实现搜索框的下拉显示相关搜索功能

最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来 我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在

POST注入--搜索框

POST注入的分类有很多: 搜索框 登录框 认证框 还有XXXX,总之什么情况就是什么注入 言而总之,都他么一样,不就是POST传数据的时候动点手脚么? 写了个简单的搜索框注入的网页: 代码折叠了,大家展开看 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>搜索型注入</title> 5 <meta charset="utf-8"> 6 </head> 7 &l

如何在WordPress菜单中添加搜索框?

如何在WordPress菜单中添加搜索框?且不需要不使用任何WordPress插件. 想要达到这种效果只需按照以下步骤相同. 如何在WordPress菜单中添加搜索框: WordPress菜单中添加搜索框 打开functions.php文件,并在文件末尾的代码片段下面复制粘贴并保存.以下代码将自动将搜索框添加到主菜单栏. /** * Add searchbox in menubar */ add_filter( 'wp_nav_menu_items','add_search_box', 10,

Android自定义View——自定义搜索框(SearchView)

概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

qt自己定义搜索框(超简单,带效果图)

1. 什么也不要说.先上效果图: 2. 代码 头文件: #ifndef APPSEARCHLINE_H #define APPSEARCHLINE_H #include <QLineEdit> class AppSearchLine : public QLineEdit { Q_OBJECT public: AppSearchLine(QWidget *parent = 0); }; #endif // APPSEARCHLINE_H 源文件 #include "appsearchl

Android零基础入门第62节:搜索框组件SearchView

原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输入完成后提交搜索时,也可通过监听器执行实际的搜索. SearchView默认是展示一个search的icon,点击icon展开搜索框,也可以自己设定图标.用SearchView时可指定如下表所示的常见XML属性及相关方法. 如果为SearchView增加一个配套的ListView,则可以为Se