前言

Android開發(fā)中，EditText的使用 非常常見
本文將手把手教你做一款 附帶一鍵刪除功能 & 自定義樣式豐富的 SuperEditText控件，希望你們會喜歡。

效果圖

已在Github開源：Super_EditText，歡迎 Star ！

1. 簡介

一款 附帶一鍵刪除功能 & 自定義樣式豐富的 SuperEditText控件

已在Github開源：Super_EditText，歡迎 Star ！

效果圖

2. 功能介紹

2.1 需求場景

對于 EditText來說，一般的需求有：

方便用戶因出現(xiàn)輸入錯誤而進行2次輸入
標識用戶正在填寫項
根據(jù)具體場景增加一定的UI元素

2.2 功能需求

根據(jù)需求場景，得出EditText需要具備的功能如下：

一鍵刪除
豐富的自定義樣式：左側(cè)圖標、刪除功能圖標、分割線 & 光標樣式變化。具體如下圖：

示意圖

注：該樣式的設置是系統(tǒng)自帶的 API 所不具備的

功能列表

示意圖

2.3 功能示意

效果圖

3. 特點

對比市面上EditText控件，該控件Super_EditText 的特點是：

3.1 功能實用

一鍵刪除功能在需求中非常常見，現(xiàn)將其封裝后更加方便使用
可自定義樣式程度高（比自帶的強大 & 方便），不復雜卻能滿足一般的EditText使用需求

可自定義樣式如下：（注：該樣式的設置是系統(tǒng)自帶的 API 所不具備的）

示意圖

3.2 使用簡單

僅需要簡單的xml屬性配置
具體請看文章：Android自定義View：你需要一款簡單實用的SuperEditText(一鍵刪除&自定義樣式)

3.3 二次開發(fā)成本低

本項目已在 Github上開源：Super_EditText
具備詳細的源碼分析文檔（即本文）

所以，在其上做二次開發(fā) & 定制化成本非常低。

4. 功能詳細設計

下面將給出詳細的功能邏輯

4.1 一鍵清空輸入字段

描述：將當前用戶輸入的字段清空
需求場景：方便用戶因出現(xiàn)輸入錯誤而進行2次輸入
原型圖

示意圖

源碼分析

   /*
    * 步驟1：定義屬性
    * */

    private int  ic_deleteResID; // 刪除圖標 資源ID
    private Drawable  ic_delete; // 刪除圖標
    private int delete_x,delete_y,delete_width,delete_height; // 刪除圖標起點(x,y)、刪除圖標寬、高（px）

    /*
    * 步驟2：初始化屬性
    * */
   private void init(Context context, AttributeSet attrs) {

        // 獲取控件資源
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SuperEditText);
       /**
         * 初始化刪除圖標
         */
         // 1. 獲取資源ID
         ic_deleteResID = typedArray.getResourceId(R.styleable.SuperEditText_ic_delete,R.drawable.delete);
         // 2. 根據(jù)資源ID獲取圖標資源（轉(zhuǎn)化成Drawable對象）
         ic_delete =  getResources().getDrawable(ic_deleteResID);
         // 3. 設置圖標大小
         // 起點(x，y)、寬= left_width、高 = left_height
         delete_x = typedArray.getInteger(R.styleable.SuperEditText_delete_x, 0);
         delete_y = typedArray.getInteger(R.styleable.SuperEditText_delete_y, 0);
         delete_width = typedArray.getInteger(R.styleable.SuperEditText_delete_width, 60);
         delete_height = typedArray.getInteger(R.styleable.SuperEditText_delete_height, 60);
         ic_delete.setBounds(delete_x, delete_y, delete_width, delete_height);

   /**
     * 步驟3：通過監(jiān)聽復寫EditText本身的方法來確定是否顯示刪除圖標
     * 監(jiān)聽方法：onTextChanged（） & onFocusChanged（）
     * 調(diào)用時刻：當輸入框內(nèi)容變化時 & 焦點發(fā)生變化時
     */
    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        setDeleteIconVisible(hasFocus() && text.length() > 0,hasFocus());
        // hasFocus()返回是否獲得EditTEXT的焦點，即是否選中
        // setDeleteIconVisible（） = 根據(jù)傳入的是否選中 & 是否有輸入來判斷是否顯示刪除圖標->>關注1
    }

    @Override
    protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect);
        setDeleteIconVisible(focused && length() > 0,focused);
        // focused = 是否獲得焦點
        // 同樣根據(jù)setDeleteIconVisible（）判斷是否要顯示刪除圖標->>關注1
    }

   /**
     * 關注1
     * 作用：判斷是否顯示刪除圖標
     */
    private void setDeleteIconVisible(boolean deleteVisible,boolean leftVisible) {
        setCompoundDrawables(leftVisible ?  ic_left_click :  ic_left_unclick, null,
                deleteVisible ?  ic_delete: null, null);

    // setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)介紹
        // 作用：在EditText上、下、左、右設置圖標（相當于android:drawableLeft=""  android:drawableRight=""）
        // 備注：傳入的Drawable對象必須已經(jīng)setBounds(x,y,width,height)，即必須設置過初始位置、寬和高等信息
        // x:組件在容器X軸上的起點 y:組件在容器Y軸上的起點 width:組件的長度 height:組件的高度
        // 若不想在某個地方顯示，則設置為null

        // 另外一個相似的方法：setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom)
        // 作用：在EditText上、下、左、右設置圖標
        // 與setCompoundDrawables的區(qū)別：setCompoundDrawablesWithIntrinsicBounds（）傳入的Drawable的寬高=固有寬高（自動通過getIntrinsicWidth（）& getIntrinsicHeight（）獲取）
        // 不需要設置setBounds(x,y,width,height)
    }


   /**
     * 步驟4：對刪除圖標區(qū)域設置點擊事件，即"點擊 = 清空搜索框內(nèi)容"
     * 原理：當手指抬起的位置在刪除圖標的區(qū)域，即視為點擊了刪除圖標 = 清空搜索框內(nèi)容
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        // 原理：當手指抬起的位置在刪除圖標的區(qū)域，即視為點擊了刪除圖標 = 清空搜索框內(nèi)容
        switch (event.getAction()) {
            // 判斷動作 = 手指抬起時
            case MotionEvent.ACTION_UP:
                Drawable drawable =  ic_delete;

                if (drawable != null && event.getX() <= (getWidth() - getPaddingRight())
                        && event.getX() >= (getWidth() - getPaddingRight() - drawable.getBounds().width())) {

                    // 判斷條件說明
                    // event.getX() ：抬起時的位置坐標
                    // getWidth()：控件的寬度
                    // getPaddingRight():刪除圖標圖標右邊緣至EditText控件右邊緣的距離
                    // 即：getWidth() - getPaddingRight() = 刪除圖標的右邊緣坐標 = X1
                        // getWidth() - getPaddingRight() - drawable.getBounds().width() = 刪除圖標左邊緣的坐標 = X2
                    // 所以X1與X2之間的區(qū)域 = 刪除圖標的區(qū)域
                    // 當手指抬起的位置在刪除圖標的區(qū)域（X2=<event.getX() <=X1），即視為點擊了刪除圖標 = 清空搜索框內(nèi)容
                    setText("");

                }
                break;
        }
        return super.onTouchEvent(event);
    }

示意圖

4.2 選中樣式

描述：通過增加UI元素 & 交互樣式表示用戶正在填寫的項目
需求場景：標識用戶正在填寫項
樣式說明

示意圖

原型圖

示意圖

屬性說明

示意圖

源碼分析

   /*
    * 步驟1：定義屬性
    * */
    private Paint mPaint; // 畫筆
    private int  ic_left_clickResID,ic_left_unclickResID;    // 左側(cè)圖標 資源ID（點擊 & 無點擊）
    private Drawable  ic_left_click,ic_left_unclick; // 左側(cè)圖標（點擊 & 未點擊）
    private int left_x,left_y,left_width,left_height; // 左側(cè)圖標起點（x,y）、左側(cè)圖標寬、高（px）

    private int cursor; // 光標

    // 分割線變量
    private int lineColor_click,lineColor_unclick;// 點擊時 & 未點擊顏色
    private int color; 
    private int linePosition; // 分割線位置

   /*
    * 步驟2：初始化屬性
    * */
private void init(Context context, AttributeSet attrs) {

        // 獲取控件資源
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SuperEditText);

        /**
         * 初始化左側(cè)圖標（點擊 & 未點擊）
         */

        // a. 點擊狀態(tài)的左側(cè)圖標
         // 1. 獲取資源ID
         ic_left_clickResID = typedArray.getResourceId(R.styleable.SuperEditText_ic_left_click, R.drawable.ic_left_click);
         // 2. 根據(jù)資源ID獲取圖標資源（轉(zhuǎn)化成Drawable對象）
         ic_left_click =  getResources().getDrawable(ic_left_clickResID);
         // 3. 設置圖標大小
         // 起點(x，y)、寬= left_width、高 = left_height
         left_x = typedArray.getInteger(R.styleable.SuperEditText_left_x, 0);
         left_y = typedArray.getInteger(R.styleable.SuperEditText_left_y, 0);
         left_width = typedArray.getInteger(R.styleable.SuperEditText_left_width, 60);
         left_height = typedArray.getInteger(R.styleable.SuperEditText_left_height, 60);

         ic_left_click.setBounds(left_x, left_y,left_width, left_height);
         // Drawable.setBounds(x,y,width,height) = 設置Drawable的初始位置、寬和高等信息
         // x = 組件在容器X軸上的起點、y = 組件在容器Y軸上的起點、width=組件的長度、height = 組件的高度

        // b. 未點擊狀態(tài)的左側(cè)圖標
         // 1. 獲取資源ID
         ic_left_unclickResID = typedArray.getResourceId(R.styleable.SuperEditText_ic_left_unclick, R.drawable.ic_left_unclick);
         // 2. 根據(jù)資源ID獲取圖標資源（轉(zhuǎn)化成Drawable對象）
         // 3. 設置圖標大?。ù颂幠J左側(cè)圖標點解 & 未點擊狀態(tài)的大小相同）
         ic_left_unclick =  getResources().getDrawable(ic_left_unclickResID);
         ic_left_unclick.setBounds(left_x, left_y,left_width, left_height);

        /**
         * 設置EditText左側(cè)圖片（初始狀態(tài)僅有左側(cè)圖片））
         */
        setCompoundDrawables( ic_left_unclick, null,
                null, null);

        // setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)介紹
        // 作用：在EditText上、下、左、右設置圖標（相當于android:drawableLeft=""  android:drawableRight=""）
        // 備注：傳入的Drawable對象必須已經(jīng)setBounds(x,y,width,height)，即必須設置過初始位置、寬和高等信息
        // x:組件在容器X軸上的起點 y:組件在容器Y軸上的起點 width:組件的長度 height:組件的高度
        // 若不想在某個地方顯示，則設置為null

        // 另外一個相似的方法：setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom)
        // 作用：在EditText上、下、左、右設置圖標
        // 與setCompoundDrawables的區(qū)別：setCompoundDrawablesWithIntrinsicBounds（）傳入的Drawable的寬高=固有寬高（自動通過getIntrinsicWidth（）& getIntrinsicHeight（）獲?。?        // 不需要設置setBounds(x,y,width,height)

        /**
         * 初始化光標（顏色 & 粗細）
         */
         // 原理：通過 反射機制 動態(tài)設置光標
         // 1. 獲取資源ID
         cursor = typedArray.getResourceId(R.styleable.SuperEditText_cursor, R.drawable.cursor);
         try {

            // 2. 通過反射 獲取光標屬性
            Field f = TextView.class.getDeclaredField("mCursorDrawableRes");
            f.setAccessible(true);
            // 3. 傳入資源ID
            f.set(this, cursor);

         } catch (Exception e) {
            e.printStackTrace();
         }

        /**
         * 初始化分割線（顏色、粗細、位置）
         */
         // 1. 設置畫筆
         mPaint = new Paint();
         mPaint.setStrokeWidth(2.0f); // 分割線粗細

         // 2. 設置分割線顏色（使用十六進制代碼，如#333、#8e8e8e）
         int lineColorClick_default = context.getResources().getColor(R.color.lineColor_click); // 默認 = 藍色#1296db
         int lineColorunClick_default = context.getResources().getColor(R.color.lineColor_unclick); // 默認 = 灰色#9b9b9b
         lineColor_click = typedArray.getColor(R.styleable.SuperEditText_lineColor_click, lineColorClick_default);
         lineColor_unclick = typedArray.getColor(R.styleable.SuperEditText_lineColor_unclick, lineColorunClick_default);
         color = lineColor_unclick;

         mPaint.setColor(lineColor_unclick); // 分割線默認顏色 = 灰色
         setTextColor(color); // 字體默認顏色 = 灰色

         // 3. 分割線位置
         linePosition = typedArray.getInteger(R.styleable.SuperEditText_linePosition, 5);
         // 消除自帶下劃線
         setBackground(null);


   /**
     * 步驟3：通過監(jiān)聽復寫EditText本身的方法來設置所有樣式
     * 監(jiān)聽方法：onTextChanged（） & onFocusChanged（）
     * 調(diào)用時刻：當輸入框內(nèi)容變化時 & 焦點發(fā)生變化時
     */
      @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        setDeleteIconVisible(hasFocus() && text.length() > 0,hasFocus());
        // hasFocus()返回是否獲得EditTEXT的焦點，即是否選中
        // setDeleteIconVisible（） = 根據(jù)傳入的是否選中 & 是否有輸入來判斷是否顯示刪除圖標->>關注1
    }

    @Override
    protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect);
        setDeleteIconVisible(focused && length() > 0,focused);
        // focused = 是否獲得焦點
        // 同樣根據(jù)setDeleteIconVisible（）判斷是否要顯示刪除圖標->>關注1
    }

    /**
     * 關注1
     * 作用：設置分割線顏色
     */
    private void setDeleteIconVisible(boolean deleteVisible,boolean leftVisible) {
        color = leftVisible ? lineColor_click : lineColor_unclick;
        setTextColor(color);
        invalidate();
    }

   /**
     * 步驟4：繪制分割線
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(color);
        setTextColor(color);
        // 繪制分割線
        // 需要考慮：當輸入長度超過輸入框時，所畫的線需要跟隨著延伸
        // 解決方案：線的長度 = 控件長度 + 延伸后的長度
        int x=this.getScrollX(); // 獲取延伸后的長度
        int w=this.getMeasuredWidth(); // 獲取控件長度

        // 傳入?yún)?shù)時，線的長度 = 控件長度 + 延伸后的長度
                canvas.drawLine(0, this.getMeasuredHeight()- linePosition, w+x,
                        this.getMeasuredHeight() - linePosition, mPaint);

    }
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SuperEditText">

        <attr name="ic_delete" format="reference" />
        <attr name="delete_x" format="integer"  />
        <attr name="delete_y" format="integer"  />
        <attr name="delete_width" format="integer"  />
        <attr name="delete_height" format="integer"  />
        
        <attr name="ic_left_click" format="reference" />
        <attr name="ic_left_unclick" format="reference" />
        <attr name="left_x" format="integer"  />
        <attr name="left_y" format="integer"  />
        <attr name="left_width" format="integer"  />
        <attr name="left_height" format="integer"  />

        <attr name="lineColor_click" format="color"  />
        <attr name="lineColor_unclick" format="color"  />
        <attr name="linePosition" format="integer"  />

        <attr name="cursor" format="reference" />

    </declare-styleable>
</resources>

cursor.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@color/lineColor_click" />
    <size android:width="1dp" />

</shape>

5. 完整源碼地址

Carson_Ho的Github地址：Super_EditText

6. 具體使用

具體請看文章：Android自定義View：你需要一款簡單實用的SuperEditText(一鍵刪除&自定義樣式)

7. 貢獻代碼

希望你們能和我一起完善這款簡單 & 好用的SuperEditText控件，具體請看：貢獻代碼說明
關于該開源項目的意見 & 建議可在Issue上提出。歡迎 Star ！

8. 總結(jié)

相信你一定會喜歡上 這款簡單 & 好用的SuperEditText控件

已在Github上開源：Super_EditText，歡迎 Star ！

效果圖

Carson帶你學自定義View文章系列：
Carson帶你學自定義View：自定義View基礎
 Carson帶你學自定義View：一文梳理自定義View工作流程
 Carson帶你學自定義View：Measure過程
 Carson帶你學自定義View：Layout過程
 Carson帶你學自定義View：Draw過程
 Carson帶你學自定義View：手把手教你寫一個完整的自定義View
Carson帶你學自定義View：Canvas類全面解析
 Carson帶你學自定義View：Path類全面解析

歡迎關注Carson_Ho的簡書

不定期分享關于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Android開源：手把手教你做一款含一鍵刪除&自定義樣式的SuperEditText

Android開源：手把手教你做一款含一鍵刪除&自定義樣式的SuperEditText

前言

目錄

1. 簡介

2. 功能介紹

2.1 需求場景

2.2 功能需求

2.3 功能示意

3. 特點

3.1 功能實用

3.2 使用簡單

3.3 二次開發(fā)成本低

4. 功能詳細設計

4.1 一鍵清空輸入字段

4.2 選中樣式

5. 完整源碼地址

6. 具體使用

7. 貢獻代碼

8. 總結(jié)

歡迎關注Carson_Ho的簡書

請點贊！因為你的鼓勵是我寫作的最大動力！

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Android開源：手把手教你做一款含一鍵刪除&自定義樣式的SuperEditText

前言

目錄

1. 簡介

2. 功能介紹

2.1 需求場景

2.2 功能需求

2.3 功能示意

3. 特點

3.1 功能實用

3.2 使用簡單

3.3 二次開發(fā)成本低

4. 功能詳細設計

4.1 一鍵清空輸入字段

4.2 選中樣式

5. 完整源碼地址

6. 具體使用

7. 貢獻代碼

8. 總結(jié)

歡迎關注Carson_Ho的簡書

請點贊！因為你的鼓勵是我寫作的最大動力！

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

請點贊！因為你的鼓勵是我寫作的最大動力！