Android Custom View系列《圓形菜單一》

前言

自訂view能夠做出很多不同尋常的效果，圓形菜單互動效果不錯，目前網上有兩個版本，雖然比較龐大，但非常值得研究與學習。

radial-menu-widget: https://code.google.com/p/radial-menu-widget/

Radial-Menu-Widget-Android:https://github.com/strider2023/Radial-Menu-Widget-Android

這兩個版本呢實際上第一個是最原始的作者，後來被修改後出現了後面的版本。在分析過程中可以逐個擊破，關鍵在於理解要點，本文講自訂一個圓形的view作為自訂圓形菜單的一個入門基礎，暫且命名為CircleView,點擊後變化顏色。

實現

如果要自訂一個圓形的菜單，那麼現有的LinearLayout或者RelativeLayout等都已經無法滿足，我們需要從View直接繼承，由於需要處理觸摸事件，所以需要重載onTouchEvent(),來根據當前觸摸的座標額動作狀態調整view

，除此之外需要判斷點擊的位置出於菜單的可是地區內，在Android中所有的view本質上是矩形地區的，所以需要通過數學計算來判斷當前是否點中了菜單，現在我們對這兩個關鍵做類似的實現。

1.初始化畫筆菜單位置及大小

在合適的地方初始化資源是很重要的，對畫筆和菜單半徑等我們可以在構造方法內賦值，

繪製一個圓還需要中心座標，這個值我們在view的大小確定時初始化，不要嘗試直接擷取view的高寬，這兩個值必須在view繪製後才拿的到，這裡我們在onMeasure和onSizeChanged都可以得到view的大小。

2.通過畫布繪製菜單

繪製一個圓形比較簡單，直接調用canvas的drawCircle方法

3.處理觸摸事件

重載onTouchEvent方法我們監聽到view上面的觸摸動作，一般來說ACTION_DOWN, ACTION_UP, ACTION_MOVE都是比較重要的

我們在點擊view的時候更改畫筆的顏色為粉紅色，當手離開時改回預設的紅色，所以可以在ACTION_DOWN時設定color為Color.MAGENTA, 在ACTION_UP時設定為Color.RED

另外在我們按住螢幕後移動位置，這是有可能會移除菜單地區，所以在ACTION_MOVE時我們也需要設定

4.計算觸摸位置是否在菜單內

這一步將直接影響我們的觸摸效果，這裡我們的地區是圓形，所以比較好處理，只需計算觸摸點到圓心的距離就可以知道相對位置。

後面當單一圓形菜單分割為多個功能表項目時，位置計算會複雜一些。

完整代碼：

  CircleView    (context, (context, attrs, 0 CircleView(Context context, AttributeSet attrs,  = getContext().getResources().getDisplayMetrics().density * 100= * 5   onMeasure( widthMeasureSpec,  width = MeasureSpec.getSize(widthMeasureSpec) / 2 height = MeasureSpec.getSize(heightMeasureSpec) / 2"CircleView", "onMeasure, height=" + height + ", width=" +  onSizeChanged( w,  h,  oldw, "CircleView", "onSizeChanged: w=" + w + ", h=" + updateCenter( x, = x / 2= y / 2 isInside( x,  Math.pow(x - mCenterX, 2) + Math.pow(y - mCenterY, 2<= Math.pow(mCenterX - getPaddingLeft(), 2  (!"CircleView", "position, x=" + event.getX() + ", y=" +