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

来源：互联网发布：jsp网站源码下载编辑：程序博客网时间：2024/05/17 02:27

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 screenthis.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添加到PopupWindowmWindow.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)；

0 0