Android Radial/Pie Menu

Question

Estoy buscando crear un menú radial en un juego que estoy escribiendo. ¿Hay una clase o API incluida para ayudar con esta o una solución de código abierto?

Algo así como this.

Gracias, Jake

Answer 1

de abajo es de la clase View OnDraw método() para dibujar el menú radial ..

@Override 
    protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    mRadialMenuPaint.setShadowLayer(mShadowRadius, 0.0f, 0.0f, mShadowColor); 
    //Draw the menu if the menu is to be displayed. 
    if(isMenuVisible) { 
     canvas.drawArc(mMenuRect, mStartAngle, 180, true, mRadialMenuPaint); 
     //See if there is any item in the collection 
     if(mMenuItems.size() > 0) { 
      float mStart = mStartAngle; 
      //Get the sweep angles based on the number of menu items 
      float mSweep = 180/mMenuItems.size(); 
      for(SemiCircularRadialMenuItem item : mMenuItems.values()) { 
       mRadialMenuPaint.setColor(item.getBackgroundColor()); 
       item.setMenuPath(mMenuCenterButtonRect, mMenuRect, mStart, mSweep, mRadius, mViewAnchorPoints); 
       canvas.drawPath(item.getMenuPath(), mRadialMenuPaint); 
       if(isShowMenuText) { 
        mRadialMenuPaint.setShadowLayer(mShadowRadius, 0.0f, 0.0f, Color.TRANSPARENT); 
        mRadialMenuPaint.setColor(item.getTextColor()); 
        canvas.drawTextOnPath(item.getText(), item.getMenuPath(), 5, textSize, mRadialMenuPaint); 
        mRadialMenuPaint.setShadowLayer(mShadowRadius, 0.0f, 0.0f, mShadowColor); 
       } 
       item.getIcon().draw(canvas); 
       mStart += mSweep; 
      } 
      mRadialMenuPaint.setStyle(Style.FILL); 
     } 
    } 
    //Draw the center menu toggle piece 
    mRadialMenuPaint.setColor(centerRadialColor); 
    canvas.drawArc(mMenuCenterButtonRect, mStartAngle, 180, true, mRadialMenuPaint); 
    mRadialMenuPaint.setShadowLayer(mShadowRadius, 0.0f, 0.0f, Color.TRANSPARENT); 
    //Draw the center text 
    drawCenterText(canvas, mRadialMenuPaint); 

} 

y Manejo de los ejes X, Y cordinates sobre Touch Evento tocar Elemento de menú

@Override 
    public boolean onTouchEvent(MotionEvent event) { 
    int x = (int) event.getX(); 
    int y = (int) event.getY(); 

    switch (event.getAction()) { 
    case MotionEvent.ACTION_DOWN: 
     if(mMenuCenterButtonRect.contains(x, y-15)) { 
      centerRadialColor = RadialMenuColors.HOLO_LIGHT_BLUE; 
      isMenuTogglePressed = true; 
      invalidate(); 
     } 
     else if(isMenuVisible) { 
      if(mMenuItems.size() > 0) { 
       for(SemiCircularRadialMenuItem item : mMenuItems.values()) { 
        if(mMenuRect.contains((int) x+20, (int) y)) 
         if(item.getBounds().contains((int) x+20, (int) y)) { 
          System.out.println("get x...> " + x); 
          System.out.println("get y...> " + y); 
          isMenuItemPressed = true; 
          mPressedMenuItemID = item.getMenuID(); 
          break; 
         } 
       } 
       mMenuItems.get(mPressedMenuItemID).setBackgroundColor(mMenuItems.get(mPressedMenuItemID).getMenuSelectedColor()); 
       invalidate(); 
      } 
     } 
     break; 
    case MotionEvent.ACTION_UP: 
     if(isMenuTogglePressed) { 
      centerRadialColor = Color.WHITE; 
      if(isMenuVisible) { 
       isMenuVisible = false; 
       centerMenuText = openMenuText; 
      } else { 
       isMenuVisible = true; 
       centerMenuText = closeMenuText; 
      } 
      isMenuTogglePressed = false; 
      invalidate(); 
     } 

     if(isMenuItemPressed) { 
      if(mMenuItems.get(mPressedMenuItemID).getCallback() != null) { 
       mMenuItems.get(mPressedMenuItemID).getCallback().onMenuItemPressed(); 
      } 
      mMenuItems.get(mPressedMenuItemID) 
       .setBackgroundColor(mMenuItems.get(mPressedMenuItemID).getMenuNormalColor()); 
      isMenuItemPressed = false; 
      invalidate(); 
     } 
     break; 
    } 

    return true; 
} 

Espero que el código sea útil ..

Answer 2

No hay construido en la API para este tipo de menús, sin embargo, hay por lo menos dos maneras de hacer esto

1) Crear un diseño que representa su "menú" y adjuntarlo a el "FrameLayout" en la raíz de su vista de Android. Al ajustar el posicionamiento del elemento justo antes de hacerlo visible, puede moverlo alrededor del pedregal. Este método es un poco "hacky", pero debería funcionar.

2) Cree un componente completamente personalizado, incluidos sus propios métodos de dibujo y eventos onTouch, y adjúntelo a su vista. Este método es bastante más complejo (tendrá que implementar todos los métodos de dibujo), pero también es algo más general.

En cualquier caso, recuerde que tendrá que considerar cómo funciona el menú radial cuando el usuario está utilizando la bola de seguimiento/d-pad.