2. 程式人生 > >Android自定義View之六位密碼框

Android自定義View之六位密碼框

阿新 • • 發佈：2019-02-04

今天是我第一次寫技術部落格，本人也是小菜鳥一枚，工作不滿一年，部落格內容也比較簡單，對專業知識瞭解不夠深入，寫部落格的原因一來是為了分享，而來也是激勵自己，如果內容有什麼錯誤問題，請大家指教糾正。

今天要講的是六位密碼輸入框。先上程式碼。首先是layout.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="55dip"
    android:gravity="center"
    android:layout_gravity="center"
    android:orientation="horizontal">
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e1"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topayl"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng1"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e2"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topaym"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng2"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e3"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topaym"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng3"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e4"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topaym"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng4"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e5"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topaym"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng5"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" >
        <EditText
            android:id="@+id/e6"
            android:layout_width="45dip"
            android:layout_height="fill_parent"
            android:background="@drawable/topayr"
            android:gravity="center"
            android:inputType="numberPassword"
            android:maxLength="1" />
        <TextView
            android:id="@+id/heng6"
            android:layout_width="15dip"
            android:layout_height="2dip"
            android:layout_gravity="center"
            android:background="@color/black"
            android:gravity="center"
            android:visibility="gone" />
    </FrameLayout>
</LinearLayout>
以上程式碼比較簡單，這裡六個EditText下面的TextView暫時不看。出來的效果是六個框框。

下面是自定義View的程式碼

/**


 * Created by HYQ on 2016/3/3.
 */
public class SixPwdView extends LinearLayout{
    private Context context;
    private SixPwdListener listener;
    private EditText e1,e2,e3,e4,e5,e6;
    private String s_e1, s_e2, s_e3, s_e4, s_e5, s_e6;
    private onKeyListeners onkeylistener;


    public SixPwdView(Context context) {
        super(context);
        this.context = context;
    }


    public SixPwdView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initView();
    }


    public void clear_edit() {
        e1.setText("");
        e2.setText("");
        e3.setText("");
        e4.setText("");
        e5.setText("");
        e6.setText("");
    }
    /**
     * 取消e6的焦點
     */
    public void clearLastFouse(){
        e6.setFocusable(false);
        e6.setFocusableInTouchMode(false);
        e6.clearFocus();
    }


    public void getLastFouse(){
        e6.setFocusable(true);
        e6.setFocusableInTouchMode(true);
        e6.requestFocus();
        e6.findFocus();
    }


    //初始化view
    private void initView() {
        View view = LayoutInflater.from(context).inflate(R.layout.six_pwd_layout,this);
        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
        params.height = (int) context.getResources().getDimension(R.dimen.dp52);
        view.setLayoutParams(params);
        e1 = (EditText)view.findViewById(R.id.e1);
        e2 = (EditText)view.findViewById(R.id.e2);
        e3 = (EditText)view.findViewById(R.id.e3);
        e4 = (EditText)view.findViewById(R.id.e4);
        e5 = (EditText)view.findViewById(R.id.e5);
        e6 = (EditText)view.findViewById(R.id.e6);
        onkeylistener = new onKeyListeners();
        e1.setOnKeyListener(onkeylistener);
        e2.setOnKeyListener(onkeylistener);
        e3.setOnKeyListener(onkeylistener);
        e4.setOnKeyListener(onkeylistener);
        e5.setOnKeyListener(onkeylistener);
        e6.setOnKeyListener(onkeylistener);


        e1.setCursorVisible(false);
        e2.setCursorVisible(false);
        e3.setCursorVisible(false);
        e4.setCursorVisible(false);
        e5.setCursorVisible(false);
        e6.setCursorVisible(false);
        clear_focuse();
        setaddTextChangedListener();
    }


    private  void setaddTextChangedListener(){
        e1.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e1.getText().toString().equals("")) {
                    // heng1.setVisibility(View.VISIBLE);
                } else {
                    s_e1 = e1.getText().toString();
                    e2_focuse();
                }
            }
        });


        e2.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e2.getText().toString().equals("")) {
                } else {
                    s_e2 = e2.getText().toString();
                    e3_focuse();
                }
            }
        });


        e3.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e3.getText().toString().equals("")) {
                } else {
                    s_e3 = e3.getText().toString();
                    e4_focuse();
                }
            }
        });


        e4.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e4.getText().toString().equals("")) {
                } else {
                    s_e4 = e4.getText().toString();
                    e5_focuse();
                }
            }
        });


        e5.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e5.getText().toString().equals("")) {
                } else {
                    s_e5 = e5.getText().toString();
                    last_focuse();
                }
            }
        });


        e6.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }


            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }


            @Override
            public void afterTextChanged(Editable s) {
                if (e6.getText().toString().equals("")) {
                } else {
                    e6.setFocusable(false);
                    s_e6 = e6.getText().toString();
                    isfirstallwrite();
                }
            }
        });
    }
    public void setLastFocuse(){
        e6.setFocusable(true);
        e6.setFocusableInTouchMode(true);
        e6.requestFocus();
        e6.findFocus();
    }


    public void  getLockTime(){
        e1.setFocusable(false);
        e2.setFocusable(false);
        e3.setFocusable(false);
        e4.setFocusable(false);
        e5.setFocusable(false);
        e6.setFocusable(false);
    }


    String eString = "";
    private void isfirstallwrite() {
        if (!TextUtils.isEmpty(s_e1) && !TextUtils.isEmpty(s_e2) && !TextUtils.isEmpty(s_e3) && !TextUtils.isEmpty(s_e4)
                && !TextUtils.isEmpty(s_e5) && !TextUtils.isEmpty(s_e6)) {
           //getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
            eString = s_e1 + s_e2 + s_e3 + s_e4 + s_e5 + s_e6;
            if (listener != null) {
                listener.onInputComplete(eString);
            }
        }
    }

    /**
     * 點選刪除按鈕監聽
     *
     * @author
     *
     */
    class onKeyListeners implements android.view.View.OnKeyListener {


        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_DEL) {
                if (event.getAction() != KeyEvent.ACTION_UP) {
                    return true;
                }
                if (e6.isFocused()) {
                    if (!TextUtils.isEmpty(e6.getText())) {
                        e6.setText("");
                    } else {
                        e6.clearFocus();
                        e5_focuse();
                        e5.setText("");
                    }
                } else if (e5.isFocused()) {
                    if (!TextUtils.isEmpty(e5.getText())) {
                        e5.setText("");
                    } else {
                        e5.clearFocus();
                        e4_focuse();
                        e4.setText("");
                    }
                } else if (e4.isFocused()) {
                    if (!TextUtils.isEmpty(e4.getText())) {
                        e4.setText("");
                    } else {
                        e4.clearFocus();
                        e3_focuse();
                        e3.setText("");
                    }
                } else if (e3.isFocused()) {
                    if (!TextUtils.isEmpty(e3.getText())) {
                        e3.setText("");
                    } else {
                        e3.clearFocus();
                        e2_focuse();
                        e2.setText("");
                    }
                } else if (e2.isFocused()) {
                    if (!TextUtils.isEmpty(e2.getText())) {
                        e2.setText("");
                    } else {
                        e2.clearFocus();
                        clear_focuse();
                        e1.setText("");
                    }
                }
                return true;
            }
            return false;
        }
    }


    private void e2_focuse() {
        e2.setFocusable(true);
        e2.setFocusableInTouchMode(true);
        e2.requestFocus();
        e2.findFocus();

        e1.setFocusable(false);
        e3.setFocusable(false);
        e4.setFocusable(false);
        e5.setFocusable(false);
        e6.setFocusable(false);
    }


    public void clear_focuse() {
        e1.setFocusable(true);
        e1.setFocusableInTouchMode(true);
        e1.requestFocus();
        e1.findFocus();

        InputMethodManager inputManager = (InputMethodManager) e1.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
        inputManager.showSoftInput(e1, 0);

        e2.setFocusable(false);
        e3.setFocusable(false);
        e4.setFocusable(false);
        e5.setFocusable(false);
        e6.setFocusable(false);
    }


    private void e3_focuse() {
        e3.setFocusable(true);
        e3.setFocusableInTouchMode(true);
        e3.requestFocus();
        e3.findFocus();

        e2.setFocusable(false);
        e1.setFocusable(false);
        e4.setFocusable(false);
        e5.setFocusable(false);
        e6.setFocusable(false);
    }


    private void e4_focuse() {
        e4.setFocusable(true);
        e4.setFocusableInTouchMode(true);
        e4.requestFocus();
        e4.findFocus();

        e2.setFocusable(false);
        e3.setFocusable(false);
        e1.setFocusable(false);
        e5.setFocusable(false);
        e6.setFocusable(false);
    }


    private void e5_focuse() {
        e5.setFocusable(true);
        e5.setFocusableInTouchMode(true);
        e5.requestFocus();
        e5.findFocus();


        e2.setFocusable(false);
        e3.setFocusable(false);
        e4.setFocusable(false);
        e1.setFocusable(false);
        e6.setFocusable(false);
    }


    public void last_focuse() {
        e6.setFocusable(true);
        e6.setFocusableInTouchMode(true);
        e6.requestFocus();
        e6.findFocus();

        e2.setFocusable(false);
        e3.setFocusable(false);
        e4.setFocusable(false);
        e5.setFocusable(false);
        e1.setFocusable(false);
    }

    public void setListener(SixPwdListener listener) {
        this.listener = listener;
    }
    public interface SixPwdListener{
        void onInputComplete(String passWord);
    }
}

很顯然，在這個View裡，首先setaddTextChangedListener()這個方法控制view的焦點，當e1中有資料值，立馬剝奪焦點讓給e2，當e2有資料值時，立馬剝奪焦點讓給e3，如此層層遞進，直到e6，當e6有資料時，通過isfirstallwrite()這個方法收集到6個EditText裡的值，也就是6位密碼，然後通過介面SixPwdListener傳出去，至於要對六位密碼做什麼處理，可以自行定義。這裡要注意的是，當e6獲取到值時，我這裡做的處理是直接把e6的焦點設定為false,即e6.setFocusable(false)，這裡有一個問題，我這裡自定義六位密碼框，在前五個EditText時，按軟鍵盤的刪除鍵框內的資料是可以清楚的，只有當e6輸入完成時不可以清楚，應為我的需求是輸入到第六位完成後直接有跳轉處理，所以當碰到輸入完六位密碼想刪除更改時，也就是在 e6.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                if (e6.getText().toString().equals("")) {
                } else {
                    e6.setFocusable(false);
                    s_e6 = e6.getText().toString();
                    isfirstallwrite();
                }
            }
        });
    }
這裡afterTextChanged(Editable s) 裡，各位可以使得e6有焦點，改成
                  @Override
            public void afterTextChanged(Editable s) {
                if (e6.getText().toString().equals("")) {
                } else {
                    e6.setFocusable(false);
                    s_e6 = e6.getText().toString();
                    setLastFocuse();
                    isfirstallwrite();                }            }
其中的setLastFocuse()方法如下：
public void setLastFocuse(){
        e6.setFocusable(true);
        e6.setFocusableInTouchMode(true);
        e6.requestFocus();
        e6.findFocus();
    }
其實這個自定義View總體來說比較簡單，有點基礎的一看就懂，這裡還要說的是，如果在editText輸入完資料後，不剝奪焦點的話，他會有一段過度時間才會讓數字變成圓點。剝奪的焦點的話會立馬變，所以在e6處先剝奪焦點後在設定setFocusable為true.不知道我這麼說大家聽得懂不。。。嗚嗚嗚，文筆不好咩.

相關推薦

Android自定義View之六位密碼框

今天是我第一次寫技術部落格，本人也是小菜鳥一枚，工作不滿一年，部落格內容也比較簡單，對專業知識瞭解不夠深入，寫部落格的原因一來是為了分享，而來也是激勵自己，如果內容有什麼錯誤問題，請大家指教糾正。 今天要講的是六位密碼輸入框。先上程式碼。首先是layout.xml檔案 &

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧 效果 大概思路 自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子 處理煙霧動畫效果 畫杯子 這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化 效果 開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是 如果對安卓UI有興趣的朋友可以加我好友互相探討， 思路 思路比較簡單，整個view無

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

android自定義view之畫圓隨著手指移動

public class MyView extends View { private Paint mFanPaint,mTextPaint;//扇形畫筆和文字畫筆 public float AxisX=100; public float AxisY=100; public MyView(

Android自定義view之實現帶checkbox的Snackbar

前言 最近專案要求實現一個類似於snackbar功能，但是又不完全是snackbar的外掛，本來想在Google提供的snackbar裡面進行更改，但是這樣太麻煩了，於是自己動手實現了一個snackbar。先看下效果圖： 1.要解決的問題 1.彈框裡面除了文字提示之外還有一個按鈕，這個按

android自定義View之3D索引效果

效果圖： 我的小霸王太卡了。 最近工作比較忙，今天搞了一下午才搞出來這個效果，這種效果有很多種實現方式，最常見的應該是用貝塞爾曲線實現的。今天我們來看另一種不同的實現方式，只需要用到 canvas.scale()，有沒有很好奇是怎麼實現的呢。 首先來說一下思路，只要有了思

android 自定義view之側滑效果

效果圖： 看網上的都是兩個view拼接，預設右側的不顯示，水平移動的時候把右側的view顯示出來。但是看最新版QQ上的效果不是這樣的，但給人的感覺卻很好，所以獻醜來一發比較高仿的。 知識點： 1、ViewDragHelper 的用法； 2、滑動衝突的解決； 3、自定

android 自定義view之選座功能

效果圖： 介面比較粗糙，主要看原理。 這個介面主要包括以下幾部分 1、座位 2、左邊的排數 3、左上方的縮圖 4、縮圖中的紅色區域 5、手指移動時跟隨移動 6、兩個手指縮放時跟隨縮放 主要技術點 1、矩陣Matrix 2、GestureDetector與S

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

從零開始學Android自定義View之動畫系列——屬性動畫（3）

屬性動畫對補間動畫進行了很大幅度的改進，之前補間動畫可以做到的屬性動畫也能做到，補間動畫做不到的現在屬性動畫也可以做到了。因此，今天我們就來學習一下屬性動畫的高階用法，看看如何實現一些補間動畫所無法實現的功能。 ValueAnimator的高階用法 補間