Android自定义控件EditText使用详解

本文实例为大家分享了Android自定义控件EditText的具体代码，供大家参考，具体内容如下

自定义控件分三种：

1. 自绘控件
2. 组合控件
3. 继承控件

代码已上传到 github
以后的自定义控件就都放这个仓库

需求

这里由于项目的需要实现一个自定义EditText,主要实现的为两点，一个是工具图标toolIcon，例如点击清除EditText内容。一个为EditText左边的提示图标hintIcon, 例如输入账号密码时前面的图标。

为了让这个控件的拓展性更高，设置了两个点击事件接口。对于toolIcon来说，默认点击事件为清除EditText内容，如果需要更改，在代码中设设置相关的点击事件即可。

步骤

继承EditText
编写attrs.xml, 创建declare-styleable
编写MyEditText
布局中使用

实现

获取布局文件中设置的属性

这里返回的是一个TypedArray数组，获取之后就可以获得布局文件中设置的属性了

private void init(Context context, AttributeSet attrs) {
  TypedArray typedArray = context.getTheme().obtainStyledAttributes(
    attrs,
    R.styleable.MyEditText,
    0, 0);

  hintIcon = typedArray.getDrawable(R.styleable.MyEditText_hintIcon);
  toolIcon = typedArray.getDrawable(R.styleable.MyEditText_toolIcon);
  fixed = typedArray.getBoolean(R.styleable.MyEditText_fixed, true);

  if (toolIcon != null && fixed) {
   setHeight(toolIcon.getIntrinsicHeight());
  }

  setCompoundDrawablesWithIntrinsicBounds(hintIcon, null, null, null);

  setCompoundDrawablePadding(10);

  typedArray.recycle();

  onClickListenerWithEditTextToolIcon = new OnClickListenerWithEditTextToolIcon() {
   @Override
   public void onClick() {
    setText("");
   }
  };
 }

设置资源图片

EditText是继承自TextView，在TextView中存在两个方法

setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom)
setCompoundDrawables(left, top, right, bottom)

是设置资源图片的位置，第一个方法和第二个方法的区别在于第一个方法中资源图片的大小是由系统来获取图片固有的大小，第二个方法则是需要自己通过LayoutParams设置大小。

设置点击事件

我们通过setCompoundDrawables()等方法设置的图片，而由于在父类中并没有提供相关的图片点击处理接口，因此可以重写onTouchEvent()来实现相关的点击事件，只需要根据我们手指落点或抬起点的位置就可以判断手指是否点击了相关图片。在这里，我选择了手指抬起时处理

/**
  * Override the touchEvent to judge whether click toolIcon or hintIcon
  *
  * @param event motionEvent
  * @return super
  */
 @Override
 public boolean onTouchEvent(MotionEvent event) {

  if (event.getAction() == MotionEvent.ACTION_UP) {
   if (hintIcon != null) {
    if (event.getX() < hintIcon.getIntrinsicWidth()
      && event.getX() > 0) {
     if (getCompoundDrawables()[0] != null
       && onClickListenerWithEditTextHintIcon != null) {
      onClickListenerWithEditTextHintIcon.onClick();
     }
    }
   }

   if (toolIcon != null) {
    if (event.getX() > (getWidth()
      - toolIcon.getIntrinsicWidth())
      && event.getX() < getWidth()) {
     if (getCompoundDrawables()[2] != null ) {
      onClickListenerWithEditTextToolIcon.onClick();
     }
    }
   }
  }

  return super.onTouchEvent(event);
 }

/**
  * interface when click hintIcon
  */
 public interface OnClickListenerWithEditTextHintIcon {
  void onClick();
 }

 /**
  * interface when click toolIcon
  */
 public interface OnClickListenerWithEditTextToolIcon {
  void onClick();
 }

完整代码

package com.customwidget.lzqwidget.cuswidget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.EditText;

import com.customwidget.lzqwidget.R;

/**
 * Custom widget of EditText with two icon.
 * Created by lizhongquan on 16-1-6.
 */
public class MyEditText extends EditText {

 private Drawable hintIcon = null;
 private Drawable toolIcon = null;

 /**
  * HintIcon clickListener
  */
 private OnClickListenerWithEditTextHintIcon onClickListenerWithEditTextHintIcon = null;

 /**
  * Default clear the EditText
  */
 private OnClickListenerWithEditTextToolIcon onClickListenerWithEditTextToolIcon = null;

 /**
  * Default fixed the Height
  */
 private boolean fixed = true;

 public MyEditText(Context context) {
  super(context);
 }

 public MyEditText(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs);
 }

 public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs);
 }

 private void init(Context context, AttributeSet attrs) {
  TypedArray typedArray = context.getTheme().obtainStyledAttributes(
    attrs,
    R.styleable.MyEditText,
    0, 0);

  hintIcon = typedArray.getDrawable(R.styleable.MyEditText_hintIcon);
  toolIcon = typedArray.getDrawable(R.styleable.MyEditText_toolIcon);
  fixed = typedArray.getBoolean(R.styleable.MyEditText_fixed, true);

  if (toolIcon != null && fixed) {
   setHeight(toolIcon.getIntrinsicHeight());
  }

  setCompoundDrawablesWithIntrinsicBounds(hintIcon, null, null, null);

  setCompoundDrawablePadding(10);

  typedArray.recycle();

  onClickListenerWithEditTextToolIcon = new OnClickListenerWithEditTextToolIcon() {
   @Override
   public void onClick() {
    setText("");
   }
  };
 }

 /**
  * Override the touchEvent to judge whether click toolIcon or hintIcon
  *
  * @param event motionEvent
  * @return super
  */
 @Override
 public boolean onTouchEvent(MotionEvent event) {

  if (event.getAction() == MotionEvent.ACTION_UP) {
   if (hintIcon != null) {
    if (event.getX() < hintIcon.getIntrinsicWidth()
      && event.getX() > 0) {
     if (getCompoundDrawables()[0] != null
       && onClickListenerWithEditTextHintIcon != null) {
      onClickListenerWithEditTextHintIcon.onClick();
     }
    }
   }

   if (toolIcon != null) {
    if (event.getX() > (getWidth()
      - toolIcon.getIntrinsicWidth())
      && event.getX() < getWidth()) {
     if (getCompoundDrawables()[2] != null ) {
      onClickListenerWithEditTextToolIcon.onClick();
     }
    }
   }
  }

  return super.onTouchEvent(event);
 }

 /**
  * the clickListener of click hintIcon
  *
  * @param clickListenerOfHintIcon OnClickListenerWithEditTextHintIcon
  */
 public void setOnClickListenerWithEditTextHintIcon(
   OnClickListenerWithEditTextHintIcon clickListenerOfHintIcon) {
  this.onClickListenerWithEditTextHintIcon = clickListenerOfHintIcon;
 }

 /**
  * the clickListener of click toolIcon
  *
  * @param clickListenerOfToolIcon OnClickListenerWithEditTextToolIcon
  */
 public void setOnClickListenerWithEditTextToolIcon(
   OnClickListenerWithEditTextToolIcon clickListenerOfToolIcon) {
  this.onClickListenerWithEditTextToolIcon = clickListenerOfToolIcon;
 }

 /**
  * onTextChange
  *
  * @param text   text
  * @param start  start
  * @param lengthBefore lengthBefore
  * @param lengthAfter lengthAfter
  */
 @Override
 protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
  super.onTextChanged(text, start, lengthBefore, lengthAfter);

  if (text.length() > 0 && getCompoundDrawables()[2] == null && toolIcon != null) {
//   hintIcon.setBounds(10, 0, 10, 0);
   setCompoundDrawablesWithIntrinsicBounds(hintIcon, null, toolIcon, null);
  }

  if (text.length() == 0 && getCompoundDrawables()[2] != null && toolIcon != null) {
   setCompoundDrawablesWithIntrinsicBounds(hintIcon, null, null, null);
  }
 }

 /**
  * interface when click hintIcon
  */
 public interface OnClickListenerWithEditTextHintIcon {
  void onClick();
 }

 /**
  * interface when click toolIcon
  */
 public interface OnClickListenerWithEditTextToolIcon {
  void onClick();
 }
}

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <declare-styleable name="MyEditText">
  <attr name="hintIcon" format="integer" />
  <attr name="toolIcon" format="integer" />
  <attr name="fixed" format="boolean" />
 </declare-styleable>

</resources>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

• Android自定义控件实现九宫格解锁功能
• Android自定义控件之日期选择控件使用详解
• Android编程实现自定义控件的方法示例
• 基于Android自定义控件实现雷达效果
• Android自定义控件实现下拉刷新效果
• Android自定义控件EditText实现清除和抖动功能
• Android自定义控件打造绚丽平行空间引导页
• Android自定义控件ViewFipper实现竖直跑马灯效果
• Android自定义控件ImageView实现点击之后出现阴影效果
• android自定义控件ImageView实现圆形图片
• 实例讲解Android自定义控件