Android它没有提供的类似至ios自带的输入框效果清晰(ios简单地只加属性可实现)。因此,Android其中 我们要如何实现就需要这种效果用自己的定义的控件实现。

思路:能够使用一个Linearlayout里面横向布局一个EditText和一个删除的图片。监听输入框的焦点和文字变化,设置图片的显隐和点击清除事件。可是这么做些弊端,首先添加了UI布局的层级结构不利于UI结构的优化并且可能会出现文字过长遮挡住图片的情况。

所以採用自己定义控件继承于EditText,使用getCompoundDrawables获得上下左右加入的图片,通过监听焦点变化和输入内容变化控制周围图片的显隐以及清除事件,(里面还附加了一个晃动的动画,比如当注冊时假设输入为空能够进行晃动提示)。

原理十分简单直接上代码:

public class ClearEditText extends EditText implements OnFocusChangeListener,TextWatcher {
/**
* 删除button的引用
*/
private Drawable mClearDrawable;
private boolean hasFoucs; public ClearEditText(Context context) {
this(context, null);
}
public ClearEditText(Context context, AttributeSet attrs) {
// 这里构造方法也非常重要。不加这个非常多属性不能再XML里面定义
this(context, attrs, android.R.attr.editTextStyle);
} public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
// 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,2是获得右边的图片 顺序是左上右下(0,1,2,3,)
mClearDrawable = getCompoundDrawables()[2];
if (mClearDrawable == null) {
// throw new
// NullPointerException("You can add drawableRight attribute in XML");
mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
} mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(),mClearDrawable.getIntrinsicHeight());
// 默认设置隐藏图标
setClearIconVisible(false);
// 设置焦点改变的监听
setOnFocusChangeListener(this);
// 设置输入框里面内容发生改变的监听
addTextChangedListener(this);
} /**
* 由于我们不能直接给EditText设置点击事件。所以我们用记住我们按下的位置来模拟点击事件 当我们按下的位置 在 EditText的宽度 -
* 图标到控件右边的间距 - 图标的宽度 和 EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,竖直方向就没有考虑
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if (getCompoundDrawables()[2] != null) {
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())&& (event.getX() < ((getWidth() - getPaddingRight())));
if (touchable) {
this.setText("");
}
}
}
return super.onTouchEvent(event);
} /**
* 当ClearEditText焦点发生变化的时候,推断里面字符串长度设置清除图标的显示与隐藏
*/
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFoucs = hasFocus;
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
} /**
* 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
*
* @param visible
*/
protected void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
} /**
* 当输入框里面内容发生变化的时候回调的方法
*/
@Override
public void onTextChanged(CharSequence s, int start, int count, int after) {
if (hasFoucs) {
setClearIconVisible(s.length() > 0);
}
} @Override
public void beforeTextChanged(CharSequence s, int start, int count,int after) { } @Override
public void afterTextChanged(Editable s) { } /**
* 设置晃动动画
*/
public void setShakeAnimation() {
this.setAnimation(shakeAnimation(5));
} /**
* 晃动动画
*
* @param counts
* 1秒钟晃动多少下
* @return
*/
public static Animation shakeAnimation(int counts) {
Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
//设置一个循环加速器,使用传入的次数就会出现摆动的效果。
translateAnimation.setInterpolator(new CycleInterpolator(counts));
translateAnimation.setDuration(500);
return translateAnimation;
} }

以下是使用自己定义控件xml:

<com.exmaple.ClearEditText
android:id="@+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:background="@null"
android:drawableLeft="@drawable/user_login"
android:drawablePadding="7dip"
android:hint="@string/str_hit_inputname"
android:singleLine="true"
android:textSize="17sp" > <requestFocus />
</com.exmaple.ClearEditText>

以下为效果图:



版权声明:本文博客原创文章。博客,未经同意,不得转载。

android 随着认识的去除率EditText(它配备了防抖效果)的更多相关文章

  1. 【转】Android 破解视频App去除广告功能详解及解决办法总结

    Android 破解视频App去除广告功能 作为一个屌丝程序猿也有追剧的时候,但是当打开视频app的时候,那些超长的广告已经让我这个屌丝无法忍受了,作为一个程序猿看视频还要出现广告那就是打我脸,但是我 ...

  2. Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果

    本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18311877) 今天还是给大家带来自定义控件的编写,自定义一个Lis ...

  3. 【转】Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    原文网址:http://blog.csdn.net/xiaanming/article/details/17539199 转帖请注明本文出自xiaanming的博客(http://blog.csdn. ...

  4. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  5. [转]Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17539199),请尊重他人的辛勤劳动成果,谢谢! 我在上一 ...

  6. android高仿微信UI点击头像显示大图片效果

    用过微信的朋友朋友都见过微信中点击对方头像显示会加载大图,先贴两张图片说明下: 这种UI效果对用户的体验不错,今天突然有了灵感,试着去实现,结果就出来了.. 下面说说我的思路: 1.点击图片时跳转到另 ...

  7. 【转】Android中通知的提示音、震动和LED灯效果小例子

    通知(Notification)是 Android 系统中比较有特色的一个功能,当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助通知来实现.发出一条通知后,手机最上方 ...

  8. Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17539199),请尊重他人的辛勤劳动成果,谢谢! 我在上一 ...

  9. 在android中如何通过点击edittext之外的部分使软键盘隐藏

    我们知道在android中点击edittext框就会自动弹出软键盘,那怎么通过点击edittext之外的部分使软键盘隐藏呢?(微信聊天时的输入框就是这个效果,这个给用户的体验还是很不错的) 首先我们要 ...

随机推荐

  1. php 修改文件内容,替换指定内容

    $f='./test.txt'; file_put_contents($f,str_replace('{{modulename}}','Hospital',file_get_contents($f)) ...

  2. 【35.02%】【codeforces 734A】Vladik and flights

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  3. svn hook pre-commit

    #!/bin/bashexport LANG="zh_CN.UTF-8" #确保中文日志显示正常,便于统计日志REPOS="$1"TXN="$2&qu ...

  4. javax.servlet.WriteListener

    http://www.programcreek.com/java-api-examples/index.php?api=javax.servlet.WriteListener

  5. mui常用功能链接地址

    1.下拉刷新mui.pullToRefresh插件http://ask.dcloud.net.cn/article/12152.打包app权限列表http://ask.dcloud.net.cn/ar ...

  6. 【t042】炮击坦克

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在一个坐标轴上,有M辆坦克,第i辆坦克在时刻0处于pos[i](pos[i]>0),speed[ ...

  7. [Angular] Difference between ngAfterViewInit and ngAfterContentInit

    Content is what is passed as children. View is the template of the current component. The view is in ...

  8. MapReduce 编程 系列九 Reducer数目

    本篇介绍怎样控制reduce的数目.前面观察结果文件,都会发现通常是以part-r-00000 形式出现多个文件,事实上这个reducer的数目有关系.reducer数目多,结果文件数目就多. 在初始 ...

  9. Vue挂载元素的替换

    Vue根组件已有挂载DOM'#app',在render又引进一个组件,该组件最外层也是用了'#app',为何根组件的DOM'#app'会被替换掉. //main.js import Vue from ...

  10. 利用WPF建立自己的3d gis软件(非axhost方式)(十二)SDK中的导航系统

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(十二)SDK中的导航系统 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew ...