`
407827531
  • 浏览: 1059672 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

文本框实现搜索和清空效果

 
阅读更多

推荐安卓开发神器(里面有各种UI特效和android代码库实例)

前言

  本文实现的效果:文本框输入为空时显示输入的图标;不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字。

 

 

正文

  一、实现效果

    

       

 

  二、实现代码

    监听输入

    /**
     * 动态搜索
     
*/
    
private TextWatcher tbxSearch_TextChanged = new TextWatcher() {

        
//缓存上一次文本框内是否为空
        private boolean isnull = true;

        @Override
        
public void afterTextChanged(Editable s) {
            
if (TextUtils.isEmpty(s)) {
                
if (!isnull) {
                    mSearchView.setCompoundDrawablesWithIntrinsicBounds(
null,
                            
null, mIconSearchDefault, null);
                    isnull 
= true;
                }
            } 
else {
                
if (isnull) {
                    mSearchView.setCompoundDrawablesWithIntrinsicBounds(
null,
                            
null, mIconSearchClear, null);
                    isnull 
= false;
                }
            }
        }

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

        
/**
         * 随着文本框内容改变动态改变列表内容
         
*/
        @Override
        
public void onTextChanged(CharSequence s, int start, int before,
                
int count) {
            
        }
    };

     触摸事件

    private OnTouchListener txtSearch_OnTouch = new OnTouchListener() {
        @Override
        
public boolean onTouch(View v, MotionEvent event) {
            
switch (event.getAction()) {
            
case MotionEvent.ACTION_UP:
                
int curX = (int) event.getX();
                
if (curX > v.getWidth() - 38
                        
&& !TextUtils.isEmpty(mSearchView.getText())) {
                    mSearchView.setText(
"");
                    
int cacheInputType = mSearchView.getInputType();// backup  the input type
                    mSearchView.setInputType(InputType.TYPE_NULL);// disable soft input
                    mSearchView.onTouchEvent(event);// call native handler
                    mSearchView.setInputType(cacheInputType);// restore input  type
                    return true;// consume touch even
                }
                
break;
            }
            
return false;
        }
    };

    绑定事件

    private Drawable mIconSearchDefault; // 搜索文本框默认图标
    private Drawable mIconSearchClear; // 搜索文本框清除文本内容图标

    @Override
    
protected void onCreate(Bundle savedInstanceState) {
        
super.onCreate(savedInstanceState);
        setContentView(R.layout.main)
        
        
final Resources res = getResources();
        mIconSearchDefault 
= res.getDrawable(R.drawable.txt_search_default);
        mIconSearchClear 
= res.getDrawable(R.drawable.txt_search_clear);
        
        mSearchView 
= (EditText) findViewById(R.id.txtSearch);
        mSearchView.addTextChangedListener(tbxSearch_TextChanged);
        mSearchView.setOnTouchListener(txtSearch_OnTouch);
    }

    代码说明:

      1. 为输入框绑定触摸事件(模拟点击事件捕捉)。通过监听点击区域判断是否点击清空图片,如果在该区域并且文本框不为空,则清空文本框。

      2. 为输入框绑定文本改变事件监听,根据内容改变动态设置图标显示。

      3. 维持清空操作后软键盘状态。

 

  三、参考

    1.  how to block virtual keyboard while clicking on edittext in android?

 

  四、小图标下载

      

    (右键另存为即可。)

 

分享到:
评论

相关推荐

    Android文本框搜索和清空效果实现代码及简要概述

    在工作过程中可能会遇到这样一个效果:文本框输入为空时显示输入的图标;不为空时显示清空的图标,此时点击清空图标能清空文本框内输入文字,感兴趣的你可以了解下哦,或许对你学习android有所帮助

    Android帮助文档及一些资料打包放送

    [Android]文本框实现搜索和清空效果 - 农民伯伯 - 博客园.mht380.75 KB 新浪微博布局学习——活用RelativeLayout - 农民伯伯 - 博客园.mht453.32 KB Android 3.0 r1 API中文文档(113) ——SlidingDrawer ....

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    我们做搜索框的时候,经常需要这样一个效果:搜索框默认显示一段提示文本,比如“输入关键词”,鼠标点击后,清空这段文本。鼠标再次点击别的地方,又要恢复这段文本

    利用CSS3实现文本框的清除按钮相关的一些效果

    search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。比方说这个: 这是不错的体验! 当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input...

    《程序天下:JavaScript实例自学手册》光盘源码

    10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用...

    程序天下:JavaScript实例自学手册

    10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用...

    JS仿淘宝搜索框用户输入事件的实现

    当用户清空文本框的所有内容的时候,灰色字自动恢复。 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件。 判断用户输入的事件有 oninput 和onpropertychange 。当然,想必你能想到,由于浏览器兼容的...

    计算机应用基础简答题(1).doc

    这样一来,页面布局或 文本框内容一旦调整,已经设置好文本框要么会出现空白,要么文字溢出,只得在各个 文本框之间进行方案剪切和粘贴,严重影响工作效率,这样就可以使用到文本框链接功 能。 三、简述使用样式和...

    计算机应用基础简答题.doc

    这样一来,页面布局 或文本框内容一旦调整,已经设置好的文本框要么会出现空白,要么文字溢出,只得在 各个文本框之间进行方案的剪切和粘贴,严重影响工作效率,这样就可以使用到文本框 的链接功能。 三、简述使用...

    新版计算机应用基础简答题.doc

    这样一来,页面布局 或文本框内容一旦调整,已经设置好的文本框要么会出现空白,要么文字溢出,只得在 各个文本框之间进行方案的剪切和粘贴,严重影响工作效率,这样就可以使用到文本框 的链接功能。 三、简述使用...

    电子商务系统

    前台包括:会员登录、会员资料修改、搜索商品、购买商品、去收银台结账、清空购物车、查询订单、销售排行和商城公告等9个模块。 1.1.1 会员登录: 读者以会员的身份登录之后方可在网站上进行购物。 1. 登录 如果...

    C#开发实例大全(基础卷).软件开发技术联盟(带详细书签) PDF 下载

    实例123 使用迭代器实现文字的动态效果 151 实例124 使用分部类实现多种计算方法 153 实例125 使用分部类记录学生信息 155 5.5 泛型的使用 156 实例126 使用泛型存储不同类型的数据列表 156 实例127 通过泛型查找...

    delphi 开发经验技巧宝典源码

    0261 实现窗体的幻灯片效果 174 0262 实现窗体的伸展效果 174 0263 实现窗体的下拉效果 175 0264 以放大的圆形显示窗体 175 8.3 MDI窗体 176 0265 在MDI中显示动态窗体 176 0266 在MDI中真正关闭子窗体...

    delphi 开发经验技巧宝典源码06

    0261 实现窗体的幻灯片效果 174 0262 实现窗体的伸展效果 174 0263 实现窗体的下拉效果 175 0264 以放大的圆形显示窗体 175 8.3 MDI窗体 176 0265 在MDI中显示动态窗体 176 0266 在MDI中真正关闭子窗体...

    C#编程经验技巧宝典

    102 <br>0162 如何实现C#中用键完成TAB的功能 102 <br>0163 如何限制文本框密码输入长度 102 <br>0164 数据输入为空提示 103 <br>0165 如何设置文本框光标到末尾 103 <br>0166 输入法调整...

Global site tag (gtag.js) - Google Analytics