Android自定義控件系列三：如何畫畫

前面章節我們說了如何定義屬性、如何定義寬高，這樣之後組件的簡單外形或輪廓就已經出來，或者說已經定義出了畫布的大小，解下來就是如何在畫布上揮毫潑墨了。

組件(除了容器組件)實際上都是靠畫出來的，通過系統提供的畫筆(Paint)以及基本圖形(圓、矩形、直線等)就可以完整的勾畫出一個組件。下面就詳細介紹如何畫以及一些技巧：

1. 如何獲取顏色

   一般情況下，要實現啥樣的組件，是由美工設計出效果圖，或者是網上找的些圖片樣式，這樣就需要將效果圖上的顏色摳下來，否則，你想通過肉眼就能知道這個顏色的編碼是啥，那只有悟空大師兄才知道。

   這樣我們就要簡單的學習下Photoshop的簡單用法，吸管使用：

   

    

   Android中顏色編碼是可以設置透明度的，如：0x00XXXXXX --- 0xFFXXXXXX。 其中0x代表十六進制書寫格式。緊接著後倆位就是透明度的，00--FF(0--255)共有256個級別的，00表示完全透明，FF表示完全不透明。

    

   2.如何畫

   重寫onDraw方法：

   1.@Override2.protected void onDraw(Canvas canvas) {3.super.onDraw(canvas);4.///需要畫的5.}

   每次頁面需要刷新或重繪時或者說頁面需要顯示組件時，onDraw都會被調用，在其中我們將組件（利用畫筆Paint）畫到畫布上即可。

   canvas是畫布，大小和組件的大小是一致的。

   注意：onDraw每次被調用時canvas畫布都是一個干淨的、空白的、透明的，他不會記錄以前畫上去的。

    

   3.Paint和Canvas基本方法介紹：

   Paint:

   void setARGB(int a, int r, int g, int b) 設置Paint對象顏色，參數一為alpha透明通道

   void setAlpha(int a) 設置alpha不透明度，范圍為0~255

   void setAntiAlias(boolean aa) //是否抗鋸齒

   void setColor(int color) //設置顏色，這裡Android內部定義的有Color類包含了一些常見顏色定義

   void setFakeBoldText(boolean fakeBoldText) //設置偽粗體文本

   void setLinearText(boolean linearText) //設置線性文本

   PathEffect setPathEffect(PathEffect effect) //設置路徑效果

   Rasterizer setRasterizer(Rasterizer rasterizer) //設置光柵化

   Shader setShader(Shader shader) //設置陰影

   void setTextAlign(Paint.Align align) //設置文本對齊

   void setTextScaleX(float scaleX) //設置文本縮放倍數，1.0f為原始

   void setTextSize(float textSize) //設置字體大小

   Typeface setTypeface(Typeface typeface) //設置字體，Typeface包含了字體的類型，粗細，還有傾斜、顏色等。

   void setUnderlineText(boolean underlineText) //設置下劃線

   Canvas:

   void drawRect(RectF rect, Paint paint) //利用畫筆paint，繪制區域，參數一為RectF一個區域
   
   void drawPath(Path path, Paint paint) //繪制一個路徑，參數一為Path路徑對象
   
   void drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) //貼圖，參數一就是我們常規的Bitmap對象，參數二是源區域(這裡是bitmap)，參數三是目標區域(應該在 canvas的位置和大小)，參數四是Paint畫刷對象，因為用到了縮放和拉伸的可能，當原始Rect不等於目標Rect時性能將會有大幅損失。
   
   void drawLine(float startX, float startY, float stopX, float stopY, Paint paint) //畫線，參數一起始點的x軸位置，參數二起始點的y軸位置，參數三終點的x軸水平位置，參數四y軸垂直位置，最後一個參數為Paint畫刷對象。
   
   void drawPoint(float x, float y, Paint paint) //畫點，參數一水平x軸，參數二垂直y軸，第三個參數為Paint對象。
   
   void drawText(String text, float x, float y, Paint paint) //渲染文本，Canvas類除了上面的還可以描繪文字，參數一是String類型的文本，參數二x軸，參數三y軸，參數四是Paint對象。
   
   void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint) //在路徑上繪制文本，相對於上面第二個參數是Path路徑對象

    

   4.簡單例子

   01. /**02.* 畫邊框03.*/04.private void onDraw(Canvas canvas){ 05.super.onDraw(canvas);06.//創建畫筆07.Paint paint = new Paint();08.paint.setColor(0xFF817F7F);//設置畫筆顏色09.RectF rectF = new RectF(0, 0, 200 , 200);//創建一個矩形10. 11.//畫矩形12.canvas.drawRect(rectF, paint);//利用畫筆將矩形畫到畫布上13. 14.//畫文字15.paint.setTextSize(24);//設置文字字體大小16.canvas.drawText(看源社區, 0, 0, paint);//注意，這樣花，文字的左上角並沒與畫布的左上角對齊17. 18.//畫文字，對齊 19.int top = 20;20.int left = 30;21.FontMetricsInt fontMetrics = paint.getFontMetricsInt();22.int txtHeight = fontMetrics.bottom - fontMetrics.ascent;23.canvas.drawText(text, left, top-fontMetrics.ascent, paint);//這樣畫，就能是文字左上角與畫布的左上角對齊。這裡涉及文字的中心線問題，可以參考其他文章。24.}

   另外，如果我想組件刷新或重新畫，也就是onDraw重新被調用時，可以使用invalidate()方法。