Android群英傳筆記系列二view的繪製（一），android群英

Android群英傳筆記系列二view的繪製（一），android群英

三 .view的繪製

1.  使用方法：通過繼承view並重寫它的onDraw()方法來完成繪圖。

2.  具體實現：

a.先定義一個Canvas對象，這個對象類似於一個花板，定義方法如下：Canvas canvas=new Canvas(bitmap);

b．我們可以看到在定義Canvas對象時，我們傳入了一個bitmap對象，那麼這個bitmap的作用是什麼呢？其實bitmap的作用是儲存所有繪製在Canvas上的像素資訊。比如：

canvas.drawBitmap(bitmap1,0,0,null);

canvas.drawBitmap(bitmap2,0,0,null);

Canvas mCanvas=new Canvas(bitmap2);

mCanvas.drawXXX();

上面這段代碼的含義是，將bitmap2,裝載到另一個Canvas對象中，然後在其他地方使用Canvas對象對裝載bitmap2的Canvas對象進行繪圖。

c.實際上我們繪圖，並不是直接繪製在onDraw()方法指定的那塊布上，而是通過改變bitmap，然後讓view重繪，從而顯示改變之後的bitmap。

3.自訂view的常用函數：

onFinishInflate()：從xml載入組件後回調

onSizeChanged():組件大小改變時回調

onMeasure():回調該方法來進行測量

onLayout():回調該方法來確定顯示的位置

onTouchEvent()；監聽到觸摸事件時回調

4.常見的實現自訂控制項的方法：

a.  對現有控制項進行擴充

b.  通過組合來實現新的控制項

c.  重寫view來實現全新的控制項

5.對現有控制項進行擴充：擴充textview，對textview加入多重顏色背景；

a.  定義一個類繼承至TextView,並添加其建構函式：要注意的一點就是，添加建構函式時，一定要添加到含有Attributset參數的的建構函式，否則程式會報錯，因為Attributset參數的作用是：外部通過它來擷取到自訂view的屬性。

public class DrawTextView extends TextView{    public DrawTextView(Context context) {        super(context);     }    public DrawTextView(Context context, AttributeSet attrs) {        super(context, attrs);    }}

b.定義兩個畫筆，並對畫筆進行初始化內容：

private Paint mPaint1,mPaint2;//初始化畫筆內容：顏色和風格mPaint1=new Paint();mPaint2=new Paint();mPaint1.setColor(getResources().getColor(R.color.colorPrimary));mPaint1.setStyle(Paint.Style.FILL);mPaint2.setColor(getResources().getColor(R.color.colorAccent));mPaint2.setStyle(Paint.Style.FILL);

c.重寫onDraw函數：這裡要注意下save函數和restore函數之間的區別，前者是儲存畫布的狀態，然後經過onDraw函數後，會對畫布進行一些操作，比如旋轉之類，這裡是添加文字，而後者是對操作後的畫布進行儲存。

protected void onDraw(Canvas canvas) {    //繪製內矩陣    canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),mPaint1);    //繪製外矩陣    canvas.drawRect(10,10,getMeasuredWidth()-10,getMeasuredHeight()-10,mPaint2);    //儲存畫布的狀態    canvas.save();    //添加文字    super.onDraw(canvas);    //儲存畫布被操作後的狀態    canvas.restore();}

d.在布局中引用自訂textview：

<main.view.com.drawmyview.DrawTextView    android:layout_width="200dp"    android:layout_height="50dp"    android:textSize="20sp"    android:gravity="center"    android:text="@string/mytextview"/>

e.實現效果：

3.實現textview文字閃爍:

a.實現效果:

b.實現原理：使用Android中Paint對象的Shander渲染器，通過設定一個不斷變化的LinearGradient,並使用帶有該屬性的Paint對象來繪製要顯示的文字。

c.具體實現過程：

（1） 在onSizeChanged()方法中進行一些對象的初始化，並根據view的寬頻設定一個LinearGradient漸層渲染器：

protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    if (mViewWidth==0){//一開始初始化為0了，所以會進入這個if判斷語句        mViewWidth=getMeasuredWidth();//擷取到當前寬度        if (mViewWidth>0){            mPaint=getPaint();//擷取當前繪製textview的Paint對象            /*            * 設定一個LinearGradient漸層器渲染器            * 第一二個參數是設定漸層的起點，這裡設定的是矩形的左上方為起點            * 第三四個參數為設定漸層的終點，這裡設定的是矩陣的右上方為終點            * 第五個參數為一個int數組，表示漸層的顏色，這裡選擇的是藍-白-藍            * 第六個參數為設定梯度顏色變化，設定方法為new float[]{0.25f,0.5f,0.75f},            * 如果設定為空白，表示顏色均勻分布,但一定要注意的是要保證顏色數組和位置數組大小一樣            * 第七個參數為平鋪方式，CLMP為重複最後一個顏色至最後，其他的兩個自己體驗一下            * */            mLinearGradient=new LinearGradient(0,0,mViewWidth,0,new int[]{Color.BLUE,Color.WHITE,Color.BLUE}                    ,new float[]{0.25f,0.5f,0.75f}, Shader.TileMode.CLAMP);        //給paint對象添加渲染器            mPaint.setShader(mLinearGradient);            mGradientMatrix=new Matrix();        }    }

（2） 緊接著我們在onDraw（）函數中，通過矩陣的方式來不斷平移漸層效果，從而在繪製文字時，產生動態閃動效果：

protected void onDraw(Canvas canvas) {    super.onDraw(canvas);    if (mGradientMatrix!=null){        //設定矩陣的移動距離        mTranslate+=mViewWidth/5;        //移動到末尾後，將回到最初的位置，重新移動        if (mTranslate>2*mViewWidth){            mTranslate=-mViewWidth;        }        //設定矩陣的移動        mGradientMatrix.setTranslate(mTranslate,0);        //給矩陣添加渲染器        mLinearGradient.setLocalMatrix(mGradientMatrix);        //延遲100ms        postInvalidateDelayed(100);    }}

最後在xml布局檔案中引用：

<main.view.com.drawmyview.MyTextView    android:layout_marginTop="20dp"    android:text="@string/textview2"    android:textSize="30sp"    android:layout_gravity="center"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />