通常情況下，Android實(shí)現(xiàn)自定義控件無(wú)非三種方式。

　　Ⅰ、繼承現(xiàn)有控件，對(duì)其控件的功能進(jìn)行拓展。

　?、?、將現(xiàn)有控件進(jìn)行組合，實(shí)現(xiàn)功能更加強(qiáng)大控件。

　?、?、重寫(xiě)View實(shí)現(xiàn)全新的控件

　　本文重點(diǎn)討論繼承現(xiàn)有控件進(jìn)行拓展實(shí)現(xiàn)自定義控件。這是一個(gè)非常重要的自定義控件的方法，可以站在原生控件這個(gè)巨人肩膀上，拓展自身的功能，一般來(lái)說(shuō)，我們可以在ondraw方法中對(duì)原生控件進(jìn)行繪制。

　　本文將以拓展textView為例，看我們是如何繼承現(xiàn)有控件，來(lái)自定義一個(gè)強(qiáng)大控件。這個(gè)自定義控件就是帶有邊框文本框，并且邊框與背景的顏色不一樣。大體效果圖是這樣的：

　　我們來(lái)分析一下如何實(shí)現(xiàn)這樣的效果。我們此時(shí)應(yīng)當(dāng)盯上OnDraw方法，重寫(xiě)OnDraw方法，在OnDraw方法中分別畫(huà)兩個(gè)有帶顏色背景矩形邊框就可以了。這樣，文本框就會(huì)有錯(cuò)落有致的層次感了。

　　要有這種錯(cuò)落有致的效果，我們第一步要做的是定義畫(huà)內(nèi)邊框和外邊框的畫(huà)筆，定義的代碼如下：

private void initView() {
    mPaint1 = new Paint();
    mPaint1.setColor(Color.BLUE);
    mPaint1.setStyle(Style.FILL);

    mPaint2 = new Paint();
    mPaint2.setColor(Color.YELLOW);
    mPaint2.setStyle(Style.FILL);
  }

　　我們定義了第一種畫(huà)筆顏色為藍(lán)色，畫(huà)筆的填充模式為完全填充。第二種畫(huà)筆顏色為黃色，同樣填充模式為完全填充。

　　有了不同顏色畫(huà)筆之后，我們所需要做的是在OnDraw方法運(yùn)用這兩只畫(huà)筆畫(huà)不同矩形，這樣代碼又是這樣：

canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
    canvas.drawRect(10, 10, getMeasuredWidth() - 10,
        getMeasuredHeight() - 10, mPaint2);
    canvas.save();
    canvas.translate(10, 0);
    super.onDraw(canvas);
    canvas.restore();

　　我們畫(huà)了兩個(gè)長(zhǎng)寬不等的矩形，并且畫(huà)布平移了10個(gè)單位。這樣畫(huà)出來(lái)的自定義控件為：

　　這個(gè)例子，非常簡(jiǎn)單，可能大家對(duì)繼承原生控件還是意猶未盡的話(huà)，我們百尺竿頭更進(jìn)一步。做個(gè)稍微復(fù)雜點(diǎn)自定義TextView——帶有閃爍文字的TextView。

　　我們分析一下實(shí)現(xiàn)的思路：

　?、僖獙?shí)現(xiàn)這個(gè)效果，我們可以充分利用paint對(duì)象的shader（渲染器）對(duì)象。

　?、谕ㄟ^(guò)不斷改變linearGradient的位置，來(lái)形成這閃爍的效果。

　　有了這樣的思路以后，我們首先在onSizeChanged方法初始化LinearGradient對(duì)象，和進(jìn)行圖形變換的矩陣對(duì)象。源代碼如下：

if (mWidth == 0) {
      mWidth = getMeasuredWidth();
      if (mWidth > 0) {
        mPaint = getPaint();
        mLinearGradient = new LinearGradient(0, 0, mWidth, 0,
            new int[] { Color.GRAY, Color.GREEN, Color.GRAY }, null,
            Shader.TileMode.CLAMP);
        mPaint.setShader(mLinearGradient);
        matrix = new Matrix();
      }
    }

 　　我們將LinearGradient對(duì)象顏色設(shè)置為灰綠相間的線性漸變對(duì)象，顏色的平鋪模式為平鋪。

　　然后在onDraw方法中，不斷變換線性漸變對(duì)象的位置，從而就有了文字左右閃爍的效果。源代碼如下：

if (matrix != null) {
      mTranslate = mTranslate + mWidth / 5;
      if (mTranslate > 2 * mWidth) {
        mTranslate = -mWidth;
      }
      matrix.setTranslate(mTranslate, 0);
      mLinearGradient.setLocalMatrix(matrix);
      postInvalidateDelayed(100);

    }

　　最終形成的效果為：

　　這就是自定義View三板斧之一——繼承現(xiàn)有控件一點(diǎn)總結(jié)，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論