Android自定義控件EditText使用詳解

更新時間：2017年12月07日 10:47:41 作者：Mr_Zhongquan

這篇文章主要為大家詳細(xì)介紹了Android自定義控件EditText的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android自定義控件EditText的具體代碼，供大家參考，具體內(nèi)容如下

自定義控件分三種：

1. 自繪控件
2. 組合控件
3. 繼承控件

代碼已上傳到 github
以后的自定義控件就都放這個倉庫

需求

這里由于項(xiàng)目的需要實(shí)現(xiàn)一個自定義EditText,主要實(shí)現(xiàn)的為兩點(diǎn)，一個是工具圖標(biāo)toolIcon，例如點(diǎn)擊清除EditText內(nèi)容。一個為EditText左邊的提示圖標(biāo)hintIcon, 例如輸入賬號密碼時前面的圖標(biāo)。

為了讓這個控件的拓展性更高，設(shè)置了兩個點(diǎn)擊事件接口。對于toolIcon來說，默認(rèn)點(diǎn)擊事件為清除EditText內(nèi)容，如果需要更改，在代碼中設(shè)設(shè)置相關(guān)的點(diǎn)擊事件即可。

步驟

繼承EditText
編寫attrs.xml, 創(chuàng)建declare-styleable
編寫MyEditText
布局中使用

實(shí)現(xiàn)

獲取布局文件中設(shè)置的屬性

這里返回的是一個TypedArray數(shù)組，獲取之后就可以獲得布局文件中設(shè)置的屬性了

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("");
   }
  };
 }

設(shè)置資源圖片

EditText是繼承自TextView，在TextView中存在兩個方法

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

是設(shè)置資源圖片的位置，第一個方法和第二個方法的區(qū)別在于第一個方法中資源圖片的大小是由系統(tǒng)來獲取圖片固有的大小，第二個方法則是需要自己通過LayoutParams設(shè)置大小。

設(shè)置點(diǎn)擊事件

我們通過setCompoundDrawables()等方法設(shè)置的圖片，而由于在父類中并沒有提供相關(guān)的圖片點(diǎn)擊處理接口，因此可以重寫onTouchEvent()來實(shí)現(xiàn)相關(guān)的點(diǎn)擊事件，只需要根據(jù)我們手指落點(diǎn)或抬起點(diǎn)的位置就可以判斷手指是否點(diǎn)擊了相關(guān)圖片。在這里，我選擇了手指抬起時處理

/**
  * 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: