1品腹、效果圖
GitHub:https://github.com/aositeluoke/LetterView
2岖食、總體分析
2.1、動(dòng)態(tài)添加View實(shí)現(xiàn)
??通過(guò)在代碼中動(dòng)態(tài)添加View的方式舞吭，雖然能夠?qū)崿F(xiàn)泡垃，但是UI層級(jí)比較多且添加View時(shí)邏輯也比較復(fù)雜，性能略遜一籌羡鸥。
2.2蔑穴、自定義View
??本文采用的方案是自定義View。
3惧浴、詳細(xì)分析
3.1初始狀態(tài)使用下劃線占位
3.2每次點(diǎn)擊某個(gè)字母時(shí)存和，將該字母添加到LetterView中
3.3每次點(diǎn)擊刪除按鈕時(shí)，移除最后一次加入的字母
3.4支持換行
4、代碼實(shí)現(xiàn)
4.1捐腿、測(cè)量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
this.mWidthMeasureSpec = widthMeasureSpec;
this.mHeightMeasureSpec = heightMeasureSpec;
int wSize = MeasureSpec.getSize(mWidthMeasureSpec);
int hSize = MeasureSpec.getSize(mHeightMeasureSpec);
int hMode = MeasureSpec.getMode(mHeightMeasureSpec);
singleBoxW = (int) (mUnderLineWidth + mLineLineDistance);
singleBoxH = (int) (mFontMetrics.bottom - mFontMetrics.top + mLineTextDistance);
columnNum = wSize / singleBoxW;//列數(shù)
mTotalLength = mAllLetters.size();
rowNum = mTotalLength / columnNum;
rowNum = mTotalLength % columnNum != 0 ? rowNum + 1 : rowNum;//行數(shù)
switch (hMode) {
case MeasureSpec.AT_MOST:
hSize = rowNum * singleBoxH;
break;
case MeasureSpec.EXACTLY:
break;
}
setMeasuredDimension(wSize, hSize);
}
??在測(cè)量方法中纵朋，計(jì)算出該單詞需要幾行幾列才能繪制完，計(jì)算出單個(gè)字母占用區(qū)域的寬高備用茄袖。
4.2操软、繪制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < mAllLetters.size(); i++) {
int row = i / columnNum;
int column = i % columnNum;
float startX = (column * singleBoxW) + mLineLineDistance / 2f;
float startY = (row + 1) * singleBoxH - mUnderLineHeight / 2f;
float stopX = (column * singleBoxW) + mLineLineDistance / 2f + mUnderLineWidth;
float stopY = (row + 1) * singleBoxH - mUnderLineHeight / 2f;
canvas.drawLine(startX,
startY,
stopX,
stopY,
mLinePaint);
if (mCurLetters.size() > i) {
mLetterPaint.getTextBounds(mCurLetters.get(i) + "", 0, 1, mTextRect);
canvas.drawText(mCurLetters.get(i) + "", column * singleBoxW + (singleBoxW - mTextRect.width()) / 2f, row * singleBoxH + singleBoxH / 2f + baseYOff, mLetterPaint);
}
}
}
??在繪制過(guò)程中，重點(diǎn)在于當(dāng)前字母所在的坐標(biāo)(行數(shù)和列數(shù))宪祥，得到坐標(biāo)后聂薪，一切都好辦了，通過(guò)坐標(biāo)和字母盒子的寬高即可完成繪制蝗羊。在這里需要謹(jǐn)記的是通過(guò)列表下標(biāo)和總列數(shù)獲取他的二維坐標(biāo)（行數(shù)和列數(shù)）的計(jì)算公式藏澳。
int row = i / columnNum;
int column = i % columnNum;
5、提供一些方法
5.1肘交、初始化
public void initWord(String text) {
if (TextUtils.isEmpty(text)) {
return;
}
this.mText = text;
char[] letters = mText.toCharArray();
mAllLetters.clear();
for (char arra : letters) {
mAllLetters.add(arra);
}
requestLayout();
invalidate();
}
??通過(guò)initWord方法告知LetterView當(dāng)前單詞的長(zhǎng)度笆载，間接的計(jì)算出總行數(shù)和總列數(shù)。
5.2涯呻、新增字母
/**
* 新增
*
* @param c
*/
public void append(char c) {
if (mText.length() <= mCurLetters.size()) {
return;
}
mCurLetters.add(c);
requestLayout();
invalidate();
}
5.3凉驻、刪除字母
/**
* 刪除
*/
public void del() {
if (mCurLetters.size() > 0) {
mCurLetters.remove(mCurLetters.size() - 1);
requestLayout();
invalidate();
}
}
6、屬性說(shuō)明
| 屬性名 | 默認(rèn)值 | 備注 |
|---|---|---|
| text | 單詞 | |
| text_color | Color.WHITE | 字母顏色 |
| underline_width | 60 | 字體下劃線寬度 |
| underline_height | 4 | 下劃線高度 |
| underline_color | Color.WHITE | 下劃線顏色 |
| line_line_distance | 10 | 下劃線之間的間距 |
| line_text_distance | 20 | 下劃線與字母的間距 |
| line_type | LINE_TYPE_SQUARE | 下劃線類型 圓角或方角 |
7复罐、總結(jié)
??自定義View,聽(tīng)起來(lái)有些可怕,但是寫(xiě)起來(lái)感覺(jué)沒(méi)有想象中的那么艱難涝登，可能是因?yàn)闆](méi)有加入觸摸事件或動(dòng)畫(huà)才會(huì)有這樣的感覺(jué)吧（笑臉）！不過(guò)效诅，遇到需要自定義View才能解決問(wèn)題時(shí)胀滚，也不要害怕，坐下來(lái)喝杯茶(躺下來(lái)也可以乱投，哈哈)咽笼，分析測(cè)量和繪制流程，尋找動(dòng)畫(huà)規(guī)律等戚炫，當(dāng)你分析的非常詳細(xì)的時(shí)候剑刑，就再也沒(méi)有你解決不了的事兒了，因?yàn)榱６仍郊?xì)双肤，事情越簡(jiǎn)單施掏。
