1.概述

最近有人在問我要所有項(xiàng)目的代碼，我在這里聲明一下我不是這幾個(gè)項(xiàng)目公司內(nèi)部人員吩跋，之所以錄視頻和寫博客也是喜歡與人分享和學(xué)習(xí)而已锌钮，最終所有的代碼肯定會上傳的引矩，只不過會要等全部的效果以及設(shè)計(jì)模式搞完侵浸。在這里感謝內(nèi)涵段子這個(gè)項(xiàng)目掏觉，感謝那些提供幫助的博客牛人值漫，希望有一天也能和你們一樣杨何。
　　
　　部分人看了視頻的反饋某些地方?jīng)]講的很細(xì)，首先這肯定是我的問題羊娃，但是有很多東西其實(shí)是基礎(chǔ)迁沫，比如我們用到了屬性動(dòng)畫很多地方用到了canvas畫圖如果沒怎么接觸過可能會有點(diǎn)難度捌蚊，我到后期也會去錄制一些基礎(chǔ)的視頻缅糟，不過要等博客的訪問量到達(dá)一定的數(shù)量，自己也需要去沉淀赦颇。
　　
　　今天我們就來寫一個(gè)相對簡單的效果媒怯，就是仿淘寶確定收貨和支付寶轉(zhuǎn)賬的自定義密碼輸入框和鍵盤髓窜。視頻地址：https://pan.baidu.com/s/1bqgRu9p 密碼：yr4d
　　
　　

這里寫圖片描述

2．效果實(shí)現(xiàn)

2.1 實(shí)現(xiàn)思路：

這個(gè)效果主要的實(shí)現(xiàn)就是Canvas畫圖寄纵，我們可以去搜搜看看別人怎么實(shí)現(xiàn)的程拭，大部分都是自定義控件去繪制，還有一小部分是直接用LinearLayout寫死了崖媚，直接就是用的代碼去控制布局。我們這里使用自定義控件去實(shí)現(xiàn)
　　2.1.1 主要涉及到三個(gè)部分需要去繪制：背景鳍徽、分割線阶祭、密碼圓點(diǎn)
　　2.1.2 繼承自誰都可以直秆，最好還是不要繼承自View圾结，這樣就需要多實(shí)現(xiàn)一個(gè)onMeasure()方法，這里考慮到可能有些地方不會使用自定義的鍵盤晌姚，所以決定繼承EditText歇竟。

2.2 繪制：背景焕议、分割線、密碼圓點(diǎn)：
　　
　　這里需要使用自定義屬性唤锉，這個(gè)相信大家都比較了解就不做過多的講解窿祥，大概涉及的屬性有：背景圓角蝙寨、背景邊框大小、背景邊框顏色、分割線大小猫胁、分割線顏色弃秆、密碼圓點(diǎn)的顏色、密碼圓點(diǎn)的半徑大小脑豹。具體的attrs.xml就是：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PasswordEditText">
        <!-- 密碼的個(gè)數(shù) -->
        <attr name="passwordNumber" format="integer"/>
        <!-- 密碼圓點(diǎn)的半徑 -->
        <attr name="passwordRadius" format="dimension" />
        <!-- 密碼圓點(diǎn)的顏色 -->
        <attr name="passwordColor" format="color" />
        <!-- 分割線的顏色 -->
        <attr name="divisionLineColor" format="color" />
        <!-- 分割線的大小 -->
        <attr name="divisionLineSize" format="color" />
        <!-- 背景邊框的顏色 -->
        <attr name="bgColor" format="color" />
        <!-- 背景邊框的大小 -->
        <attr name="bgSize" format="dimension" />
        <!-- 背景邊框的圓角大小 -->
        <attr name="bgCorner" format="dimension"/>
    </declare-styleable>
</resources>

接下來我們就需要去繪制了必盖，首先獲取自定義屬性俱饿，然后在onDraw()中去繪制

/**
 * Created by Darren on 2016/12/14.
 * Email: 240336124@qq.com
 * Description: 密碼輸入框
 */

public class PasswordEditText extends EditText {
    // 畫筆
    private Paint mPaint;
    // 一個(gè)密碼所占的寬度
    private int mPasswordItemWidth;
    // 密碼的個(gè)數(shù)默認(rèn)為6位數(shù)
    private int mPasswordNumber = 6;
    // 背景邊框顏色
    private int mBgColor = Color.parseColor("#d1d2d6");
    // 背景邊框大小
    private int mBgSize = 1;
    // 背景邊框圓角大小
    private int mBgCorner = 0;
    // 分割線的顏色
    private int mDivisionLineColor = mBgColor;
    // 分割線的大小
    private int mDivisionLineSize = 1;
    // 密碼圓點(diǎn)的顏色
    private int mPasswordColor = mDivisionLineColor;
    // 密碼圓點(diǎn)的半徑大小
    private int mPasswordRadius = 4;

    public PasswordEditText(Context context) {
        this(context, null);
    }

    public PasswordEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        initAttributeSet(context, attrs);
        // 設(shè)置輸入模式是密碼
        setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
        // 不顯示光標(biāo)
        setCursorVisible(false);
    }

    /**
     * 初始化屬性
     */
    private void initAttributeSet(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText);
        // 獲取大小
        mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize));
        mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius));
        mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize));
        mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, 0);
        // 獲取顏色
        mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor);
        mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor);
        mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mDivisionLineColor);
        array.recycle();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
    }

    /**
     * dip 轉(zhuǎn) px
     */
    private int dip2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dip, getResources().getDisplayMetrics());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize;
        mPasswordItemWidth = passwordWidth / mPasswordNumber;
        // 繪制背景
        drawBg(canvas);
        // 繪制分割線
        drawDivisionLine(canvas);
        // 繪制密碼
        drawHidePassword(canvas);
    }

    /**
     * 繪制背景
     */
    private void drawBg(Canvas canvas) {
        mPaint.setColor(mBgColor);
        // 設(shè)置畫筆為空心
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mBgSize);
        RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);
        // 如果沒有設(shè)置圓角，就畫矩形
        if (mBgCorner == 0) {
            canvas.drawRect(rectF, mPaint);
        } else {
            // 如果有設(shè)置圓角就畫圓矩形
            canvas.drawRoundRect(rectF, mBgCorner, mBgCorner, mPaint);
        }
    }

    /**
     * 繪制隱藏的密碼
     */
    private void drawHidePassword(Canvas canvas) {
        int passwordLength = getText().length();
        mPaint.setColor(mPasswordColor);
        // 設(shè)置畫筆為實(shí)心
        mPaint.setStyle(Paint.Style.FILL);
        for (int i = 0; i < passwordLength; i++) {
            int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;
            canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);
        }
    }

    /**
     * 繪制分割線
     */
    private void drawDivisionLine(Canvas canvas) {
        mPaint.setStrokeWidth(mDivisionLineSize);
        mPaint.setColor(mDivisionLineColor);
        for (int i = 0; i < mPasswordNumber - 1; i++) {
            int startX = (i + 1) * mDivisionLineSize + (i + 1) * mPasswordItemWidth + mBgSize;
            canvas.drawLine(startX, mBgSize, startX, getHeight() - mBgSize, mPaint);
        }
    }
}

目前的效果就是點(diǎn)擊之后會彈出系統(tǒng)的鍵盤，實(shí)現(xiàn)了基本的效果涩堤，接下來我們再加入監(jiān)聽也就說當(dāng)密碼輸入完成我們需要回調(diào)監(jiān)聽迄损。
　

這里寫圖片描述

2.2 自定義鍵盤：

接下來我們看看自定義鍵盤吧芹敌，自定義鍵盤我們可以使用GridView或是RecyclerView去顯示，最好還是不要去畫了,采用自定義View加載一個(gè)layout布局碧聪，給每個(gè)按鈕一個(gè)點(diǎn)擊事件然后回調(diào)出去即可逞姿。

 /**
 * Created by Darren on 2016/12/14.
 * Email: 240336124@qq.com
 * Description: 自定義鍵盤
 */

public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {
    private CustomerKeyboardClickListener mListener;

    public CustomerKeyboard(Context context) {
        this(context, null);
    }

    public CustomerKeyboard(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomerKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflate(context, R.layout.ui_customer_keyboard, this);
        setChildViewOnclick(this);
    }

    /**
     * 設(shè)置鍵盤子View的點(diǎn)擊事件
     */
    private void setChildViewOnclick(ViewGroup parent) {
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            // 不斷的遞歸設(shè)置點(diǎn)擊事件
            View view = parent.getChildAt(i);
            if (view instanceof ViewGroup) {
                setChildViewOnclick((ViewGroup) view);
                continue;
            }
            view.setOnClickListener(this);
        }
    }

    @Override
    public void onClick(View v) {
        View clickView = v;
        if (clickView instanceof TextView) {
            // 如果點(diǎn)擊的是TextView
            String number = ((TextView) clickView).getText().toString();
            if (!TextUtils.isEmpty(number)) {
                if (mListener != null) {
                    // 回調(diào)
                    mListener.click(number);
                }
            }
        } else if (clickView instanceof ImageView) {
            // 如果是圖片那肯定點(diǎn)擊的是刪除
            if (mListener != null) {
                mListener.delete();
            }
        }
    }

    /**
     * 設(shè)置鍵盤的點(diǎn)擊回調(diào)監(jiān)聽
     */
    public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {
        this.mListener = listener;
    }

    /**
     * 點(diǎn)擊鍵盤的回調(diào)監(jiān)聽
     */
    public interface CustomerKeyboardClickListener {
        public void click(String number);
        public void delete();
    }
}

2.3. 自定義密碼輸入框配套自定義鍵盤
　　
　　自定義密碼輸入框?qū)懞昧耍远x鍵盤也完成了谒养，最后就是需要把他們兩個(gè)套在一起明郭。首先密碼輸入框點(diǎn)擊再也不能彈系統(tǒng)鍵盤，點(diǎn)擊鍵盤的時(shí)候需要往密碼輸入框里面塞密碼始绍，還需要?jiǎng)h除亏推，所以密碼輸入框還得提供兩個(gè)方法

 /**
 * Created by Darren on 2016/12/14.
 * Email: 240336124@qq.com
 * Description: 密碼輸入框
 */

public class PasswordEditText extends EditText {
    // 省略之前的代碼...
    /**
     * 添加密碼
     */
    public void addPassword(String number) {
        number = getText().toString().trim() + number;
        if (number.length() > mPasswordNumber) {
            return;
        }
        setText(number);
    }

    /**
     * 刪除最后一位密碼
     */
    public void deleteLastPassword() {
        String currentText = getText().toString().trim();
        if (TextUtils.isEmpty(currentText)) {
            return;
        }
        currentText = currentText.substring(0, currentText.length() - 1);
        setText(currentText);
    }
}

2.4. 最后的測試

/**
 * Created by Darren on 2016/12/14.
 * Email: 240336124@qq.com
 * Description: 自定義鍵盤和自定義密碼輸入框測試
 */
public class MainActivity extends Activity implements CustomerKeyboard.CustomerKeyboardClickListener,
        PasswordEditText.PasswordFullListener{

    private CustomerKeyboard mCustomerKeyboard;
    private PasswordEditText mPasswordEditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPasswordEditText = (PasswordEditText) findViewById(R.id.password_et);
        mCustomerKeyboard = (CustomerKeyboard) findViewById(R.id.custom_key_board);
        // 設(shè)置監(jiān)聽
        mCustomerKeyboard.setOnCustomerKeyboardClickListener(this);
        mPasswordEditText.setOnPasswordFullListener(this);
    }

    /**
     * 鍵盤數(shù)字點(diǎn)擊監(jiān)聽回調(diào)方法
     */
    @Override
    public void click(String number) {
        mPasswordEditText.addPassword(number);
    }

    /**
     * 鍵盤刪除點(diǎn)擊監(jiān)聽回調(diào)方法
     */
    @Override
    public void delete() {
        mPasswordEditText.deleteLastPassword();
    }

    /**
     * 密碼輸入完畢回調(diào)方法
     */
    @Override
    public void passwordFull(String password) {
        Toast.makeText(this, "密碼填充完畢：" + password, Toast.LENGTH_SHORT).show();
    }
}

這里寫圖片描述

最后我們整合到Dialog中就好了，Dialog我們也需要利用Builder設(shè)計(jì)模式自己去封裝通用的效果篇亭，因?yàn)橄到y(tǒng)的太過于麻煩译蒂，這里就不做介紹我們后面再說吧，具體請看視頻講解：https://pan.baidu.com/s/1bqgRu9p 密碼：yr4d