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