圆形导航菜单radial-menu-widget详解

1.   综述

  radial-menu-widget是应用于Android一个开源的圆形导航按钮，最后一次更新是2013年4月的版本，相关介绍和下载地址为：https://code.google.com/p/radial-menu-widget/，jar包和demo也可以从本人的CSDN上传的资源处下载（http://download.csdn.net/detail/brillianteagle/9379066）。下载其Demo，有4种类型。下面是效果图。

1）  标准圆形按钮

点击Open Menu按钮，可以打开标准圆形按钮。一级菜单平分外围的圆环。点击Exandable可以打开其对应的二级菜单。

图1，标准圆形菜单（1级目录）

2）  隐藏式圆形菜单

同标准圆形菜单不同，这里需要长按屏幕，长按点出现圆形菜单，继续长按并滑动到对应一级菜单即可。

3）   圆形进度条

4）  半圆形菜单

点击半圆形菜单“open”，一级菜单会显示出来，犹如“孔雀开屏”。这种菜单适合“贴边”使用，例如放到左侧贴边显示，其朝向可以进行设置。

2.   实现方式

  以标准圆形菜单为例，查看源码，发现是通过PopupWindow来实现的。

/**
 * This is the core class that handles the widget display and user interaction.
 * 
 * @author Jason Valestin (valestin@gmail.com )
 * @author Arindam Nath (strider2023@gmail.com)
 */
public class RadialMenuWidget extends View {

	private RadialMenuHelper helper;

	private List<RadialMenuItem> menuEntries = new ArrayList<RadialMenuItem>();//一级菜单
	private RadialMenuItem centerCircle = null;//中心菜单
	
	private PopupWindow mWindow;//用于显示view的容器
        //……省略无关内容

	/**
	 * Radial menu widget constructor.
	 * @param context - Application Context.
	 * <strong> Usage </strong>
	 * 
	 * RadialMenuWidget pieMenu = new RadialMenuWidget(this);
	 * pieMenu.addMenuEntry(menuItem);
	 * pieMenu.show(view);
	 */
	public RadialMenuWidget(Context context) {
		super(context);
		helper = new RadialMenuHelper();
		mWindow = helper.initPopup(context);
		// Gets screen specs and defaults to center of screen
		this.xPosition = (getResources().getDisplayMetrics().widthPixels) / 2;
		this.yPosition = (getResources().getDisplayMetrics().heightPixels) / 2;
		
		determineWedges();
		helper.onOpenAnimation(this, xPosition, yPosition, xSource, ySource);
	}

	/**
	 * Shows the radial menu widget.
	 * @param anchor - View to be anchored to.
	 */
	public void show(View anchor) {
		mWindow.setContentView(this);//把this添加到PopupWindow
		mWindow.showAtLocation(anchor, Gravity.NO_GRAVITY, this.xSource, this.ySource);//显示PopupWindow
	}
	
	/**
	 * Dismisses the radial menu widget.
	 */
	public void dismiss() {
		if(mWindow != null)
			mWindow.dismiss();
	}
        //……省略无关内容

}

3.   使用

   使用起来相对简单，demo中有详细用例，这里不再赘述。最后说一点，对于半圆形菜单，默认的展开的朝向是向上（HORIZONTAL_BOTTOM），查看源码，可以发现，控制它朝向的是：

/**
	 * Set the orientation the semi-circular radial menu.
	 * There are four possible orientations only
	 * VERTICAL_RIGHT , VERTICAL_LEFT , HORIZONTAL_TOP, 
	 * HORIZONTAL_BOTTOM
	 * @param orientation
	 */
	public void setOrientation(int orientation) {
		mOrientation = orientation;
		mMenuRect = getRadialMenuRect(false);
		mMenuCenterButtonRect = getRadialMenuRect(true);
		invalidate();
	}

其中：

public staticfinal int VERTICAL_RIGHT = 0;

public staticfinal int VERTICAL_LEFT = 1;

public staticfinal int HORIZONTAL_TOP = 2;

public staticfinal int HORIZONTAL_BOTTOM = 3;

更改朝向即调用：

SemiCircularRadialMenu menu = (SemiCircularRadialMenu) findViewById(R.id.radial_menu); 
Menu. setOrientation(SemiCircularRadialMenu. VERTICAL_RIGHT)；