轉載請标明出處：http://blog.csdn.net/lmj623565791/article/details/43131133，本文出自：【張鴻洋的部落格】
今天打開建行看存款，一看傷心欲絕，再看：我擦，這個圓形菜單挺炫。于是，為了掩蓋我悲痛的心情，我決定是實作這個效果。好了，其實還有個原因，記得我初學android那會我做的應用被鄙視了，說我的菜單沒有建行的好看，那麼今天，證明自己的時刻到了。我決定用我做的圓形菜單的控件，32s實作個建行的菜單給他看看，順便教教他~~
玩笑開完，直接看下效果圖：
ok，這個就是我們今天的主要的效果了~~直接跟随手指滾動，直接快速滾動，直接點選item~~~
這個效果的背景是在我在跪了2個多小時後，愛歌花了32s給我做的，再次感謝愛歌。
接下來，就是使用該控件實作建行那個圓形菜單~~
ok，分分鐘搞定~~
就是有點惡心的地方，尼瑪建行左邊那個介紹和右邊菜單的背景是兩個圖，想要做到無縫連在一起的效果，在我們圓形菜單的測量中還多寫了幾行代碼，這個屬于後話。
簡單看下使用方式，有個直覺的了解
[java] view
plaincopy
package com.zhy.ccbcriclemenu;
import android.app.activity;
import android.os.bundle;
import android.view.view;
import android.widget.toast;
import com.zhy.view.circlemenulayout;
import com.zhy.view.circlemenulayout.onmenuitemclicklistener;
public class mainactivity extends activity
{
private circlemenulayout mcirclemenulayout;
private string[] mitemtexts = new string[] { "安全中心 ", "特色服務", "投資理财",
"轉賬彙款", "我的賬戶", "信用卡" };
private int[] mitemimgs = new int[] { r.drawable.home_mbank_1_normal,
r.drawable.home_mbank_2_normal, r.drawable.home_mbank_3_normal,
r.drawable.home_mbank_4_normal, r.drawable.home_mbank_5_normal,
r.drawable.home_mbank_6_normal };
@override
protected void oncreate(bundle savedinstancestate)
{
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main02);
mcirclemenulayout = (circlemenulayout) findviewbyid(r.id.id_menulayout);
mcirclemenulayout.setmenuitemiconsandtexts(mitemimgs, mitemtexts);
mcirclemenulayout.setonmenuitemclicklistener(new onmenuitemclicklistener()
{
@override
public void itemclick(view view, int pos)
{
toast.maketext(mainactivity.this, mitemtexts[pos],
toast.length_short).show();
}
public void itemcenterclick(view view)
toast.maketext(mainactivity.this,
"you can do something just like ccb ",
});
}
}
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:gravity="center_vertical"
android:orientation="horizontal" >
<com.zhy.view.circlemenulayout
android:id="@+id/id_menulayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="100dp"
android:background="@drawable/circle_bg3" >
<relativelayout
android:id="@id/id_circle_menu_item_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<imageview
android:layout_width="104.0dip"
android:layout_height="104.0dip"
android:layout_centerinparent="true"
android:background="@drawable/turnplate_center_unlogin" />
android:layout_width="116.0dip"
android:layout_height="116.0dip"
android:background="@drawable/turnplate_mask_unlogin_normal" />
</relativelayout>
</com.zhy.view.circlemenulayout>
</linearlayout>
布局檔案的circlemenulayout中的一個控件為我們圓形菜單的中間的那個view，當然了你可以不設定~
整個控件的使用，不要太簡單，一行代碼：setmenuitemiconsandtexts去設定文本和圖檔就行~~~
如果你需要監聽click事件，通過setonmenuitemclicklistener接口即可。
ok，不知道大家有沒有注意到，我們的布局中間的view設定的id是這樣的： android:id="@id/id_circle_menu_item_center" ，維薩呢，因為我們的自定義控件依賴于我們的id，是以這個id我不希望使用者自己去指定，而是提前定義些id，讓使用者去使用。其實這樣的也很常見，大家在使用一些控件時，某些id也需要這麼做，具體哪些控件，忘了~
那麼如何定義這樣的id資源呢？
在res/values下面去建立一個ids.xml檔案：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="id_circle_menu_item_image" type="id"/>
<item name="id_circle_menu_item_text" type="id"/>
<item name="id_circle_menu_item_center" type="id"/>
</resources>
可以看到裡面寫了3個id，前兩個後面會用到，見到的時候别忘了，在這定義過。
對于上述的效果，我們決定自定義一個viewgroup叫做circlemenulayout；
至于菜單項，文本+圖檔，支援設定其中任何一項，或者全部~~那麼我們隻需要在circlemenulayout的layout中去設定他們的位置就行了。
當然了在layout()之前，我們需要去進行onmeasure去測量，設定自己的寬高，和item的寬高；
最後就是和使用者互動了滾動了：
我們重寫dispatchtouchevent事件，在其中編寫跟随手指移動的代碼~~我為什麼不再ontouchevent裡面寫，因為如果我在ontouchevent裡面寫，使用者觸摸item時，我們的菜單無法移動，因為item是可點選，會作為我們的targetview，然後消耗掉我們的move事件~~~關于事件分發：具體參考：android
viewgroup事件分發機制 。
當然了還有很多細節，如何快速滾動，什麼時候應該觸發item的click事件等等。
如果不清楚，請先跳過~~繼續往下看~~
在測量之前，我們先看看公布出去的setmenuitemiconsandtexts，這個應該在測量之前。
/**
* 設定菜單條目的圖示和文本
*
* @param resids
*/
public void setmenuitemiconsandtexts(int[] resids, string[] texts)
mitemimgs = resids;
mitemtexts = texts;
// 參數檢查
if (resids == null && texts == null)
throw new illegalargumentexception("菜單項文本和圖檔至少設定其一");
}
// 初始化mmenucount
mmenuitemcount = resids == null ? texts.length : resids.length;
if (resids != null && texts != null)
mmenuitemcount = math.min(resids.length, texts.length);
addmenuitems();
/**
* 添加菜單項
private void addmenuitems()
layoutinflater minflater = layoutinflater.from(getcontext());
/**
* 根據使用者設定的參數，初始化view
*/
for (int i = 0; i < mmenuitemcount; i++)
final int j = i;
view view = minflater.inflate(r.layout.circle_menu_item, this,
false);
imageview iv = (imageview) view
.findviewbyid(r.id.id_circle_menu_item_image);
textview tv = (textview) view
.findviewbyid(r.id.id_circle_menu_item_text);
if (iv != null)
iv.setvisibility(view.visible);
iv.setimageresource(mitemimgs[i]);
iv.setonclicklistener(new onclicklistener()
{
@override
public void onclick(view v)
{
if (monmenuitemclicklistener != null)
{
monmenuitemclicklistener.itemclick(v, j);
}
}
});
if (tv != null)
tv.setvisibility(view.visible);
tv.settext(mitemtexts[i]);
// 添加view到容器中
addview(view);
比較簡單，拿到兩個資料，算出菜單的個數；然後去周遊，根據我們預設的r.layout.circle_menu_item，把值設上就可以。
看一眼我們的r.layout.circle_menu_item
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<imageview
android:id="@id/id_circle_menu_item_image"
android:layout_width="wrap_content"
android:visibility="gone"
android:src="@drawable/home_mbank_1_clicked"
android:layout_height="wrap_content" />
<textview
android:id="@id/id_circle_menu_item_text"
android:layout_height="wrap_content"
android:textcolor="@android:color/white"
android:text="保險"
android:textsize="14.0dip" />
其實就是一個布局檔案，裡面一個tv一個iv；注意裡面的兩個id，我們之前說過了哈~~
這裡大家會不會有疑問，為什麼我要獨立出一個布局呢，咋不在代碼裡面寫死~~~
嗯，是這樣的，我不是任性，假設我代碼裡面寫死了，現在的需求是左邊是文本右邊是圖示，你咋辦，去改源碼？我們獨立出來以後呢？使用者自己改改布局就行了~~~當然了，還可以把這個布局通過一個方法公布出來，setmenuitemlayoutid這樣的方法。
對了上面還涉及到點選事件，這個so easy了，幾行代碼：
* menuitem的點選事件接口
* @author zhy
public interface onmenuitemclicklistener
void itemclick(view view, int pos);
void itemcenterclick(view view);
private onmenuitemclicklistener monmenuitemclicklistener;
* 設定menuitem的點選事件接口
* @param monmenuitemclicklistener
public void setonmenuitemclicklistener(
onmenuitemclicklistener monmenuitemclicklistener)
this.monmenuitemclicklistener = monmenuitemclicklistener;
沒撒說的吧，大家見了無數次了~~
好了，接下來看我們聲明的變量和onmeasure
public class circlemenulayout extends viewgroup
private int mradius;
* 該容器内child item的預設尺寸
private static final float radio_default_child_dimension = 1 / 4f;
* 菜單的中心child的預設尺寸
private float radio_default_centeritem_dimension = 1 / 3f;
* 該容器的内邊距,無視padding屬性，如需邊距請用該變量
private static final float radio_padding_layout = 1 / 12f;
* 當每秒移動角度達到該值時，認為是快速移動
private static final int flingable_value = 300;
* 如果移動角度達到該值，則屏蔽點選
private static final int noclick_value = 3;
private int mflingablevalue = flingable_value;
private float mpadding;
* 布局時的開始角度
private double mstartangle = 0;
* 菜單項的文本
private string[] mitemtexts;
* 菜單項的圖示
private int[] mitemimgs;
* 菜單的個數
private int mmenuitemcount;
* 檢測按下到擡起時旋轉的角度
private float mtmpangle;
* 檢測按下到擡起時使用的時間
private long mdowntime;
* 判斷是否正在自動滾動
private boolean isfling;
public circlemenulayout(context context, attributeset attrs)
super(context, attrs);
// 無視padding
setpadding(0, 0, 0, 0);
* 設定布局的寬高，并政策menu item寬高
protected void onmeasure(int widthmeasurespec, int heightmeasurespec)
int reswidth = 0;
int resheight = 0;
* 根據傳入的參數，分别擷取測量模式和測量值
int width = measurespec.getsize(widthmeasurespec);
int widthmode = measurespec.getmode(widthmeasurespec);
int height = measurespec.getsize(heightmeasurespec);
int heightmode = measurespec.getmode(heightmeasurespec);
* 如果寬或者高的測量模式非精确值
if (widthmode != measurespec.exactly
|| heightmode != measurespec.exactly)
// 主要設定為背景圖的高度
reswidth = getsuggestedminimumwidth();
// 如果未設定背景圖檔，則設定為螢幕寬高的預設值
reswidth = reswidth == 0 ? getdefaultwidth() : reswidth;
resheight = getsuggestedminimumheight();
resheight = resheight == 0 ? getdefaultwidth() : resheight;
} else
// 如果都設定為精确值，則直接取小值；
reswidth = resheight = math.min(width, height);
setmeasureddimension(reswidth, resheight);
// 獲得半徑
mradius = math.max(getmeasuredwidth(), getmeasuredheight());
// menu item數量
final int count = getchildcount();
// menu item尺寸
int childsize = (int) (mradius * radio_default_child_dimension);
// menu item測量模式
int childmode = measurespec.exactly;
// 疊代測量
for (int i = 0; i < count; i++)
final view child = getchildat(i);
if (child.getvisibility() == gone)
continue;
// 計算menu item的尺寸；以及和設定好的模式，去對item進行測量
int makemeasurespec = -1;
if (child.getid() == r.id.id_circle_menu_item_center)
makemeasurespec = measurespec.makemeasurespec(
(int) (mradius * radio_default_centeritem_dimension),
childmode);
} else
makemeasurespec = measurespec.makemeasurespec(childsize,
child.measure(makemeasurespec, makemeasurespec);
mpadding = radio_padding_layout * mradius;
首先說一下變量：其實都有注釋，mradius是我們整個view的寬度；幾個常量，分别為我們menu item的寬度占據mradius的比例；radio_padding_layout為内邊距占據的比例；剩下的自己看注釋~~
測量呢？
首先我們根據widthmeasurespec、heightmeasurespec分别擷取寬高的值和模式~~~
會不會有人會問這個值是什麼玩意？怎麼就能通過它拿到寬和高，沒關系，恰好我們是viewgroup，我們需要去測量子view，剛好要傳這兩個參數：
你往下看：child.measure(makemeasurespec, makemeasurespec);傳入了兩個值，你在看這兩個值如何形成的，
makemeasurespec = measurespec.makemeasurespec(childsize,childmode);是通過measurespec将尺寸和模式封裝到一起的~~好了，不能再扯了，有機會獨立寫篇自定義控件的總結部落格細說這些。
拿到尺寸和模式以後呢，我們去判斷模式，是否是exactly（如果你對三種模式不了解，請參考：android
手把手教您自定義viewgroup（一））
如果是exactly那麼簡單，直接取兩者的最小值即可。
如果不是，不是，那麼根據設定的背景圖的尺寸，如果沒有背景圖，那麼取預設的尺寸，預設其實就是螢幕寬和高中的小值；
* 獲得預設該layout的尺寸
* @return
private int getdefaultwidth()
windowmanager wm = (windowmanager) getcontext().getsystemservice(
context.window_service);
displaymetrics outmetrics = new displaymetrics();
wm.getdefaultdisplay().getmetrics(outmetrics);
return math.min(outmetrics.widthpixels, outmetrics.heightpixels);
得到父控件的尺寸後，我們setmeasureddimension設定下~~然後根據父控件的寬高，集合我們的預設常量的那些比例，去為我們的menu item設定寬和高：
沒撒說的，計算出寬度，這裡我們的寬度是精确值，是以我們設定menu item的模式為：exactly，最後通過measurespec封裝，傳入給child.measure(makemeasurespec, makemeasurespec);即可。
測量完成以後，那麼準備布局吧~~
我們在onlayout中将menu item設定到指定位置，理論上，我們的圓形菜單的樣子就搞定了~~
* 設定menu item的位置
*/
@override
protected void onlayout(boolean changed, int l, int t, int r, int b)
int layoutradius = mradius;
// laying out the child views
final int childcount = getchildcount();
int left, top;
// menu item 的尺寸
int cwidth = (int) (layoutradius * radio_default_child_dimension);
// 根據menu item的個數，計算角度
float angledelay = 360 / (getchildcount() - 1);
// 周遊去設定menuitem的位置
for (int i = 0; i < childcount; i++)
final view child = getchildat(i);
if (child.getid() == r.id.id_circle_menu_item_center)
continue;
if (child.getvisibility() == gone)
mstartangle %= 360;
// 計算，中心點到menu item中心的距離
float tmp = layoutradius / 2f - cwidth / 2 - mpadding;
// tmp cosa 即menu item中心點的橫坐标
left = layoutradius
/ 2
+ (int) math.round(tmp
* math.cos(math.toradians(mstartangle)) - 1 / 2f
* cwidth);
// tmp sina 即menu item的縱坐标
top = layoutradius
* math.sin(math.toradians(mstartangle)) - 1 / 2f
child.layout(left, top, left + cwidth, top + cwidth);
// 疊加尺寸
mstartangle += angledelay;
// 找到中心的view，如果存在設定onclick事件
view cview = findviewbyid(r.id.id_circle_menu_item_center);
if (cview != null)
cview.setonclicklistener(new onclicklistener()
public void onclick(view v)
if (monmenuitemclicklistener != null)
monmenuitemclicklistener.itemcenterclick(v);
}
// 設定center item位置
int cl = layoutradius / 2 - cview.getmeasuredwidth() / 2;
int cr = cl + cview.getmeasuredwidth();
cview.layout(cl, cl, cr, cr);
測量，無非是周遊，然後去計算left 和 top ，當然了，我們這裡是圓形，是以會使用到一些數學知識。tmp*cosa 即menu item中心點的橫坐标，tmp * sina 即menu item的縱坐标。關于這樣的計算可以參考：android
surfaceview實戰 打造抽獎轉盤 。 當然了，我也給大家繪制了一個圖：
假設小圓是我們的menu item，那麼他的坐标就是mradius / 2 + tmp * coas , mradius / 2 + tmp * sina 。
如果，你隻需要實作一個圓形菜單，并不需要跟随手指滾動神馬的，到此就可以了，拿走不謝。
我們繼續往下看滾動。
* 記錄上一次的x，y坐标
private float mlastx;
private float mlasty;
* 自動滾動的runnable
private autoflingrunnable mflingrunnable;
public boolean dispatchtouchevent(motionevent event)
float x = event.getx();
float y = event.gety();
log.e("tag", "x = " + x + " , y = " + y);
switch (event.getaction())
case motionevent.action_down:
mlastx = x;
mlasty = y;
mdowntime = system.currenttimemillis();
mtmpangle = 0;
// 如果目前已經在快速滾動
if (isfling)
// 移除快速滾動的回調
removecallbacks(mflingrunnable);
isfling = false;
return true;
break;
case motionevent.action_move:
/**
* 獲得開始的角度
*/
float start = getangle(mlastx, mlasty);
* 獲得目前的角度
float end = getangle(x, y);
// log.e("tag", "start = " + start + " , end =" + end);
// 如果是一、四象限，則直接end-start，角度值都是正值
if (getquadrant(x, y) == 1 || getquadrant(x, y) == 4)
mstartangle += end - start;
mtmpangle += end - start;
// 二、三象限，色角度值是付值
mstartangle += start - end;
mtmpangle += start - end;
// 重新布局
requestlayout();
case motionevent.action_up:
// 計算，每秒移動的角度
float anglepersecond = mtmpangle * 1000
/ (system.currenttimemillis() - mdowntime);
// log.e("tag", angleprmillionsecond + " , mtmpangel = " +
// mtmpangle);
// 如果達到該值認為是快速移動
if (math.abs(anglepersecond) > mflingablevalue && !isfling)
// post一個任務，去自動滾動
post(mflingrunnable = new autoflingrunnable(anglepersecond));
// 如果目前旋轉角度超過noclick_value屏蔽點選
if (math.abs(mtmpangle) > noclick_value)
return super.dispatchtouchevent(event);
ok，代碼并不長~~down的時候，記錄下mlastx,mlasty,目前的時間，以及重置mtmpangle為0，如果目前在自動滾動，停止該操作。
action_move的時候，根據mlastx,mlasty得到一個角度，再根據目前的x,y再獲得一個排程，不斷去改變mstartangle，重新布局接口。
當然了getangle(x, y);方法，獲得的角度在如果是一、四象限，則直接end-start，角度值都是正值，在二、三象限，end-start角度值是負值，是以倒着減一下。
up的時候，計算每秒移動的角度， 如果達到mflingablevalue的大小，則認為需要自動滾動，post(mflingrunnable = new autoflingrunnable(anglepersecond));去執行。
如果目前旋轉角度超過noclick_value屏蔽點選，屏蔽點選就是return true即可。為撒呢？因為子view的點選觸發在super.dispatchtouchevent(event);裡面，我們直接return了。
那麼我們看上面說的一些方法，先看：getangle:
* 根據觸摸的位置，計算角度
* @param xtouch
* @param ytouch
private float getangle(float xtouch, float ytouch)
double x = xtouch - (mradius / 2d);
double y = ytouch - (mradius / 2d);
return (float) (math.asin(y / math.hypot(x, y)) * 180 / math.pi);
還是畫圖來說：
math.sqrt( x * x + y * y )是斜邊長，乘以 sin a 就是 y 的長度；
反之求a的角度：即math.asin(y / math.hypot(x, y) ； [ hypot是x * x + y * y ]
這樣我們移動的角度計算就ok了~~
不同象限，以為因為start-end的值可能為負值，是以需要改變減法的順序，因為我們最後角度需要正值；
關于判斷象限的代碼：
* 根據目前位置計算象限
* @param x
* @param y
private int getquadrant(float x, float y)
int tmpx = (int) (x - mradius / 2);
int tmpy = (int) (y - mradius / 2);
if (tmpx >= 0)
return tmpy >= 0 ? 4 : 1;
return tmpy >= 0 ? 3 : 2;
自己拿坐标代入，立馬就了解了~~~
最後還剩什麼呢？
看我們的自動autoflingrunnable，自動滾動的任務~~
我們通過post(mflingrunnable = new autoflingrunnable(anglepersecond));去觸發的
* 自動滾動的任務
private class autoflingrunnable implements runnable
private float angelpersecond;
public autoflingrunnable(float velocity)
this.angelpersecond = velocity;
public void run()
// 如果小于20,則停止
if ((int) math.abs(angelpersecond) < 20)
return;
isfling = true;
// 不斷改變mstartangle，讓其滾動，/30為了避免滾動太快
mstartangle += (angelpersecond / 30);
// 逐漸減小這個值
angelpersecond /= 1.0666f;
postdelayed(this, 30);
代碼比較短，我們傳入每秒移動的角度這個值，然後根據這個值去增加mstartangle，然後requestlayout();就是自動滾動了~~當然了需要越滾越慢和停止，是以需要
// 逐漸減小這個值angelpersecond /= 1.0666f; 以及最後移動很慢的時候，我們就停下來：
// 如果小于20,則停止
if ((int) math.abs(angelpersecond) < 20)
{
isfling = false;
return;
}
到此，所有代碼解析完畢~~~嘿嘿~
github位址：https://github.com/hongyangandroid/android-circlemenu 歡迎satr or
fork .
csdn源碼點選下載下傳
----------------------------------------------------------------------------------------------------------
部落客部分視訊已經上線，如果你不喜歡枯燥的文本，請猛戳（初錄，期待您的支援）：
視訊目錄位址：本人錄制的視訊教程