Android 自定義 View 實戰之角度選擇器

FlyingSnowBean發表於2017-05-18
AndroidView

本文比較基礎，在閱讀本文前只需要掌握最基礎的自定義View知識和Android事件知識。

起步

有一天晚上，在Google Photos檢視照片，用了一下它的圖片剪裁功能，於是我馬上就被其介面和操作吸引。

Android 自定義 View 實戰之角度選擇器

第二天我就想模仿做一個這樣的裁相簿，當然，我做了。同時也做了一個和Google Photos裁圖頁面幾乎一模一樣的角度選擇器。那麼，來看一下最終的效果：

Android 自定義 View 實戰之角度選擇器

思路

仔細觀察這個效果，先分析構成結構，我把它分成三部分：

  1. 表示刻度的點
  2. 相應點上方的數字
  3. 控制元件中央的當前刻度與三角

可以看出，構成元素十分簡單，不涉及圖片，Drawable，那麼只需要用Canvas畫出來就好了。

接下來觀察手勢的操作，檢視隨著手指滑動，控制元件做出的變化，這裡的變化有：

  1. 手指按上去時，部分割槽域變亮（部分割槽域即為可見區域）
  2. 隨著手指滑動，相應的數字發生移動，當前角度值也發生改變
  3. 離中心越近，透明度越低，且0°的下方的點要大一些

好了，我們對這個控制元件已經分析的很透徹了，根據分析，首先我們要在View的onDraw()方法中畫出構成元素，之後要讓它動起來，在onTouchEvent()方法中監聽手勢，改變一些值並重繪我們的View，這裡很明顯，我們要改變的肯定是當前角度這個值。

動手

既然有了思路，那麼就要馬上動手，不然下次忘記掉了怎麼辦？

畫點

首先，先把點給畫出來，位置很簡單，肯定是從檢視中心開始畫，往左往右分別畫點。

for (int i = 0; i < mPointCount; i++) {
    canvas.getClipBounds(mCanvasClipBounds);
   canvas.drawPoint(mCanvasClipBounds.centerX() + (i - mPointCount / 2) * mPointMargin,
                    mCanvasClipBounds.centerY(), mPointPaint);
}複製程式碼

其中mPointCount為所要畫的點個數，這裡預設為51個，mPointMargin為兩點間的邊距，長度為View的寬度除以點的個數。

看看效果

Android 自定義 View 實戰之角度選擇器

嗯，成功的把點給畫出來了。

畫刻度上方的數字

既然把點給畫出來了，根據我們的思路，我們要把數字給畫到正確的位置上，畫數字當然很簡單，這裡難的是找到正確的位置。

首先，我們的數字是會移動的，隨著當前角度的不同，所展示的數字大小位置都不同。但毫無疑問的是，這個位置（x座標）肯定是關於當前角度的一個函式。至於具體是一個什麼樣的函式，相信聰明的你很快就可以分析出來，畢竟只是一個線性關係，這裡就直接貼程式碼了。

private void drawDegreeText(int degrees, Canvas canvas, boolean canReach) {
    canvas.drawText(degrees + "°",
                getWidth() / 2 + mPointMargin * degrees / 2 - mTextWidths[0] / 2 * 3 - mCurrentDegrees / 2 * mPointMargin,
                 getHeight() / 2 - 10,
                 mTextPaint);
    }
}複製程式碼

按照我們的效果，我們需要畫出-90°~90°的刻度，其中-45°～45°是可到達角度，另外的角度不可到達。

drawDegreeText(0, canvas, true);
drawDegreeText(15, canvas, true);
drawDegreeText(30, canvas, true);
drawDegreeText(45, canvas, true);
drawDegreeText(-15, canvas, true);
drawDegreeText(-30, canvas, true);
drawDegreeText(-45, canvas, true);

drawDegreeText(60, canvas, false);
drawDegreeText(75, canvas, false);
drawDegreeText(90, canvas, false);
drawDegreeText(-60, canvas, false);
drawDegreeText(-75, canvas, false);
drawDegreeText(-90, canvas, false);複製程式碼

好了，來看一下效果，可以看到，數字被畫在了正確的位置。

Android 自定義 View 實戰之角度選擇器

畫當前角度

這個超級簡單呢，位置也特別好確定，上方三角形的Path也非常好知道，但是這裡要注意的是，噹噹前角度為0°左右時，不應該把0°刻度顯示出來。

//畫當前角度
if (mCurrentDegrees >= 10) {
    canvas.drawText(mCurrentDegrees + "°", getWidth() / 2 - mTextWidths[0], mBaseLine, mTextPaint);
} else if (mCurrentDegrees <= -10) {
    canvas.drawText(mCurrentDegrees + "°", getWidth() / 2 - mTextWidths[0] / 2 * 3, mBaseLine, mTextPaint);
} else if (mCurrentDegrees < 0) {
    canvas.drawText(mCurrentDegrees + "°", getWidth() / 2 - mTextWidths[0], mBaseLine, mTextPaint);
} else {
    canvas.drawText(mCurrentDegrees + "°", getWidth() / 2 - mTextWidths[0] / 2, mBaseLine, mTextPaint);
}

//三角指示器的Path
mIndicatorPath.moveTo(w / 2, h / 2 + mFontMetrics.top / 2 - 18);
mIndicatorPath.rLineTo(-8, -8);
mIndicatorPath.rLineTo(16, 0);複製程式碼

還有一個小細節，就是離中心越近，其透明度越來越低，也就是說，我們要根據離中心的位置，來改變畫筆Paint的alpha值，再將點畫出。

 for (int i = 0; i < mPointCount; i++) {

     if (i > zeroIndex - 22 && i < zeroIndex + 22 && mScrollStarted) {
         mPointPaint.setAlpha(255);
     } else {
         mPointPaint.setAlpha(100);
     }

     if (i > mPointCount / 2 - 8 && i < mPointCount / 2 + 8
              && i > zeroIndex - 22 && i < zeroIndex + 22) {
         if (mScrollStarted)
              mPointPaint.setAlpha(Math.abs(mPointCount / 2 - i) * 255 / 8);
         else
              mPointPaint.setAlpha(Math.abs(mPointCount / 2 - i) * 100 / 8);
     }
     ……
 }複製程式碼

這時，已經很像了，只是還不能動。

Android 自定義 View 實戰之角度選擇器

動起來

該繪製的部分我們已經都繪製起來了，是時候讓這個View動起來了，角度選擇器的觸控事件不復雜，我們只需要在我們移動手指的時候根據滑動距離來改變當前角度值並重繪檢視就可以看到移動效果了。為什麼呢？因為我們之前在畫數字的時候，位置都是由當前角度這個值決定的，所以它一發生變化，數字的位置也會發生改變。

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
     ……
        case MotionEvent.ACTION_MOVE:
            float distance = event.getX() - mLastTouchedPosition;
            ……
            if (distance != 0) {
                onScrollEvent(event, distance);
            }
            break;
        }
      ……
      return true;
}

private void onScrollEvent(MotionEvent event, float distance) {
    mTotalScrollDistance -= distance;
    postInvalidate();
    mLastTouchedPosition = event.getX();
    mCurrentDegrees = (int) ((mTotalScrollDistance * mDragFactor) / mPointMargin);
    if (mScrollingListener != null) {
        mScrollingListener.onScroll(mCurrentDegrees);
    }
}複製程式碼

當然你還需要處理一些細節性的東西，比如在數字移動的時候，靠近中心一定範圍就會消失（透明度變為0），這些都是很容易控制的，只要改變畫筆的透明度就好了，但是正是對細節的把控，才能做出一個效果讓使用者滿意的自定義View。最後，再來看一下效果。

Android 自定義 View 實戰之角度選擇器

擴充套件

到這裡，我們做的角度選擇器已經和Google Photos的幾乎一模一樣了，但是，僅僅這樣就夠了。不，不夠，我們還要繼續擴充套件，為什麼只能達到正負45°，我們要所有的範圍自由選擇，也就是-180°～180°，然後數字顏色啊，點的顏色啊都要讓人自由選擇。所以我們要擴充套件我們的角度選擇器，把一切可以變化的介面暴露出來。

最後看一下我們多種多樣的角度選擇器，還是挺好看呀～

Android 自定義 View 實戰之角度選擇器

總結

這次的自定義View相對於前兩次的來說，無疑是簡單了很多，只運用了最基礎的繪圖知識和事件機制，但是看起來效果也還不錯哦，嘿嘿，反正我特別喜歡這個角度選擇器，雖然我還不知道除了裁圖頁面可以用到還有哪裡可以用到。所以說運用最簡單的知識，也可以組合出比較複雜的效果，希望大家多發揮自己的想象力，一起自定義出更多好玩的，實用的，酷炫的控制元件吧。

希望這篇文章對你有幫助，哪怕只是一些啟發，我也很開心了。

最後附上原始碼地址：github.com/wuapnjie/De…

相關文章