Android 自定義View 三板斧之一——繼承現有控件


  通常情況下,Android實現自定義控件無非三種方式。

  Ⅰ、繼承現有控件,對其控件的功能進行拓展。

  Ⅱ、將現有控件進行組合,實現功能更加強大控件。

  Ⅲ、重寫View實現全新的控件

  本文重點討論繼承現有控件進行拓展實現自定義控件。這是一個非常重要的自定義控件的方法,可以站在原生控件這個巨人肩膀上,拓展自身的功能,一般來說,我們可以在ondraw方法中對原生控件進行繪制。

  本文將以拓展textView為例,看我們是如何繼承現有控件,來自定義一個強大控件。這個自定義控件就是帶有邊框文本框,並且邊框與背景的顏色不一樣。大體效果圖是這樣的:

  我們來分析一下如何實現這樣的效果。我們此時應當盯上OnDraw方法,重寫OnDraw方法,在OnDraw方法中分別畫兩個有帶顏色背景矩形邊框就可以了。這樣,文本框就會有錯落有致的層次感了。

  要有這種錯落有致的效果,我們第一步要做的是定義畫內邊框和外邊框的畫筆,定義的代碼如下:

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);
    }

  我們定義了第一種畫筆顏色為藍色,畫筆的填充模式為完全填充。第二種畫筆顏色為黃色,同樣填充模式為完全填充。

  有了不同顏色畫筆之后,我們所需要做的是在OnDraw方法運用這兩只畫筆畫不同矩形,這樣代碼又是這樣:

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();

  我們畫了兩個長寬不等的矩形,並且畫布平移了10個單位。這樣畫出來的自定義控件為:

  這個例子,非常簡單,可能大家對繼承原生控件還是意猶未盡的話,我們百尺竿頭更進一步。做個稍微復雜點自定義TextView——帶有閃爍文字的TextView。

  我們分析一下實現的思路:

  ①要實現這個效果,我們可以充分利用paint對象的shader(渲染器)對象。

  ②通過不斷改變linearGradient的位置,來形成這閃爍的效果。

  有了這樣的思路以后,我們首先在onSizeChanged方法初始化LinearGradient對象,和進行圖形變換的矩陣對象。源代碼如下:

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對象顏色設置為灰綠相間的線性漸變對象,顏色的平鋪模式為平鋪。

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

  

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

        }

  最終形成的效果為:

  這就是自定義View三板斧之一——繼承現有控件一點總結,本人才疏學淺,懇請吐槽。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM