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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/BrilliantEagle/article/details/50412202

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);



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页