[[415608]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com

序文

AndroidプラットフォームをベースとしたフローティングボタンポップアップメニューコンポーネントであるBoomMenu（https://github.com/Nightonke/BoomMenu）は、HarmonyOS向けの機能移行とリファクタリングを実装しています。コードはオープンソース（https://gitee.com/openneusoft/boom-menu）で公開されており、開発者の皆様はぜひダウンロードしてご利用いただき、貴重なフィードバックをお寄せください。

背景

BoomMenuは、表示される要素の数と位置をカスタマイズできる、爆発的な効果を生み出すディスプレイコンポーネントです。単独で表示することも、コンポーネントコンテナ（リストなど）に追加することもできます。BoomMenuコンポーネントは、印象的な視覚効果と多様なスタイルを誇ります。

コンポーネント効果表示

BoomMenuコンポーネントにはメインメニューページが含まれています。メインメニュー上の様々なボタンをクリックすると、異なるサブメニューページに移動します。これらのサブメニューは、画像に示すように、様々なスタイルとポップアップおよび折りたたみ効果を備えており、非常にクールな効果を生み出しています。

画像フェードビュー効果のデモンストレーション

画像: ボタン配置の配置効果のデモ

画像: カスタム位置効果のデモンストレーション

画像ドラッグ効果のデモンストレーション

画像: シンプルな円形ボタン効果のデモンストレーション

サンプル分析

最初のデモを作成する前に、いくつかのファイルを設定する必要があります。

ステップ 1.ビルド ファイルに Gradle を追加します。

すべてのプロジェクト {
リポジトリ {
 ...
 mavenCentral()
 }
 }

ステップ2.依存関係を追加する

依存関係 {
実装'io.openharmony.tpc.thirdlib:boommenu:1.0.0'  
 }

それから、コードの記述とレイアウトの作成を始めました。

ステップ 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"  
 />

ステップ 4. onStart() メソッドで、findComponentById を使用して BoomMenuButton を初期化します。

パブリックvoid onStart(インテント インテント) {
 super.onStart(インテント); 
 
コンポーネントコンテナ cc = initView();
 super.setUIContent(cc);
 LayoutScatter mInflater = LayoutScatter.getInstance(this); 
 
コンポーネント actionBar = mInflater.parse(ResourceTable.Layout_custom_actionbar, null , true ); 
 
ブームメニューボタンの leftBmb = (ブームメニューボタン) actionBar.findComponentById(ResourceTable.Id_action_bar_left_bmb);
ブームメニューボタン rightBmb = (ブームメニューボタン) actionBar.findComponentById(ResourceTable.Id_action_bar_right_bmb); 
 
 leftBmb.setButtonEnum(ButtonEnum.TextOutsideCircle);
 leftBmb.setPiecePlaceEnum(PiecePlaceEnum.DOT_9_1);
左Bmb.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 = 新しい DirectionalLayout(this);
 myLayout.setWidth(MATCH_PARENT);
 myLayout.setHeight(MATCH_PARENT);
 myLayout.setOrientation(Component.VERTICAL); 
 
 ShapeElement 要素 = 新しい ShapeElement();
要素.setRgbColor(新しいRgbColor(255, 255, 255));
 myLayout.setBackground(要素); 
 
 myLayout.addComponent(アクションバーの取得());
 myLayoutを返します。 
 
 } 
 
プライベートツールバー getActionBar() {
ツールバーがnullの場合
ツールバー = 新しいツールバー(getContext());
 toolBar.setLayoutConfig(新しい DirectionalLayout.LayoutConfig(MATCH_PARENT、Utils.vpToPx(getContext()、56))); 
 
 
 ShapeElement 要素 = 新しい ShapeElement();
要素.setRgbColor(新しいRgbColor(63,81,180));
 toolBar.setBackground(要素);
 toolBar.setLeftImageElement(新しい VectorElement(getContext(), ResourceTable.Graphic_ic_gallery_view));
 toolBar.setTitleTextColor(Color.WHITE, Color.WHITE);
ツールバーのタイトルを設定します(ResourceTable.String_actionBar の文字列を取得します)。 
 
 
 toolBar.setMenuVisibility(Component.HIDE);
 toolBar.setOtherImageElement(新しい VectorElement(getContext(), ResourceTable.Graphic_ic_ellipsis_vertical_white));
 toolBar.setClickedListener(新しいComponent.ClickedListener() {
 @オーバーライド
パブリックvoid onClick(コンポーネント コンポーネント) {
 bmb = (BoomMenuButton) リソーステーブルId_bmbからコンポーネントIDを検索します。
 bmb != nullをアサートします。
 bmb.setButtonEnum(ButtonEnum.Ham);
 ( int i = 0; i < bmb.getPiecePlaceEnum().pieceNumber(); i++)の場合
bmb.addBuilder(BuilderManager.getHamButtonBuilderWithDifferentPieceColor());
 bmb.buildButton();
 }
 });
 }
ツールバーを返します。
 }

やっと

最後に、BoomMenuフローティングボタンポップアップメニューコンポーネントの実装プロセスをまとめます。まず、GradleビルドファイルのXMLにBoomMenuButtonを追加し、ページレイアウトを作成し、最後にBoomMenuButtonを初期化します。

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHarmonyOSテクノロジーコミュニティ。

https://harmonyos..com