Trình đơn Radial/Pie của Android

Question

Tôi đang tìm cách tạo một menu xuyên tâm trong trò chơi mà tôi đang viết. Có một lớp hoặc API được bao gồm để hỗ trợ cho giải pháp này hay một giải pháp nguồn mở không?

Giống như this.

Cảm ơn bạn, Jake

Answer 1

Dưới đây có lớp View OnDraw() phương pháp để Vẽ Radial menu ..

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

} 

và cũng Manage X, Y Cordinates về tổ chức sự kiện Touch để chạm vào mục menu

@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; 
} 

Hy vọng mã trên hữu ích ..

Answer 2

Không xây dựng trong API cho các menu như vậy, tuy nhiên, có ít nhất hai cách để làm điều này

1) Xây dựng một bố trí đại diện cho "thực đơn" của mình và gắn nó vào "FrameLayout" ở gốc của chế độ xem Android của bạn. Bằng cách điều chỉnh vị trí của phần tử ngay trước khi bạn làm cho nó hiển thị, bạn có thể di chuyển nó quanh scree. Phương pháp này là một chút "hacky", nhưng nó sẽ làm việc.

2) Tạo thành phần hoàn toàn tùy chỉnh, bao gồm phương pháp vẽ của riêng bạn và sự kiện onTouch và đính kèm nó vào chế độ xem của bạn. Phương pháp này khá phức tạp hơn một chút (bạn sẽ cần phải thực hiện tất cả các phương thức vẽ), nhưng cũng có phần tổng quát hơn.

Trong cả hai trường hợp, hãy nhớ rằng bạn sẽ cần phải xem xét cách thức trình đơn xuyên tâm hoạt động khi người dùng đang sử dụng bi xoay/d-pad.