1、效果圖

UI圖.jpg

自定義View效果.gif

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ō)明

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)單。