鸿蒙开源第三方组件—悬浮按钮弹出菜单组件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文件中

  1. allprojects { 
  2.     repositories { 
  3.         ... 
  4.         mavenCentral() 
  5.     } 

Step 2. 添加 dependency

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

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

Step 3.添加BoomMenuButton到xml中:

  1. <com.nightonke.boommenu.BoomMenuButton 
  2.     ohos:id="$+id:boom" 
  3.     ohos:width="match_content" 
  4.     ohos:height="match_content" 
  5.     ohos:align_parent_bottom="true" 
  6.     ohos:align_parent_right="true" 
  7.     ohos:align_parent_end="true" 
  8.     ohos:margin="20dp" 
  9.     app:boom_inActionBar="false" 
  10.     app:boom_button_color="$color:colorPrimary" 
  11.     app:boom_button_pressed_color="$color:colorPrimary" 
  12.     /> 

Step 4.在onStart()方法中findComponentById,初始化BoomMenuButton:

  1. public void onStart(Intent intent) { 
  2.       super.onStart(intent); 
  3.  
  4.       ComponentContainer cc = initView(); 
  5.       super.setUIContent(cc); 
  6.       LayoutScatter mInflater = LayoutScatter.getInstance(this); 
  7.  
  8.       Component actionBar = mInflater.parse(ResourceTable.Layout_custom_actionbar, null,true); 
  9.  
  10.       BoomMenuButton leftBmb = (BoomMenuButton) actionBar.findComponentById(ResourceTable.Id_action_bar_left_bmb); 
  11.       BoomMenuButton rightBmb = (BoomMenuButton) actionBar.findComponentById(ResourceTable.Id_action_bar_right_bmb); 
  12.  
  13.       leftBmb.setButtonEnum(ButtonEnum.TextOutsideCircle); 
  14.       leftBmb.setPiecePlaceEnum(PiecePlaceEnum.DOT_9_1); 
  15.       leftBmb.setButtonPlaceEnum(ButtonPlaceEnum.SC_9_1); 
  16.       for (int i = 0; i < leftBmb.getPiecePlaceEnum().pieceNumber(); i++) 
  17.           leftBmb.addBuilder(BuilderManager.getTextOutsideCircleButtonBuilderWithDifferentPieceColor()); 
  18.       leftBmb.buildButton(); 
  19.  
  20.       rightBmb.setButtonEnum(ButtonEnum.Ham); 
  21.       rightBmb.setPiecePlaceEnum(PiecePlaceEnum.HAM_4); 
  22.       rightBmb.setButtonPlaceEnum(ButtonPlaceEnum.HAM_4); 
  23.       for (int i = 0; i < rightBmb.getPiecePlaceEnum().pieceNumber(); i++) 
  24.           rightBmb.addBuilder(BuilderManager.getHamButtonBuilderWithDifferentPieceColor()); 
  25.       rightBmb.buildButton(); 
  26.   } 
  27.  
  28.  
  29. blic ComponentContainer initView(){ 
  30.       DirectionalLayout myLayout = new DirectionalLayout(this); 
  31.       myLayout.setWidth(MATCH_PARENT); 
  32.       myLayout.setHeight(MATCH_PARENT); 
  33.       myLayout.setOrientation(Component.VERTICAL); 
  34.  
  35.       ShapeElement element = new ShapeElement(); 
  36.       element.setRgbColor(new RgbColor(255, 255, 255)); 
  37.       myLayout.setBackground(element); 
  38.  
  39.       myLayout.addComponent(getActionBar()); 
  40.       return myLayout; 
  41.  
  42.   } 
  43.  
  44.   private ToolBar getActionBar() { 
  45.       if (toolBar == null) { 
  46.           toolBar = new ToolBar(getContext()); 
  47.           toolBar.setLayoutConfig(new DirectionalLayout.LayoutConfig(MATCH_PARENT, Utils.vpToPx(getContext(), 56))); 
  48.  
  49.  
  50.           ShapeElement element = new ShapeElement(); 
  51.           element.setRgbColor(new RgbColor(63,81,180)); 
  52.           toolBar.setBackground(element); 
  53.           toolBar.setLeftImageElement(new VectorElement(getContext(), ResourceTable.Graphic_ic_gallery_view)); 
  54.           toolBar.setTitleTextColor(Color.WHITE, Color.WHITE); 
  55.           toolBar.setTitle(getString(ResourceTable.String_actionBar)); 
  56.  
  57.  
  58.           toolBar.setMenuVisibility(Component.HIDE); 
  59.           toolBar.setOtherImageElement(new VectorElement(getContext(), ResourceTable.Graphic_ic_ellipsis_vertical_white)); 
  60.           toolBar.setClickedListener(new Component.ClickedListener() { 
  61.               @Override 
  62.               public void onClick(Component component) { 
  63.                   bmb = (BoomMenuButton) findComponentById(ResourceTable.Id_bmb); 
  64.                   assert bmb != null; 
  65.                   bmb.setButtonEnum(ButtonEnum.Ham); 
  66.                   for (int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++) 
  67.                       bmb.addBuilder(BuilderManager.getHamButtonBuilderWithDifferentPieceColor()); 
  68.                   bmb.buildButton(); 
  69.               } 
  70.           }); 
  71.       } 
  72.       return toolBar; 
  73.   } 

最后

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

想了解更多内容,请访问:

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

https://harmonyos.51cto.com

相关内容