開始閱讀本篇文章之前先來說一下使用場景吧，我們知道如今移動支付已經(jīng)占據(jù)我們?nèi)粘ＶЦ兜?0%的份額，以微信支付和支付寶支付為主，也越來越多的APP開始添加支付模塊，不管使用哪種支付有一個(gè)步驟是少不了的，那就是輸入支付密碼(指紋支付再此就不做討論了哦)，所以今天來給大家?guī)硪黄远x支付密碼輸入框的設(shè)計(jì)和實(shí)現(xiàn)方式，同時(shí)記錄自己工作中遇到的問題及解決辦法。
github源碼地址傳送門
按照慣例我們先看看微信和支付寶支付密碼輸入框的樣式吧
看到這樣的效果相信很多開發(fā)者第一反應(yīng)就是先網(wǎng)上搜一下看看有沒有現(xiàn)成的（哈哈，我也不例外哦），因?yàn)檫@都是簡單的一些view不涉及動畫所以網(wǎng)上相關(guān)例子還是很多的，我這邊總結(jié)了一下大致可以分為一下幾類
1、通過布局的方式：
在布局里邊放置6個(gè)EditView,在每個(gè)輸入框中間再放置一個(gè)view用于設(shè)置中間分割線，每個(gè)EditVIew只允許輸入一個(gè)字符，然后對每個(gè)進(jìn)行監(jiān)聽，一個(gè)密碼輸入完之后讓另一個(gè)EditView獲取焦點(diǎn)，以此類推就可以大致實(shí)現(xiàn)圖中的效果了（這樣確實(shí)可以實(shí)現(xiàn)，實(shí)現(xiàn)起來也很簡單，但是代碼量不少，而且這種方式是不是顯得逼格不夠高或者沒有逼格吶）
2、完全自定義view（繼承View）：
這個(gè)就稍微復(fù)雜一點(diǎn)，大致流程是，先監(jiān)聽觸摸事件，按下時(shí)彈出鍵盤，然后對軟鍵盤進(jìn)行監(jiān)聽，獲取每次點(diǎn)擊鍵盤對應(yīng)的字符串，然后在onDraw方法里邊畫6個(gè)圓，在繪制外邊框，然后是中間的分割線。這里邊有個(gè)問題就是每次都要對軟鍵盤進(jìn)行監(jiān)聽取值等一系列操作，加上Android機(jī)型眾多整不好哪塊軟鍵盤就出問題了吶。（雖然有逼格，但是不實(shí)用哦）
欲步又止
3、繼承自EditView實(shí)現(xiàn)自定義view:
大致流程和上一種差不多，不過我們不需要對軟鍵盤進(jìn)行處理了,少了很多繁瑣及兼容性的操作，同時(shí)又不失逼格，哈哈。
看到以上三種實(shí)現(xiàn)方式想必你大概已經(jīng)知道我們要使用哪種方式實(shí)現(xiàn)了，沒錯(cuò)就是集成EditView的自定義view,這樣我們還可以使用很多EditView的屬性哦
開發(fā)前先整理一下實(shí)現(xiàn)步驟：
1、繪制外邊框（可以是直角也可以是圓角，設(shè)計(jì)師要什么我們就給他什么）
2、繪制密碼之間的分割線（豎線）
3、繪制實(shí)心圓代替輸入的字符
4、對輸入字符進(jìn)行監(jiān)聽，便于擴(kuò)展處理
5、實(shí)現(xiàn)一些常用的外部接口方法調(diào)用
具體實(shí)現(xiàn)
1、繪制外邊框：
要想繪制邊框我們首先要知道view的寬高，通過onSizeChanged方法去初始化寬高等數(shù)據(jù)，然后繪制圓角矩形（默認(rèn)讓他矩形顯示直接傳入圓角半徑為0即可）
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
height = h;
width = w;
divideLineWStartX = w / maxCount;
startX = w / maxCount / 2; //第一個(gè)圓心的x坐標(biāo)
startY = h / 2; //第一個(gè)圓心的y坐標(biāo)
bottomLineLength = w / (maxCount + 2);
rectF.set(0, 0, width, height);
}
RectF rectF = new RectF()
rectF.set(0, 0, width, height);
canvas.drawRoundRect(rectF, rectAngle, rectAngle, borderPaint);
2、繪制密碼之間的分割線：
既然是分割線肯定是等均分的，假設(shè)我們的密碼最大輸入maxCount=6，那么我們只需畫5個(gè)分割線就可以了，分割線坐標(biāo)的計(jì)算
通過循環(huán)畫出每個(gè)分割線
for (int i = 0; i < maxCount - 1; i++) {
canvas.drawLine((i + 1) * divideLineWStartX,
0,
(i + 1) * divideLineWStartX,
height,
divideLinePaint);
}
完成這一步我們先運(yùn)行一下看看邊框效果吧
3、繪制實(shí)心圓代替輸入的字符：
這里需要監(jiān)聽EditView的輸入，重寫onTextChanged方法獲取輸入字符的長度,然后計(jì)算每個(gè)圓圓心的坐標(biāo)位置
//第一個(gè)圓心的x坐標(biāo)
startX = w / maxCount / 2;
//第一個(gè)圓心的y坐標(biāo)
startY = h / 2;
/**
* 畫密碼實(shí)心圓
*
* @param canvas
*/
private void drawPsdCircle(Canvas canvas) {
for (int i = 0; i < textLength; i++) {
canvas.drawCircle(startX + i * 2 * startX,
startY,
radius,
circlePaint);
}
}
寫到這里的時(shí)候是不是感覺樣式問題已經(jīng)完成的差不多了，運(yùn)行以來輸入幾個(gè)字符串一看，MD出問題了(看圖說話)
從圖中可以看出是繪制了相應(yīng)的實(shí)心圓，但是自帶的底部線、光標(biāo)、字符還在，要是拿這個(gè)去交差絕逼會被產(chǎn)品罵死。
出現(xiàn)這個(gè)問題肯定是代碼的問題嘍，我們根據(jù)問題去一個(gè)一個(gè)解決，首先給view設(shè)置一個(gè)透明的背景色，然后隱藏光標(biāo)，再跑一下看看
this.setBackgroundColor(Color.TRANSPARENT);
this.setCursorVisible(false);
這次底部的線和光標(biāo)都見了，但是輸入的字符還在，這又是什么問題？？？我們明明重寫了onDraw方法，怎么還會出現(xiàn)原來的字符吶，等等。。。對啊，我們只是重寫，他肯定還有自己的方法，我們只要把EditView內(nèi)部重繪的方法干掉不就行了，想到這里喜出望外，拿跟辣條先壓壓驚，在ondraw方法中這樣做
@Override
protected void onDraw(Canvas canvas) {
//不刪除的話會默認(rèn)繪制輸入的文字
// super.onDraw(canvas);
}
你沒看錯(cuò)，就是這一行代碼注釋掉就ok，
至于是為什么你肯定知道，
不注釋的話在我們重寫之前他已經(jīng)調(diào)用了內(nèi)部方法
去繪制輸入的字符了，
我們在重寫后雖然我們的方法生效了，
但它的方法也生效了哦。
此時(shí)壓抑不住內(nèi)心的小激動趕緊運(yùn)行起來看看（哈哈，完美解決問題）
至此主要功能已經(jīng)完成，剩下的需要去封裝一些方法供外部調(diào)用，我這里已經(jīng)封裝幾個(gè)方法，我們知道這樣設(shè)置支付密碼的頁面一般有兩個(gè)：一個(gè)設(shè)置密碼，一個(gè)重新設(shè)置密碼，按照正常的邏輯我們?nèi)ケO(jiān)聽這個(gè)密碼輸入框，輸入密碼之后進(jìn)行比較看是否相等就完事了，為了方便以后使用不要每次自己再去寫一大堆監(jiān)聽方法，我們直接在內(nèi)部封裝好是不是對以后使用起來更方便一點(diǎn)吶
/**
* 密碼比較監(jiān)聽
*/
public interface onPasswordListener {
void onDifference();
void onEqual(String psd);
}
//使用者需要調(diào)用的方法
public void setComparePassword(String comparePassword, onPasswordListener listener) {
mComparePassword = comparePassword;
mListener = listener;
}
這里就直接上代碼了,代碼通俗易懂
@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
super.onTextChanged(text, start, lengthBefore, lengthAfter);
textLength = text.toString().length();
if (mComparePassword != null && textLength == maxCount) {
if (TextUtils.equals(mComparePassword, getPasswordString())) {
mListener.onEqual(getPasswordString());
} else {
mListener.onDifference();
}
}
invalidate();
}
實(shí)際使用中我們這樣設(shè)置(是不是瞬間感覺用的過程簡單了很多)
passwordInputView.setComparePassword("123456", new PayPsdInputView.onPasswordListener() {
@Override
public void onDifference() {
// TODO: 2017/5/7 和上次輸入的密碼不一致 做相應(yīng)的業(yè)務(wù)邏輯處理
Toast.makeText(MainActivity.this,"兩次密碼輸入不同",Toast.LENGTH_SHORT).show();
}
@Override
public void onEqual(String psd) {
// TODO: 2017/5/7 兩次輸入密碼相同，那就去進(jìn)行支付樓
Toast.makeText(MainActivity.this,"密碼相同"+psd,Toast.LENGTH_SHORT).show();
}
});
文章到此本應(yīng)該結(jié)束了，可是我們UI設(shè)計(jì)師給出的效果圖不是這樣子的，不按常理出牌（心中頓時(shí)飄過一萬只草泥馬）
來看看我們的效果圖
他不按常量出牌，不過這也是他們一貫的作風(fēng)，既然他們要這樣的效果那我們就去做嘍，整個(gè)流程還是一樣的，唯一的不同就是外邊框和密碼之間的分割線變成了底部間斷的線，這肯定難不倒我們啦，不就是畫六條線嗎，每根線的起點(diǎn)終點(diǎn)坐標(biāo)和上邊圓心左邊計(jì)算差不多，就不多描述了看代碼最實(shí)在
/**
* 畫底部顯示的分割線
*
* @param canvas
*/
private void drawBottomBorder(Canvas canvas) {
for (int i = 0; i < maxCount; i++) {
cX = startX + i * 2 * startX;
canvas.drawLine(cX - bottomLineLength / 2,
height,
cX + bottomLineLength / 2,
height, bottomLinePaint);
}
}
項(xiàng)目至此完美收工，看看效果吧
最后總結(jié)
以上微信支付密碼和我們這種現(xiàn)實(shí)效果我都封裝在PayPsdInputView中了，可以根據(jù)需求切換不同的樣式，
Paste_Image.png
如果以后還要其他的支付密碼輸入的樣式的話同樣會添加進(jìn)來的，目的只有一個(gè)--------->下次開發(fā)省時(shí)省力。
兩種樣式供你選擇
番外篇
我相信看到這里肯定有一部分小伙伴會說MDZZ,這不就是簡單的畫矩形、畫圓、畫線嗎，有什么好寫的，誰都會做。我想說的是你們說的沒錯(cuò)，涉及的知識點(diǎn)是很簡單，但是不要忘了，麻雀雖小五腑俱全，真正你去一行一行敲的時(shí)候你會發(fā)現(xiàn)有很多不曾注意過的問題都會浮出水面。只是單純的會幾個(gè)知識點(diǎn)其實(shí)沒什么卵用，把所學(xué)知識點(diǎn)運(yùn)用起來重組成一個(gè)功能模塊的時(shí)候你才算真正的掌握。
來，老表，抽根煙，平復(fù)一下暴躁的心情
謹(jǐn)以此篇來記錄自己項(xiàng)目中遇到的問題，獻(xiàn)給需要類似功能的小伙伴們。如果你有好的建議歡迎評論指出，大家一起討論、學(xué)習(xí)、進(jìn)步！
