Android 自定義View之自定義繪制（Custom Drawing）

自定義View根據(jù)你App的不同需要可以簡(jiǎn)單，也可以很復(fù)雜。

重寫(xiě)onDraw()

自定義View需要重寫(xiě) onDraw()方法，Canvas對(duì)象就可以用來(lái)繪制View本身。Canvas定義了繪制文本、線(xiàn)、圖片、以及各種圖形操作的方法。你可以通過(guò)Canvas中定義的方法來(lái)自定義你的UI。

在你調(diào)用任意一個(gè)drawing相關(guān)的方法之前你還需要一個(gè)Paint對(duì)象。

創(chuàng)建Paint對(duì)象

android.graphics框架把繪制分成兩部分：

Canvas：繪制什么？

Paint：怎么繪制？

例如：Canvas控制怎么繪制一條線(xiàn)，Paint定義繪制這條線(xiàn)的顏色；Canvas可以用來(lái)畫(huà)矩形，而Paint用來(lái)指明這個(gè)矩形使用顏色填充還是保持空白。簡(jiǎn)而言之，Canvas用來(lái)控制你在屏幕上繪制的形狀，而Paint用來(lái)控制這些形狀的顏色，樣式，字體等。

所以在你繪制任何東西之前，你需要?jiǎng)?chuàng)建一個(gè)或者多個(gè)Paint對(duì)象。下面的例子在init()方法中來(lái)完成創(chuàng)建Paint對(duì)象，并且在構(gòu)造方法中調(diào)用。

private void init() {
   mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   mTextPaint.setColor(mTextColor);
   if (mTextHeight == 0) {
       mTextHeight = mTextPaint.getTextSize();
   } else {
       mTextPaint.setTextSize(mTextHeight);
   }

   mPiePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   mPiePaint.setStyle(Paint.Style.FILL);
   mPiePaint.setTextSize(mTextHeight);

   mShadowPaint = new Paint(0);
   mShadowPaint.setColor(0xff101010);
   mShadowPaint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL));

   ...

提前初始化繪制所需要的對(duì)象是非常必要的，因?yàn)?code>View的重新繪制可能會(huì)非常頻繁，而繪制所需要的對(duì)象在初始化的時(shí)候非常消耗資源。在onDraw()方法中創(chuàng)建這些對(duì)象會(huì)降低性能，使UI比較卡頓。

處理Layout Event

為了正確的繪制你的自定義View，你需要知道你要繪制圖形的大小。由于在屏幕上不同的形狀和大小，復(fù)雜的自定義View需要多次進(jìn)行layout計(jì)算。你絕對(duì)不能假設(shè)你的View在屏幕上的大小，即使只有一個(gè)app使用你的自定義View，因?yàn)槟愕?code>View要適不同尺寸，不同像素密度的屏幕以及在橫屏和豎屏不同的縱橫比的情況。

盡管View有很多方法用了進(jìn)行measure工作，但是它們大部分都不用重寫(xiě)。如果你不需要特別的控制View的size，那么你只需要重寫(xiě)一個(gè)方法[onSizeChanged()](https://developer.android.com/reference/android/view/View.html#onSizeChanged(int, int, int, int))。

[onSizeChanged()](https://developer.android.com/reference/android/view/View.html#onSizeChanged(int, int, int, int))在你第一次指定View的size或者由于任何原因?qū)е?code>Veiw的size發(fā)生改變時(shí)被調(diào)用。在[onSizeChanged()](https://developer.android.com/reference/android/view/View.html#onSizeChanged(int, int, int, int)) 方法中計(jì)算View的位置，尺寸和一些其他的先關(guān)屬性，而不是在onDraw()方法中進(jìn)行。在PieChart這個(gè)例子中，計(jì)算餅狀圖的邊框，文本框的相對(duì)位置以及其他的一些可見(jiàn)的元素都是在[onSizeChanged()](https://developer.android.com/reference/android/view/View.html#onSizeChanged(int, int, int, int))方法中進(jìn)行。

當(dāng)你的View被指定size之后，layout manager認(rèn)為這個(gè)size包括了View的所有padding，你在計(jì)算View的size的時(shí)候必須考慮padding。下面的代碼展示了PieChart.onSizeChanged() 中是怎么進(jìn)行這些工作的：

 // Account for padding
       float xpad = (float)(getPaddingLeft() + getPaddingRight());
       float ypad = (float)(getPaddingTop() + getPaddingBottom());

       // Account for the label
       if (mShowText) xpad += mTextWidth;

       float ww = (float)w - xpad;
       float hh = (float)h - ypad;

       // Figure out how big we can make the pie.
       float diameter = Math.min(ww, hh);

如果你需要更好的控制你的View的layout參數(shù)，你可以實(shí)現(xiàn)[onMeasure()](https://developer.android.com/reference/android/view/View.html#onMeasure(int, int))方法，這個(gè)方法的參數(shù)是 View.MeasureSpec類(lèi)型，這些參數(shù)會(huì)告訴你，你的parent View希望你是多大size，以及這是最大的size還是只是建議的size。為了優(yōu)化這兩個(gè)參數(shù)是被包裝過(guò)的整數(shù)，你可以通過(guò) View.MeasureSpec來(lái)獲取這連個(gè)整形的參數(shù)所包含的信息。

下面是一個(gè)onMeasure()方法的實(shí)現(xiàn)，在這個(gè)實(shí)現(xiàn)中，PieChart盡可能是自己所占的區(qū)域最大，以讓其中的餅狀圖能盡量填充PieChart。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   // Try for a width based on our minimum
   int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
   int w = resolveSizeAndState(minw, widthMeasureSpec, 1);

   // Whatever the width ends up being, ask for a height that would let the pie
   // get as big as it can
   int minh = MeasureSpec.getSize(w) - (int)mTextWidth + getPaddingBottom() + getPaddingTop();
   int h = resolveSizeAndState(MeasureSpec.getSize(w) - (int)mTextWidth, heightMeasureSpec, 0);

   setMeasuredDimension(w, h);
}

以上有以下幾點(diǎn)說(shuō)明：

  1. 上面計(jì)算的尺寸包含了View的padding，這些在前面已經(jīng)說(shuō)過(guò)，這也是每一個(gè)View應(yīng)該做的。
  2. [resolveSizeAndState()](https://developer.android.com/reference/android/view/View.html#resolveSizeAndState(int, int, int)) 用來(lái)返回View的最終width和height，這個(gè)方法根據(jù)View所期望的size和onMeasure()方法參數(shù)中所帶的size進(jìn)行比較然后返回一個(gè)合適size。
  3. onMeasure()方法沒(méi)有返回值，需要調(diào)用 [setMeasuredDimension()](https://developer.android.com/reference/android/view/View.html#setMeasuredDimension(int, int))方法，如果不調(diào)用，會(huì)報(bào)異常。

Draw！

當(dāng)以上工作完成后，你就可以來(lái)實(shí)現(xiàn)onDraw()方法了，每一個(gè)View的onDraw()都不同，但是在大多數(shù)的View中也有相同的操作：

protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);

   // Draw the shadow
   canvas.drawOval(
           mShadowBounds,
           mShadowPaint
   );

   // Draw the label text
   canvas.drawText(mData.get(mCurrentItem).mLabel, mTextX, mTextY, mTextPaint);

   // Draw the pie slices
   for (int i = 0; i < mData.size(); ++i) {
       Item it = mData.get(i);
       mPiePaint.setShader(it.mShader);
       canvas.drawArc(mBounds,
               360 - it.mEndAngle,
               it.mEndAngle - it.mStartAngle,
               true, mPiePaint);
   }

   // Draw the pointer
   canvas.drawLine(mTextX, mPointerY, mPointerX, mPointerY, mTextPaint);
   canvas.drawCircle(mPointerX, mPointerY, mPointerSize, mTextPaint);
}

翻譯原文
例子下載地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容