Android如何自定义EditText下划线？

2024-08-24 13:40:14

曾经做过一个项目，其中登录界面的交互令人印象深刻。交互设计师给出了一个非常作的设计，要求做出包含根据情况可变色的下划线，左侧有可变图标，右侧有可变删除标志的输入框，如图

记录制作过程：

第一版本

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=""

1、onTouchEvent 当手机点击时，第一个先执行的函数，当点击右侧删除图标是清空 edittext
2、setStatus 根据不同的状态，左边的图片不一样
存在的问题：这版本虽然基本功能已经实现，但是不符合需求，设计中要求文本框中无文字时，右侧删除按钮不显示，不点击删除按钮，删除按钮要保持灰色，点击时才可以变蓝色。

因此有了第二个版本

public class LineEditText extends EditText implements TextWatcher, <br /> 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

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

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

解决方法：

@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：延伸后的长度

最终效果：

以上就是Android实现自定义的EditText下划线的方法，希望对大家的学习有所帮助。

Android如何自定义EditText光标与下划线颜色详解

前言最近在写些小Demo复习基础,在用到EditText的时候突然发现之前几乎没有注意到它的光标和下划线的颜色,于是花了不少时间,看了不少博客,现在就来总结和分享一下收获,话不多说了,来一起看看详细的介绍: 1.第一印象:原生的EditText 我们要在原生的EditText上修改,首先当然要认识一下它的本来面目.在Android Studio中新建一个工程,让MainActivity继承于AppCompatActivity(为什么要这样做,后面再说),然后在MainActivity的布局中放
Android中EditText如何去除边框添加下划线

废话不多说了,直接给大家贴代码了. <span style="font-family: Arial, Helvetica, sans-serif;"><?xml version="1.0" encoding="utf-8"?> </span> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
Android更改EditText下划线颜色样式的方法

前言相信大家都知道,当使用AppCompatEditText(Edit Text)时,默认的下划线是跟随系统的#FF4081的颜色值的,通过改变这个值可以改变所有的颜色样式有时候你想单独定义某一个界面的颜色样式,则可以这样做: 1.在你的build.gradle中添加最新的appcompat库 dependencies { compile 'com.android.support:appcompat-v7:X.X.X' // X.X.X 为最新的版本号 } 2.让你的activity继承an
Android如何自定义EditText下划线？

曾经做过一个项目,其中登录界面的交互令人印象深刻.交互设计师给出了一个非常作的设计,要求做出包含根据情况可变色的下划线,左侧有可变图标,右侧有可变删除标志的输入框,如图记录制作过程: 第一版本 public class LineEditText extends EditText { private Paint mPaint; private int color; public static final int STATUS_FOCUSED = 1; public static final in
android里TextView加下划线的几种方法总结

如果是在资源文件里: <resources> <string name="hello"><u>phone:0123456</u></string> <string name="app_name">MyLink</string> </resources> 如果是代码里: TextView textView = (TextView)findViewById(R.id.tv_t
Android UI设计系列之自定义TextView属性实现带下划线的文本框（4）

在Android开发过程中,如果Android系统自带的属性不能满足我们日常开发的需求,那么就需要我们给系统控件添加额外的属性了.假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧.还好Android中自定义属性不是很复杂,也可以归纳为三步走吧. 老规矩,还是先贴出工程目录吧: 一.添加属性文件在values文件夹中新建attrs.xml文件,在文件中新建属性
利用CSS，链接下划线也玩自定义

原文链接:CSS Design: Custom Underlines 由 A List Apart 杂志及作者授权翻译.(Translated with the permission of A List Apart Magazine and the author[s].) 说明:文章中"[补充]"内容系译者所补充添加(来自 CSS 2.0 中文手册),目的是方便读者理解相关内容. 虽然网页设计师通常有大量的方法控制文档如何呈现,但是基本的CSS不能为页面中链接下方的下划线样式提供很多选
CSS：自定多姿多彩的网页链接下划线

CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩. 一.基本原理首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果.如果要显示出下划线背后的网页背景,可以使用透明的.gif图形. 其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }. 自定义链接下划线示例第三,为显示出
Android实现EditText添加下划线

在安卓高版本,默认是有下划线的,其默认下划线的颜色是由其主题颜色来控制的! 控制如下: <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  <item name="colorPrimary">@color/colorPrimary</item>
Android自定义EditText右侧带图片控件

前言最近项目做用户登录模块需要一个右边带图片的EditText,图片可以设置点击效果,所以就查资料做了一个自定义EditText出来,方便以后复用. 原理下面是自定义EditText的代码,具体难点是要实现图片的点击监听,因为谷歌官方至今没有给出一个直接实现EditText里面图片的监听API.我的做法是整个控件绑定一个OnTouchListener,然后监测点击事件,检测点击位置的X坐标是否在图片的覆盖范围内(下面getCompoundDrawables()[2]里面的2是代表图片在Edi

Android如何自定义EditText下划线？

相关推荐

随机推荐