鸿蒙开源第三方组件—悬浮按钮弹出菜单组件BoomMenu

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

基于安卓平台的悬浮按钮弹出菜单组件BoomMenu(https://github.com/Nightonke/BoomMenu)， 实现了鸿蒙的功能化迁移和重构。代码已经开源到(https://gitee.com/openneusoft/boom-menu)，欢迎各位开发者下载使用并提出宝贵意见!

背景

BoomMenu是一个爆炸式显示类component，可定制显示个数，位置等，可独自显示，也可以添加到component容器中(List等)使用。BoomMenu组件视觉效果突出、样式多样化。

组件效果展示

BoomMenu组件包含一个主菜单页面，点击主菜单不同按钮，就会进入到不同的子菜单页面。其中子菜单中有各种不同样式和不同的弹出以及收回方式效果，如图所示，效果非常炫酷~

图 Fade Views效果展示

图 Button Place Alignment效果展示

图 Custom Position效果展示

图 Draggable效果展示

图 Simple Circle Button效果展示

Sample解析

在创建第一个Demo前需要先配置一些文件，

Step 1. 添加 gradle 在 build file文件中

allprojects { 
    repositories { 
        ... 
        mavenCentral() 
    } 
} 

Step 2. 添加 dependency

dependencies { 
     implementation 'io.openharmony.tpc.thirdlib:boommenu:1.0.0' 
} 

接下来才开始进行代码部分的编写,创建布局。

Step 3.添加BoomMenuButton到xml中：

    ohos:id="$+id:boom" 
    ohos:width="match_content" 
    ohos:height="match_content" 
    ohos:align_parent_bottom="true" 
    ohos:align_parent_right="true" 
    ohos:align_parent_end="true" 
    ohos:margin="20dp" 
    app:boom_inActionBar="false" 
    app:boom_button_color="$color:colorPrimary" 
    app:boom_button_pressed_color="$color:colorPrimary" 
    /> 

Step 4.在onStart()方法中findComponentById，初始化BoomMenuButton：

public void onStart(Intent intent) { 
      super.onStart(intent); 
 
      ComponentContainer cc = initView(); 
      super.setUIContent(cc); 
      LayoutScatter mInflater = LayoutScatter.getInstance(this); 
 
      Component actionBar = mInflater.parse(ResourceTable.Layout_custom_actionbar, null,true); 
 
      BoomMenuButton leftBmb = (BoomMenuButton) actionBar.findComponentById(ResourceTable.Id_action_bar_left_bmb); 
      BoomMenuButton rightBmb = (BoomMenuButton) actionBar.findComponentById(ResourceTable.Id_action_bar_right_bmb); 
 
      leftBmb.setButtonEnum(ButtonEnum.TextOutsideCircle); 
      leftBmb.setPiecePlaceEnum(PiecePlaceEnum.DOT_9_1); 
      leftBmb.setButtonPlaceEnum(ButtonPlaceEnum.SC_9_1); 
      for (int i = 0; i < leftBmb.getPiecePlaceEnum().pieceNumber(); i++) 
          leftBmb.addBuilder(BuilderManager.getTextOutsideCircleButtonBuilderWithDifferentPieceColor()); 
      leftBmb.buildButton(); 
 
      rightBmb.setButtonEnum(ButtonEnum.Ham); 
      rightBmb.setPiecePlaceEnum(PiecePlaceEnum.HAM_4); 
      rightBmb.setButtonPlaceEnum(ButtonPlaceEnum.HAM_4); 
      for (int i = 0; i < rightBmb.getPiecePlaceEnum().pieceNumber(); i++) 
          rightBmb.addBuilder(BuilderManager.getHamButtonBuilderWithDifferentPieceColor()); 
      rightBmb.buildButton(); 
  } 
 
 
blic ComponentContainer initView(){ 
      DirectionalLayout myLayout = new DirectionalLayout(this); 
      myLayout.setWidth(MATCH_PARENT); 
      myLayout.setHeight(MATCH_PARENT); 
      myLayout.setOrientation(Component.VERTICAL); 
 
      ShapeElement element = new ShapeElement(); 
      element.setRgbColor(new RgbColor(255, 255, 255)); 
      myLayout.setBackground(element); 
 
      myLayout.addComponent(getActionBar()); 
      return myLayout; 
 
  } 
 
  private ToolBar getActionBar() { 
      if (toolBar == null) { 
          toolBar = new ToolBar(getContext()); 
          toolBar.setLayoutConfig(new DirectionalLayout.LayoutConfig(MATCH_PARENT, Utils.vpToPx(getContext(), 56))); 
 
 
          ShapeElement element = new ShapeElement(); 
          element.setRgbColor(new RgbColor(63,81,180)); 
          toolBar.setBackground(element); 
          toolBar.setLeftImageElement(new VectorElement(getContext(), ResourceTable.Graphic_ic_gallery_view)); 
          toolBar.setTitleTextColor(Color.WHITE, Color.WHITE); 
          toolBar.setTitle(getString(ResourceTable.String_actionBar)); 
 
 
          toolBar.setMenuVisibility(Component.HIDE); 
          toolBar.setOtherImageElement(new VectorElement(getContext(), ResourceTable.Graphic_ic_ellipsis_vertical_white)); 
          toolBar.setClickedListener(new Component.ClickedListener() { 
              @Override 
              public void onClick(Component component) { 
                  bmb = (BoomMenuButton) findComponentById(ResourceTable.Id_bmb); 
                  assert bmb != null; 
                  bmb.setButtonEnum(ButtonEnum.Ham); 
                  for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) 
                      bmb.addBuilder(BuilderManager.getHamButtonBuilderWithDifferentPieceColor()); 
                  bmb.buildButton(); 
              } 
          }); 
      } 
      return toolBar; 
  } 

最后

最后，我们总结一下整体悬浮按钮弹出菜单组件BoomMenu的实现过程。首先添加 gradle 在 build file文件中，添加BoomMenuButton到xml中，创建页面布局，最后初始化BoomMenuButton。

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com