【移動應(yīng)用開發(fā)技術(shù)】Android開發(fā)實踐：自定義帶動畫的View

【移動應(yīng)用開發(fā)技術(shù)】Android開發(fā)實踐：自定義帶動畫的View

前面兩篇文章介紹了自定義View的onMeasure和onLayout原理，本文準(zhǔn)備介紹自定義View的第三個關(guān)鍵部分，即onDraw()函數(shù)的重載。

對于一個自定義View來說，onMeasure只是用來計算View尺寸，onDraw()才是真正執(zhí)行View的繪制，所以一般我們都需要重寫onDraw()函數(shù)來繪制我們期望的UI界面。下面我以一個具體的例子探索自定義View的onDraw()的實現(xiàn)過程和關(guān)鍵點。

我們的目標(biāo)是制作一個柱狀圖動畫，View的動畫啟動后，會顯示一排柱狀圖增長的畫面，這種動畫多用于財務(wù)類或者統(tǒng)計類的APP中，效果如圖所示（截屏的格式轉(zhuǎn)換過程導(dǎo)致有些變形，還好不影響演示，圖中設(shè)置了反復(fù)播放，真機上只會播放一次）：

1.首先，自定義View的派生類public

class

AnimatorView

extends

View

{

private

Paint

mPaint;

public

AnimatorView(Context

context)

{

super(context);

initialize();

}

public

AnimatorView(Context

context,

AttributeSet

attrs)

{

super(context,

attrs);

initialize();

}

public

AnimatorView(Context

context,

AttributeSet

attrs,

int

defStyle)

{

super(context,

attrs,

defStyle);

initialize();

}

protected

void

initialize()

{

mPaint

=

new

Paint();

mPaint.setAntiAlias(true);

mPaint.setStyle(Style.FILL);

}

}

注：Paint是用來繪圖的畫筆，可以設(shè)置其樣式、畫面的粗細(xì)、填充模式、顏色等等。

2.定義待繪制的圖形數(shù)據(jù)

待繪制的圖形數(shù)據(jù)一般是在程序中動態(tài)給出的，這里為了演示，直接定義好：public

class

AnimatorView

extends

View

{

private

static

final

int

RECT_WIDTH

=

60;

//每個矩形塊的寬度

private

static

final

int

RECT_DISTANCE

=

40;

//矩形塊之間的間距

private

static

final

int

TOTAL_PAINT_TIMES

=

100;

//控制繪制速度,分100次完成繪制

//待繪制的矩形塊矩陣，left為高度，right為顏色

private

static

final

int[][]

RECT_ARRAY

=

{

{380,Color.GRAY},

{600,Color.YELLOW},

{200,Color.GREEN},

{450,Color.RED},

{300,Color.BLUE}

};

private

int

mPaintTimes

=

0;

//當(dāng)前已經(jīng)繪制的次數(shù)

}

3.重載onDraw()函數(shù)，實現(xiàn)繪制public

class

AnimatorView

extends

View

{

@Override

protected

void

onDraw(Canvas

canvas)

{

mPaintTimes++;

for(

int

i=0;

i<RECT_ARRAY.length;

i++

)

{

mPaint.setColor(RECT_ARRAY[i][1]);

int

paintXPos

=

i*(RECT_WIDTH+RECT_DISTANCE)

+

RECT_DISTANCE;

int

paintYPos

=

RECT_ARRAY[i][0]/TOTAL_PAINT_TIMES*mPaintTimes;

canvas.drawRect(paintXPos,

getHeight(),

paintXPos+RECT_WIDTH,getHeight()-paintYPos,

mPaint);

}

if(

mPaintTimes

<

TOTAL_PAINT_TIMES

)

{

invalidate();

//實現(xiàn)動畫的關(guān)鍵點

}

}

}

（1）onDraw()函數(shù)一般由系統(tǒng)布局管理器來調(diào)用，在View第一次加載的時候會調(diào)用一次，或者在系統(tǒng)認(rèn)為需要重繪的時候也會被調(diào)用。當(dāng)然，你也可以在程序中手動觸發(fā)該View的重繪，通過調(diào)用View的invalidate()函數(shù)或者postInvalidate()函數(shù)即可，前者用于UI線程，后者用于非UI線程。

（2）onDraw()的參數(shù)Canvas我們可以理解成系統(tǒng)提供給我們的一塊內(nèi)存區(qū)域，所有的繪制都是在這塊內(nèi)存中進行的，繪制完成后系統(tǒng)會顯示到屏幕中去。該Canvas對象提供了各種繪制點、線、矩形、圓、位圖的方法，基本可以滿足各種繪制要求。

（3）drawRect函數(shù)需要提供四個坐標(biāo)，其中，前兩個參數(shù)代表是被繪制矩形的起始點坐標(biāo)，后兩個參數(shù)則是相對于起點的斜對角坐標(biāo)，注意，原點坐標(biāo)（0，0）在屏幕的左上角。

（4）注意，onDraw()每次被調(diào)用的時候，原來畫布中的內(nèi)容會被清空。

（5）

本示例中，矩形高度每次增加Height/TOTAL_PAINT_TIMES，寬度不變。

4.Activity中測試該View

public

class

MainActivity

extends

Activity

{

private

AnimatorView

mAnimatorView;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

mAnimatorView

=

new

AnimatorView(this);

setContentView(mAnimatorView);

}

}

當(dāng)