自定义EditText :下划线，左侧有可变图标，右侧有可变删除标志

最新推荐文章于 2022-04-10 23:55:32 发布
最新推荐文章于 2022-04-10 23:55:32 发布
阅读量1.1k 收藏
点赞数 

项目要求：1做出包含根据情况可变色的下划线，左侧有可变图标，右侧有可变删除标志的edittext,如图



记录制作过程：

第一版本：


[java] view plain copy
public class LineEditText extends EditText {  
    private Paint mPaint;  
    private int color;  
    public static final int STATUS_FOCUSED = 1;  
    public static final int STATUS_UNFOCUSED = 2;  
    public static final int STATUS_ERROR = 3;  
    private int status = 2;  
    private Drawable del_btn;  
    private Drawable del_btn_down;  
    private int focusedDrawableId = R.drawable.user_select;// 默认的  
    private int unfocusedDrawableId = R.drawable.user;  
    private int errorDrawableId = R.drawable.user_error;  
    Drawable left = null;  
    private Context mContext;  
  
    public LineEditText(Context context) {  
        super(context);  
        mContext = context;  
        init();  
    }  
  
    public LineEditText(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        mContext = context;  
        init();  
  
    }  
  
    public LineEditText(Context context, AttributeSet attrs, int defStryle) {  
        super(context, attrs, defStryle);  
        mContext = context;  
        TypedArray a = context.obtainStyledAttributes(attrs,  
                R.styleable.lineEdittext, defStryle, 0);  
        focusedDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableFocus, R.drawable.user_select);  
        unfocusedDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableUnFocus, R.drawable.user);  
        errorDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableError, R.drawable.user_error);  
        a.recycle();  
        init();  
    }  
  
    /** 
     * 2014/7/31 
     *  
     * @author Aimee.ZHANG 
     */  
    private void init() {  
        mPaint = new Paint();  
        // mPaint.setStyle(Paint.Style.FILL);  
        mPaint.setStrokeWidth(3.0f);  
        color = Color.parseColor("#bfbfbf");  
        setStatus(status);  
        del_btn = mContext.getResources().getDrawable(R.drawable.del_but_bg);  
        del_btn_down = mContext.getResources().getDrawable(R.drawable.del_but_bg_down);  
        addTextChangedListener(new TextWatcher() {  
  
            @Override  
            public void onTextChanged(CharSequence arg0, int arg1, int arg2,  
                    int arg3) {  
            }  
  
            @Override  
            public void beforeTextChanged(CharSequence arg0, int arg1,  
                    int arg2, int arg3) {  
            }  
  
            @Override  
            public void afterTextChanged(Editable arg0) {  
                setDrawable();  
            }  
        });  
        setDrawable();  
    }  
  
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        mPaint.setColor(color);  
        canvas.drawLine(0, this.getHeight() - 1, this.getWidth(),  
                this.getHeight() - 1, mPaint);  
    }  
  
    // 删除图片  
    private void setDrawable() {  
        if (length() < 1) {  
            setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn, null);  
        } else {  
            setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn_down,null);  
        }  
    }  
  
    // 处理删除事件  
    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
        if (del_btn_down != null && event.getAction() == MotionEvent.ACTION_UP) {  
            int eventX = (int) event.getRawX();  
            int eventY = (int) event.getRawY();  
            Log.e("eventXY", "eventX = " + eventX + "; eventY = " + eventY);    
            Rect rect = new Rect();  
            getGlobalVisibleRect(rect);  
            rect.left = rect.right - 50;  
            if (rect.contains(eventX, eventY))  
            setText("");  
        }  
        return super.onTouchEvent(event);  
    }  
  
    public void setStatus(int status) {  
        this.status = status;  
          
  
        if (status == STATUS_ERROR) {  
            try {  
                left = getResources().getDrawable(errorDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#f57272"));  
        } else if (status == STATUS_FOCUSED) {  
            try {  
                left = getResources().getDrawable(focusedDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#5e99f3"));  
        } else {  
            try {  
                left = getResources().getDrawable(unfocusedDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#bfbfbf"));  
        }  
        if (left != null) {  
//          left.setBounds(0, 0, 30, 40);  
//          this.setCompoundDrawables(left, null, null, null);  
            setCompoundDrawablesWithIntrinsicBounds(left,null,del_btn,null);  
        }  
        postInvalidate();  
    }  
  
    public void setLeftDrawable(int focusedDrawableId, int unfocusedDrawableId,  
            int errorDrawableId) {  
        this.focusedDrawableId = focusedDrawableId;  
        this.unfocusedDrawableId = unfocusedDrawableId;  
        this.errorDrawableId = errorDrawableId;  
        setStatus(status);  
    }  
  
    @Override  
    protected void onFocusChanged(boolean focused, int direction,  
            Rect previouslyFocusedRect) {  
        super.onFocusChanged(focused, direction, previouslyFocusedRect);  
        if (focused) {  
            setStatus(STATUS_FOCUSED);  
        } else {  
            setStatus(STATUS_UNFOCUSED);  
        }  
    }  
  
    @Override  
    protected void finalize() throws Throwable {  
        super.finalize();  
    };  
  
    public void setColor(int color) {  
        this.color = color;  
        this.setTextColor(color);  
        invalidate();  
    }  
}  
效果图：



代码解释：
 变量名 STATUS_FOCUSED,STATUS_UNFOCUSED,STATUS_ERROR 标示了三种状态，选中状况为蓝色，未选中状态为灰色，错误状态为红色。focusedDrawableId   unfocusedDrawableId  errorDrawableId 存放三种状态的图片，放置于最左侧。

canvas.drawLine(0, this.getHeight() - 1, this.getWidth(),this.getHeight() - 1, mPaint);     //画editText最下方的线
setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn, null);  //放置左边的和右边的图片（左，上，右，下）
相当于 android:drawableLeft=""  android:drawableRight=""  

onTouchEvent  当手机点击时，第一个先走的函数，当点击右侧删除图标是清空edittext
setStatus  更具不同的状态，左边的图片不一样



存在的问题：

这版本虽然基本功能已经实现，但是不符合需求，设计中要求文本框中无文字时，右侧删除按钮不显示，不点击删除按钮，删除按钮要保持灰色，点击时才可以变蓝色。因此有了第二个版本


[java] view plain copy
public class LineEditText extends EditText  implements TextWatcher,    
OnFocusChangeListener{  
    private Paint mPaint;  
    private int color;  
    public static final int STATUS_FOCUSED = 1;  
    public static final int STATUS_UNFOCUSED = 2;  
    public static final int STATUS_ERROR = 3;  
    private int status = 2;  
    private Drawable del_btn;  
    private Drawable del_btn_down;  
    private int focusedDrawableId = R.drawable.user_select;// 默认的  
    private int unfocusedDrawableId = R.drawable.user;  
    private int errorDrawableId = R.drawable.user_error;  
    Drawable left = null;  
    private Context mContext;  
    /**  
     * 是否获取焦点，默认没有焦点  
     */    
    private boolean hasFocus = false;    
    /**  
     * 手指抬起时的X坐标  
     */    
    private int xUp = 0;    
  
    public LineEditText(Context context) {  
        super(context);  
        mContext = context;  
        init();  
    }  
  
    public LineEditText(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        mContext = context;  
        init();  
  
    }  
  
    public LineEditText(Context context, AttributeSet attrs, int defStryle) {  
        super(context, attrs, defStryle);  
        mContext = context;  
        TypedArray a = context.obtainStyledAttributes(attrs,  
                R.styleable.lineEdittext, defStryle, 0);  
        focusedDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableFocus, R.drawable.user_select);  
        unfocusedDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableUnFocus, R.drawable.user);  
        errorDrawableId = a.getResourceId(  
                R.styleable.lineEdittext_drawableError, R.drawable.user_error);  
        a.recycle();  
        init();  
    }  
  
    /** 
     * 2014/7/31 
     *  
     * @author Aimee.ZHANG 
     */  
    private void init() {  
        mPaint = new Paint();  
        // mPaint.setStyle(Paint.Style.FILL);  
        mPaint.setStrokeWidth(3.0f);  
        color = Color.parseColor("#bfbfbf");  
        setStatus(status);  
        del_btn = mContext.getResources().getDrawable(R.drawable.del_but_bg);  
        del_btn_down = mContext.getResources().getDrawable(R.drawable.del_but_bg_down);  
        addListeners();  
        setCompoundDrawablesWithIntrinsicBounds(left, null, null, null);  
    }  
  
    @Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        mPaint.setColor(color);  
        canvas.drawLine(0, this.getHeight() - 1, this.getWidth(),  
                this.getHeight() - 1, mPaint);  
    }  
  
    // 删除图片  
//  private void setDrawable() {  
//      if (length() < 1) {  
//          setCompoundDrawablesWithIntrinsicBounds(left, null, null, null);  
//      } else {  
//          setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn,null);  
//      }  
//  }  
  
    // 处理删除事件  
    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
        if (del_btn != null && event.getAction() == MotionEvent.ACTION_UP) {  
            // 获取点击时手指抬起的X坐标    
            xUp = (int) event.getX();    
            Log.e("xUp", xUp+"");    
            /*Rect rect = new Rect(); 
            getGlobalVisibleRect(rect); 
            rect.left = rect.right - 50;*/  
              // 当点击的坐标到当前输入框右侧的距离小于等于getCompoundPaddingRight()的距离时，则认为是点击了删除图标    
            if ((getWidth() - xUp) <= getCompoundPaddingRight()) {    
                if (!TextUtils.isEmpty(getText().toString())) {  
                    setText("");    
                }    
            }  
        }else if(del_btn != null && event.getAction() == MotionEvent.ACTION_DOWN && getText().length()!=0){  
            setCompoundDrawablesWithIntrinsicBounds(left,null,del_btn_down,null);  
        }else if(getText().length()!=0){  
            setCompoundDrawablesWithIntrinsicBounds(left,null,del_btn,null);  
        }  
        return super.onTouchEvent(event);  
    }  
  
    public void setStatus(int status) {  
        this.status = status;  
          
  
        if (status == STATUS_ERROR) {  
            try {  
                left = getResources().getDrawable(errorDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#f57272"));  
        } else if (status == STATUS_FOCUSED) {  
            try {  
                left = getResources().getDrawable(focusedDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#5e99f3"));  
        } else {  
            try {  
                left = getResources().getDrawable(unfocusedDrawableId);  
            } catch (NotFoundException e) {  
                e.printStackTrace();  
            }  
            setColor(Color.parseColor("#bfbfbf"));  
        }  
        if (left != null) {  
//          left.setBounds(0, 0, 30, 40);  
//          this.setCompoundDrawables(left, null, null, null);  
            setCompoundDrawablesWithIntrinsicBounds(left,null,null,null);  
        }  
        postInvalidate();  
    }  
  
    public void setLeftDrawable(int focusedDrawableId, int unfocusedDrawableId,  
            int errorDrawableId) {  
        this.focusedDrawableId = focusedDrawableId;  
        this.unfocusedDrawableId = unfocusedDrawableId;  
        this.errorDrawableId = errorDrawableId;  
        setStatus(status);  
    }  
     private void addListeners() {    
            try {    
                setOnFocusChangeListener(this);    
                addTextChangedListener(this);    
            } catch (Exception e) {    
                e.printStackTrace();    
            }    
        }    
    @Override  
    protected void onFocusChanged(boolean focused, int direction,  
            Rect previouslyFocusedRect) {  
        super.onFocusChanged(focused, direction, previouslyFocusedRect);  
        this.hasFocus=focused;  
        if (focused) {  
            setStatus(STATUS_FOCUSED);  
        } else {  
            setStatus(STATUS_UNFOCUSED);  
            setCompoundDrawablesWithIntrinsicBounds(left,null,null,null);  
        }  
    }  
  
    @Override  
    protected void finalize() throws Throwable {  
        super.finalize();  
    };  
  
    public void setColor(int color) {  
        this.color = color;  
        this.setTextColor(color);  
        invalidate();  
    }  
  
      
  
    @Override  
    public void afterTextChanged(Editable arg0) {  
        // TODO Auto-generated method stub  
        postInvalidate();  
    }  
  
    @Override  
    public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,  
            int arg3) {  
        // TODO Auto-generated method stub  
         if (TextUtils.isEmpty(arg0)) {    
             // 如果为空，则不显示删除图标    
             setCompoundDrawablesWithIntrinsicBounds(left, null, null, null);    
         } else {    
             // 如果非空，则要显示删除图标    
             setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn, null);    
         }    
    }  
    @Override  
     public void onTextChanged(CharSequence s, int start, int before, int after) {    
       if (hasFocus) {    
           if (TextUtils.isEmpty(s)) {    
               // 如果为空，则不显示删除图标    
               setCompoundDrawablesWithIntrinsicBounds(left, null, null, null);    
           } else {    
               // 如果非空，则要显示删除图标    
               setCompoundDrawablesWithIntrinsicBounds(left, null, del_btn, null);    
           }    
       }    
   }  
  
    @Override  
    public void onFocusChange(View arg0, boolean arg1) {  
        // TODO Auto-generated method stub  
        try {    
            this.hasFocus = arg1;    
        } catch (Exception e) {    
            e.printStackTrace();    
        }    
    }    
}  

效果图：


比较关键的方法是：onTouchEvent

当进入界面，点击输入框，要判断输入框中是否已有文字，如果有则显示灰色的删除按钮，如果没有则不显示，如果点击了删除按钮，删除按钮变蓝色


存在的问题：

这个版本依旧存在问题，就是输入长度超过输入框，所画的线不会延伸，如图


解决办法：

[java] view plain copy
@Override  
    protected void onDraw(Canvas canvas) {  
        super.onDraw(canvas);  
        mPaint.setColor(color);  
        int x=this.getScrollX();  
        int w=this.getMeasuredWidth();  
        canvas.drawLine(0, this.getHeight() - 1, w+x,  
                this.getHeight() - 1, mPaint);  
    }  

w：获取控件长度
X：延伸后的长度

最终效果：









参考文献：

http://www.oschina.net/question/54100_32466
http://www.oschina.net/android/125/attrs-xml
http://blog.csdn.net/llew2011/article/details/28909193
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/0307/986.html


http://blog.csdn.net/zwx622/article/details/38340991#comments 原文链接

aicpzl
关注
word论文封面的下划线对齐怎么弄? 下划线对不齐的解决办法
shengyin714959的博客
06-12 5359
word论文封面的下划线对齐怎么弄？论文弄封面的时候，发现下划线总是对不齐，该怎么办呢？下面我们就来看看论文封面下划线对不齐的解决办法用word制作论文封面的时候，发现一个难题，就是下划线没办法对齐，以下图的封面为例，可以看到因为填入内容长短不一，所以下划线并不太整齐。该怎么办呢？下面我们就来看看详细的教程。office 2019 专业增强版激活版 v19.0 (附离线安装包+安装激活教程)查看详情在这里需要用到表格功能，在菜单栏中选择【插入】-【表格】，根据封面内容选择行列数（6列*2行）。插入表格后，将
android中显示提示图标在edittext左侧,设置图标的大小,Android EditText搜索框实现图标居中...
weixin_42504048的博客
05-26 840
类似这样EditText 搜索框，hiht 提示有一个icon并且text内容。重写EditText ：package mobi.truekey.weapp2.widget;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import androi...
EditText右侧清除小图标的实现
hellolengyue的博客
11-07 881
EditText右侧清除小图标的实现
自定义控件之组合控件---以带下划线的EditText为例
zxhandroid的博客
06-01 851
在开发当中，为了达到特定的效果，仅仅依赖原有的android控件是不够的，这时候需要自定义一些控件。其实自定义控件，大体可分为三大类： 一、组合式控件，即将一些需要重复用到的一些控件包装在一起，组成一个新的控件； 二、继承现有的控件，自己去扩展其一些功能(如继承TextView ，EditText等); 三、继承一个View，自己去绘制出来。 可视具体情况，采取不同的方式来实现效果，这次主
Android之自定义EditText光标和下划线颜色
m0_61111814的博客
04-10 5250
​ 运行工程，仔细观察可以看到光标和下划线都是粉红色的。现在就让我们循序渐进，先修改它的光标颜色。 [](()2、自定义光标颜色 ======================================================================= EditText 有一个属性：android:textCursorDrawable ，它就是用来设置光标样式的。为了加深认识，大家先额外做个小实验：将textCursorDrawable设置为@null，表示去除系统默认的样.
android edittext 下划线没了,关于android：如何在EditText中隐藏下划线
weixin_35662171的博客
05-27 1694
如何隐藏EditText下栏(结尾有小衬线的提示行)？也许有更好的方法来做我想做的事情：我有一个带有EditText的布局。通常，在用户可以点击它并开始输入或编辑文本的地方，这会显示良好。但是，有时我希望使用相同的布局(简化其他逻辑)以只读方式显示相同的数据。我希望演示文稿是相似的-它应该有相同的高度和字体，但没有底线。作为一个停止间隙度量，我将通过删除EditText并替换一个TextView来...
Android 如何自定义EditText 下划线？
wangpeng198688的专栏
01-13 4493
OneAPM Mobile Insight 以真实用户体验为度量标准进行 Crash 分析，监控网络请求及网络错误，提升用户留存。访问 OneAPM 官方网站感受更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 官方技术博客。
简单实现EditText右侧删除按钮
Mycroft_Wong的博客
08-16 1447
和上一篇文章大致一样，只是做了简单的修改，监听文字输入，当有文字输入时，显示右侧删除按钮，同时EditText#setTouchListener，当右侧删除 Drawable 被点击时，清空 EditText。这里还是使用的 AutoCompleteTextView 来实现。 import android.app.Activity; import android.graphics.drawabl
右侧有删除图标的Edittext
06-15
例如QQ登录时，右侧的删除图标
EditText控件内右侧加图片，图片实现点击事件处理
01-07
EditText控件内右侧加图片，图片实现点击事件
Android带删除图标的EditText
董俊帅
02-17 3001
今天写了一个简单的登录界面，输入框总是很丑，加上删除按钮就感觉顺眼多了，记录一下。 看效果图： 下面上代码： 1.ClearEditText public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher { /** * 删除按钮的引用
android中显示提示图标在edittext左侧,设置图标的大小,GitHub - thinkerzhangyan/EditTextApplication: 自定义的仿IOS格式的EditText,...
weixin_39802132的博客
05-26 330
EditTextApplication失去焦点时候搜索图标居中显示，获得焦点的时候搜索图标移动到左侧显示的EditText，同时当EditText不为空时显示一键清除图标,点击清除图标清除内容。示例代码：public class MainActivity extends AppCompatActivity {private IconCenterEditText iconCenterEditText...
EditText利用代码设置左侧的图标，失效？？？
Android_Glimmer的博客
09-28 1607
EditText有两种设置图标的方法： 1、setCompoundDrawables(left, top, right, bottom) 这个方法，必须设置宽高使，用之前必须使用Drawable.setBounds设置Drawable的长宽。 2、setCompoundDrawablesWithIntrinsicBounds(left, top, right, b
王立平--EditText实现单行显示，左侧图标，提示信息
IT技术专栏
10-16 4909
android:layout_width="200dp"           android:layout_height="50dp"           android:hint="请输入账号"            android:singleLine="true"             android:drawableLeft="@drawable/ic_launcher"   /
Android EditText中添加图标的简单方法
热门推荐
Chen_xiaobao的博客
03-27 1万+
只需要在布局文件中添加drawableLeft属性，我是在最左边添加了一个图片，我的代码： &lt;EditText android:drawableLeft="@drawable/beijing1" android:id="@+id/name_et" android:layo...
往EditText中添加图标的简单方法
u012129259的博客
10-25 4778
在EditText中配置 android:drawableLeft="@drawable/tabbar_discover"属性将图片发在EditText的最左端其中属性值是你要添加的图片的名称 在Editext中配置android:drawableRightt="@drawable/tabbar_discover"属性将图片放在EditText的最右端 我的代码          and
带删除Icon的EditText
Leo666的博客
09-05 800
带删除Icon的EditText先上效果图：这个控件是比较常用的。 使用了两种实现的方法，一种是继承EditText，另一种是由EditText和ImageView组成的组合控件实现。 第一种：public class DeleteEditText extends EditText { private static final int EXTRA_AREA = 30;//额外点击范围
自定义EditText：实现可变色下划线与图标
"这篇内容是关于在Android平台上自定义EditText组件，特别是如何创建一个具有动态颜色变化、可变图标和删除按钮的下划线输入框。作者通过创建一个名为LineEditText的自定义类来实现这一功能，这个类扩展了EditText，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值