[[415608]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

基于安卓平臺的懸浮按鈕彈出菜單組件BoomMenu(https://github.com/Nightonke/BoomMenu)， 實(shí)現(xiàn)了鴻蒙的功能化遷移和重構(gòu)。代碼已經(jīng)開源到(https://gitee.com/openneusoft/boom-menu)，歡迎各位開發(fā)者下載使用并提出寶貴意見!

背景

BoomMenu是一個爆炸式顯示類component，可定制顯示個數(shù)，位置等，可獨(dú)自顯示，也可以添加到component容器中(List等)使用。BoomMenu組件視覺效果突出、樣式多樣化。

組件效果展示

BoomMenu組件包含一個主菜單頁面，點(diǎn)擊主菜單不同按鈕，就會進(jìn)入到不同的子菜單頁面。其中子菜單中有各種不同樣式和不同的彈出以及收回方式效果，如圖所示，效果非常炫酷~

圖 Fade Views效果展示

圖 Button Place Alignment效果展示

圖 Custom Position效果展示

圖 Draggable效果展示

圖 Simple Circle Button效果展示

Sample解析

在創(chuàng)建第一個Demo前需要先配置一些文件，

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

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

Step 2. 添加 dependency

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

接下來才開始進(jìn)行代碼部分的編寫,創(chuàng)建布局。

Step 3.添加BoomMenuButton到xml中：

<com.nightonke.boommenu.BoomMenuButton 
    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; 
  } 

最后

最后，我們總結(jié)一下整體懸浮按鈕彈出菜單組件BoomMenu的實(shí)現(xiàn)過程。首先添加 gradle 在 build file文件中，添加BoomMenuButton到xml中，創(chuàng)建頁面布局，最后初始化BoomMenuButton。

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com