diff --git a/README.md b/README.md index 6ff2819b347d77fa4d5b85d1d56d3c5e725a779a..e0b93332452b1fdcd28526567a59c45594ede937 100644 --- a/README.md +++ b/README.md @@ -22,27 +22,35 @@ ### 工程目录 ``` -├──entry/src/main/ets // 代码区 +multinavbarlibrary +├──src/main/ets // 代码区 │ ├──common -│ │ └──utils -│ │ ├──BreakpointType.ets // 断点工具类 -│ │ └──WindowUtils.ets // 窗口工具类 -│ ├──entryability -│ │ └──EntryAbility.ets // 程序入口类 +│ │ ├──utils +│ │ │ ├──BreakpointSystem.ets // 断点工具类 +│ │ │ └──WindowUtils.ets // 窗口工具类 +│ │ └──Constants.ets │ ├──model │ │ ├──TabDataModel.ets // 导航目录数据类 │ │ └──VideoDataModel.ets // 内容区数据类 -│ ├──pages -│ │ └──Index.ets // 首页 +│ ├──component +│ │ └──MultiNavBarComponent.ets // 首页 │ ├──view │ │ ├──Home.ets // 主页 │ │ ├──SideBarView.ets // 侧边栏 │ │ ├──TopTabView.ets // 顶部页签 │ │ └──VideoInfoView.ets // 内容区域页 -│ └──viewmodel -│ ├──TabViewModel.ets // 导航目录数据 -│ └──VideoViewModel.ets // 内容区数据 -└──entry/src/main/resources // 应用静态资源目录 +│ ├──viewmodel +│ │ ├──TabViewModel.ets // 导航目录数据 +│ │ └──VideoViewModel.ets // 内容区数据 +│ └──NavBarController.ets +└──src/main/resources // 应用静态资源目录 +multinavbarsample +├──src/main/ets // 代码区 +│ ├──entryability +│ │ └──EntryAbility.ets +│ └──pages +│ └──Index.ets // 入口页面 +└──src/main/resources // 应用资源目录 ``` ### 具体实现 diff --git a/multinavbarlibrary/CHANGELOG.md b/multinavbarlibrary/CHANGELOG.md new file mode 100644 index 0000000000000000000000000000000000000000..10f7f3f76c5898a057d503600cef2c3ae87d79da --- /dev/null +++ b/multinavbarlibrary/CHANGELOG.md @@ -0,0 +1,6 @@ +# 版本记录 +## 1.0.0（2025.07.10） + +--- +### Initial +- 初始版本 diff --git a/multinavbarlibrary/Index.ets b/multinavbarlibrary/Index.ets index 49ca8101bbc5c80d0cf98f1789b2a97311f70419..90f2e8c8dc2f637da81d52d34eb3e3594d1d4874 100644 --- a/multinavbarlibrary/Index.ets +++ b/multinavbarlibrary/Index.ets @@ -1 +1,3 @@ -export { MultiNavBarPage } from './src/main/ets/pages/MultiNavBarPage'; +export { MultiNavBarComponent } from './src/main/ets/component/MultiNavBarComponent'; + +export { NavBarController } from './src/main/ets/NavBarController'; \ No newline at end of file diff --git a/multinavbarlibrary/LICENSE b/multinavbarlibrary/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..338e5b0bc22082e0ffcc7121c2ed3897a3ddccb0 --- /dev/null +++ b/multinavbarlibrary/LICENSE @@ -0,0 +1,78 @@ + Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +Apache License, Version 2.0 +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + +"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. + +"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. + +"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. + +"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. + +"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. + +"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. + +"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). + +"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. + +"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." + +"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. + +2. Grant of Copyright License. + +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. + +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. + +4. Redistribution. + +You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: +1.You must give any other recipients of the Work or Derivative Works a copy of this License; and +2.You must cause any modified files to carry prominent notices stating that You changed the files; and +3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and +4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. + +You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. + +5. Submission of Contributions. + +Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. + +6. Trademarks. + +This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. + +Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. + +In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. + +While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS \ No newline at end of file diff --git a/multinavbarlibrary/README.md b/multinavbarlibrary/README.md new file mode 100644 index 0000000000000000000000000000000000000000..3cdb8da78c14b70febb8d08957cebb6af548b44f --- /dev/null +++ b/multinavbarlibrary/README.md @@ -0,0 +1,42 @@ +## 多设备分级导航栏 + +### 介绍 + +本示例基于自适应布局和响应式布局，实现多设备上的分级导航栏效果。 + +### 下载安装 + +使用ohpm安装依赖 + +``` +ohpm install @ohos_samples/multinavbarlibrary +``` + +或者按需在模块中修改oh-package.json5 + +``` +{ + "dependencies": { + "@ohos_samples/multinavbarlibrary": "^1.0.0" + } +} +``` + +### 使用说明 + +``` +import { MultiNavBarComponent, NavBarController } from '@ohos_samples/multinavbarlibrary'; +``` +按需在文件中使用导出模块即可，其中MultiNavBarComponent是整个sample的入口页面组件。NavBarController封装了沉浸式、设备断点判断、避让区域计算等窗口能力。示例如下： +``` +// Index.ets +import { MultiNavBarComponent } from '@ohos_samples/multinavbarlibrary'; +Stack() { + MultiNavBarComponent() +} + +// EntryAbility.ets +import { NavBarController } from '@ohos_samples/multinavbarlibrary'; +// onWindowStageCreate回调里的loadContent方法里初始化 +NavBarController.initWindowConfig(windowStage); +``` \ No newline at end of file diff --git a/multinavbarlibrary/build-profile.json5 b/multinavbarlibrary/build-profile.json5 index 312d38eb08629793b3484c7373213f22840c8d82..cda3307123ec7c43181580a86ef7e82a18319a34 100644 --- a/multinavbarlibrary/build-profile.json5 +++ b/multinavbarlibrary/build-profile.json5 @@ -8,7 +8,7 @@ "arkOptions": { "obfuscation": { "ruleOptions": { - "enable": true, + "enable": false, "files": [ "./obfuscation-rules.txt" ] diff --git a/multinavbarlibrary/hvigorfile.ts b/multinavbarlibrary/hvigorfile.ts index 42187071482d292588ad40babeda74f7b8d97a23..a4f778bafdc2aadaa71a1913cebb145048996218 100644 --- a/multinavbarlibrary/hvigorfile.ts +++ b/multinavbarlibrary/hvigorfile.ts @@ -3,4 +3,4 @@ import { harTasks } from '@ohos/hvigor-ohos-plugin'; export default { system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */ plugins:[] /* Custom plugin to extend the functionality of Hvigor. */ -} +} \ No newline at end of file diff --git a/multinavbarlibrary/oh-package.json5 b/multinavbarlibrary/oh-package.json5 index fcc72a95d3bf2897431c215cb6e05ab1c8c852df..1caad8eacad9e08a4fbb5ade98a4397c75f31e54 100644 --- a/multinavbarlibrary/oh-package.json5 +++ b/multinavbarlibrary/oh-package.json5 @@ -1,9 +1,10 @@ { - "name": "multinavbarlibrary", + "name": "@ohos_samples/multinavbarlibrary", "version": "1.0.0", - "description": "Please describe the basic information.", + "description": "This sample shows the style of the navigation component in different device forms.", "main": "Index.ets", - "author": "", + "author": "@ohos_samples", "license": "Apache-2.0", + "repository": "https://gitee.com/harmonyos_samples/multi-nav-bar/tree/br_release_hmos/", "dependencies": {} -} +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/ets/NavBarController.ets b/multinavbarlibrary/src/main/ets/NavBarController.ets new file mode 100644 index 0000000000000000000000000000000000000000..0edf723a42e15698f55b3015138ec907cbc4f757 --- /dev/null +++ b/multinavbarlibrary/src/main/ets/NavBarController.ets @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { window } from '@kit.ArkUI'; +import { WindowUtil } from './common/utils/WindowUtils'; + +export class NavBarController { + public static initWindowConfig(windowStage: window.WindowStage): void { + WindowUtil.initialize(windowStage); + } +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/ets/common/Constants.ets b/multinavbarlibrary/src/main/ets/common/Constants.ets new file mode 100644 index 0000000000000000000000000000000000000000..775c7bb38bd72e0df6ceff3465ac533436726a10 --- /dev/null +++ b/multinavbarlibrary/src/main/ets/common/Constants.ets @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2025 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* + * Common constants for all features. + */ +export class Constants { + public static readonly SPACE_2: number = 2; + public static readonly SPACE_8: number = 8; + public static readonly WINDOW_DECOR_HEIGHT: number = 64; + /* + * AppStorage key + */ + public static readonly KEY_PREFIX: string = 'multiNavBar'; + public static readonly KEY_BREAKPOINT: string = Constants.KEY_PREFIX + 'Breakpoint'; + public static readonly KEY_STATUS_BAR_HEIGHT: string = Constants.KEY_PREFIX + 'StatusBarHeight'; + public static readonly KEY_NAV_INDICATOR_HEIGHT: string = Constants.KEY_PREFIX + 'NavIndicatorHeight'; + public static readonly KEY_UI_CONTEXT: string = Constants.KEY_PREFIX + 'UIContext'; +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets b/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets index 07997713e2dce332b26c90e719a31b2e511b026b..3675879e35d75f447ad66b77f4a3a62cfbedbd59 100644 --- a/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets +++ b/multinavbarlibrary/src/main/ets/common/utils/BreakpointSystem.ets @@ -16,6 +16,7 @@ import { window } from '@kit.ArkUI'; import type { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants } from '../Constants'; const TAG: string = '[BreakpointSystem]'; @@ -27,6 +28,13 @@ export enum BreakpointTypeEnum { XL = 'xl', } +export enum BreakpointWidthEnum { + WIDTH_XS = 320, + WIDTH_SM = 600, + WIDTH_MD = 840, + WIDTH_LG = 1440, +} + export interface BreakpointTypes { xs?: T; sm: T; @@ -77,6 +85,7 @@ export class BreakpointSystem { public static getInstance(): BreakpointSystem { if (!BreakpointSystem.instance) { BreakpointSystem.instance = new BreakpointSystem(); + AppStorage.setOrCreate(Constants.KEY_BREAKPOINT, BreakpointTypeEnum.MD); } return BreakpointSystem.instance; } @@ -84,7 +93,7 @@ export class BreakpointSystem { public updateCurrentBreakpoint(breakpoint: BreakpointTypeEnum): void { if (this.currentBreakpoint !== breakpoint) { this.currentBreakpoint = breakpoint; - AppStorage.setOrCreate('currentWidthBreakpoint', this.currentBreakpoint); + AppStorage.setOrCreate(Constants.KEY_BREAKPOINT, this.currentBreakpoint); } } @@ -96,15 +105,15 @@ export class BreakpointSystem { try { const mainWindow: window.WindowProperties = window.getWindowProperties(); const windowWidth: number = mainWindow.windowRect.width; - const windowWidthVp = px2vp(windowWidth); + const windowWidthVp = window.getUIContext().px2vp(windowWidth); let widthBp: BreakpointTypeEnum = BreakpointTypeEnum.MD; - if (windowWidthVp < 320) { + if (windowWidthVp < BreakpointWidthEnum.WIDTH_XS) { widthBp = BreakpointTypeEnum.XS; - } else if (windowWidthVp >= 320 && windowWidthVp < 600) { + } else if (windowWidthVp >= BreakpointWidthEnum.WIDTH_XS && windowWidthVp < BreakpointWidthEnum.WIDTH_SM) { widthBp = BreakpointTypeEnum.SM; - } else if (windowWidthVp >= 600 && windowWidthVp < 840) { + } else if (windowWidthVp >= BreakpointWidthEnum.WIDTH_SM && windowWidthVp < BreakpointWidthEnum.WIDTH_MD) { widthBp = BreakpointTypeEnum.MD; - } else if (windowWidthVp >= 840 && windowWidthVp < 1440) { + } else if (windowWidthVp >= BreakpointWidthEnum.WIDTH_MD && windowWidthVp < BreakpointWidthEnum.WIDTH_LG) { widthBp = BreakpointTypeEnum.LG; } else { widthBp = BreakpointTypeEnum.XL; diff --git a/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets b/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets index dd767c0a15e75c771f89618f64c07c2e63db9923..d3992ea438289c5f42bb0ed6da37d799850a9e5b 100644 --- a/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets +++ b/multinavbarlibrary/src/main/ets/common/utils/WindowUtils.ets @@ -14,63 +14,74 @@ */ import { window } from '@kit.ArkUI'; -import { BusinessError, deviceInfo } from '@kit.BasicServicesKit'; +import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants } from '../Constants'; import { BreakpointSystem } from './BreakpointSystem'; const TAG: string = '[WindowUtil]'; export class WindowUtil { - public static requestFullScreen(windowStage: window.WindowStage): void { - windowStage.getMainWindow((err: BusinessError, data: window.Window) => { - if (err.code) { - return; - } - const windowClass: window.Window = data; - // Realize the immersive effect. - try { - const promise: Promise = windowClass.setWindowLayoutFullScreen(true); - promise.then(() => { - hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.'); - }).catch((err: BusinessError) => { - hilog.info(0x0000, TAG, - `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`); - }); - } catch { - hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. '); - } - }); + private static windowClass: window.Window; + + public static initialize(windowStage: window.WindowStage) { + try { + WindowUtil.windowClass = windowStage.getMainWindowSync(); + const uiContext: UIContext = WindowUtil.windowClass.getUIContext(); + AppStorage.setOrCreate(Constants.KEY_UI_CONTEXT, uiContext); + WindowUtil.registerBreakPoint(WindowUtil.windowClass); + } catch (err) { + const error = err as BusinessError; + hilog.error(0x0000, TAG, `Initialize failed. Cause code: ${error.code}, message: ${error.message}`); + } } - public static registerBreakPoint(windowStage: window.WindowStage) { - windowStage.getMainWindow((err: BusinessError, data: window.Window) => { - if (err.code) { - hilog.error(0x0000, TAG, `Failed to get main window: ${err.message}`); - return; - } + public static requestFullScreen(windowClass: window.Window): void { + // Realize the immersive effect. + try { + const promise: Promise = windowClass.setWindowLayoutFullScreen(true); + promise.then(() => { + hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.'); + }).catch((err: BusinessError) => { + hilog.error(0x0000, TAG, + `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`); + }); + } catch { + hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. '); + } + } + + public static registerBreakPoint(data: window.Window) { + try { BreakpointSystem.getInstance().updateWidthBp(data); + const systemAvoidArea: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); + const navIndicatorAvoidArea: window.AvoidArea = + data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); + WindowUtil.setAvoidArea(data, window.AvoidAreaType.TYPE_SYSTEM, systemAvoidArea); + WindowUtil.setAvoidArea(data, window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR, navIndicatorAvoidArea); data.on('windowSizeChange', () => BreakpointSystem.getInstance().onWindowSizeChange(data)); - if (deviceInfo.deviceType === '2in1') { + if (canIUse('SystemCapability.Window.SessionManager')) { data.setWindowDecorVisible(false); - data.setWindowDecorHeight(64); - } else { - WindowUtil.requestFullScreen(windowStage) - data.on('avoidAreaChange', (avoidAreaOption) => { - if (avoidAreaOption.type === window.AvoidAreaType.TYPE_SYSTEM || - avoidAreaOption.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { - WindowUtil.setAvoidArea(avoidAreaOption.type, avoidAreaOption.area); - } - }); + data.setWindowDecorHeight(Constants.WINDOW_DECOR_HEIGHT); } - }) + WindowUtil.requestFullScreen(data); + data.on('avoidAreaChange', (avoidAreaOption) => { + WindowUtil.setAvoidArea(data, avoidAreaOption.type, avoidAreaOption.area); + }); + } catch (error) { + const err: BusinessError = error as BusinessError; + hilog.error(0x0000, TAG, + `Failed to set the window decor or get the WindowAvoidArea. Cause: ${err.code}, ${err.message}`); + } } // Get status bar height and indicator height. - public static setAvoidArea(type: window.AvoidAreaType, area: window.AvoidArea) { + public static setAvoidArea(data: window.Window, type: window.AvoidAreaType, area: window.AvoidArea) { + const context: UIContext = data.getUIContext(); if (type === window.AvoidAreaType.TYPE_SYSTEM) { - AppStorage.setOrCreate('statusBarHeight', px2vp(area.topRect.height)); - } else { - AppStorage.setOrCreate('naviIndicatorHeight', px2vp(area.bottomRect.height)); + AppStorage.setOrCreate(Constants.KEY_STATUS_BAR_HEIGHT, context.px2vp(area.topRect.height)); + } else if (type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { + AppStorage.setOrCreate(Constants.KEY_NAV_INDICATOR_HEIGHT, context.px2vp(area.bottomRect.height)); } } } \ No newline at end of file diff --git a/multinavbarlibrary/src/main/ets/component/MultiNavBarComponent.ets b/multinavbarlibrary/src/main/ets/component/MultiNavBarComponent.ets new file mode 100644 index 0000000000000000000000000000000000000000..42891f36eb3921ebc7d5bc5dc0cff15e9b9da59f --- /dev/null +++ b/multinavbarlibrary/src/main/ets/component/MultiNavBarComponent.ets @@ -0,0 +1,26 @@ +/* + * Copyright (c) 2025 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Home } from '../view/Home'; + +@Component +export struct MultiNavBarComponent { + build() { + Column() { + Home() + } + .width('100%') + .height('100%') + } +} diff --git a/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets b/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets deleted file mode 100644 index 1ea96f047be73559f773f3a4ce1032ca1350c211..0000000000000000000000000000000000000000 --- a/multinavbarlibrary/src/main/ets/pages/MultiNavBarPage.ets +++ /dev/null @@ -1,13 +0,0 @@ -import { Home } from "../view/Home" - -@Component -export struct MultiNavBarPage { - - build() { - Column() { - Home() - } - .width('100%') - .height('100%') - } -} diff --git a/multinavbarlibrary/src/main/ets/view/Home.ets b/multinavbarlibrary/src/main/ets/view/Home.ets index 3a6de048d6033fb10df5699ed755108991bd6ee3..55be112a1788217c8decf14aef0f0297d2c0f418 100644 --- a/multinavbarlibrary/src/main/ets/view/Home.ets +++ b/multinavbarlibrary/src/main/ets/view/Home.ets @@ -13,6 +13,8 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; +import { BreakpointTypeEnum } from '../common/utils/BreakpointSystem'; import { TabDataModel } from '../model/TabDataModel'; import { TabViewModel } from '../viewmodel/TabViewModel'; import { SideBarView } from './SideBarView'; @@ -21,7 +23,8 @@ import { VideoInfoView } from './VideoInfoView'; @Component export struct Home { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; + @StorageLink(Constants.KEY_BREAKPOINT) currentWidthBreakpoint: string = BreakpointTypeEnum.SM; + @StorageLink(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; @State firstLevelIndex: number = 0; @State secondLevelIndex: number = 0; @State tabViewModel: TabViewModel = new TabViewModel(); @@ -31,22 +34,22 @@ export struct Home { tabBuilder(name: Resource, index: number) { Column() { SymbolGlyph($r('sys.symbol.person_crop_circle_fill_1')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor(index === this.firstLevelIndex ? [$r('sys.color.font_emphasize')] : [$r('sys.color.font_secondary')]) Text(name) - .fontSize(10) - .fontWeight(500) + .fontSize($r('sys.float.Caption_M')) + .fontWeight(FontWeight.Medium) .fontColor(index === this.firstLevelIndex ? $r('sys.color.font_emphasize') : $r('sys.color.font_secondary')) - .margin({ top: 4 }) + .margin({ top: $r('sys.float.padding_level2') }) } - .padding({ bottom: 24 }) - .height(this.currentWidthBreakpoint === 'lg' ? 100 : '100%') + .padding({ bottom: $r('sys.float.padding_level12') }) + .height(this.currentWidthBreakpoint === BreakpointTypeEnum.LG ? $r('app.float.top_tab_button_height') : '100%') .width('100%') .justifyContent(FlexAlign.Center) } build() { - if (this.currentWidthBreakpoint === 'xl') { + if (this.currentWidthBreakpoint === BreakpointTypeEnum.XL) { // Use SideBarContainer at XL breakpoint. SideBarContainer(SideBarContainerType.Embed) { SideBarView({ @@ -58,29 +61,30 @@ export struct Home { Column() { Text(this.tabViewModel.getTabNameOfSecondLevel(this.tabViewModel.getTabNameOfFirstLevel(this.firstLevelIndex), this.secondLevelIndex)) - .fontSize('20fp') - .fontWeight(700) + .fontSize($r('sys.float.Title_S')) + .fontWeight(FontWeight.Bold) + .textAlign(TextAlign.Center) + .height(Constants.WINDOW_DECOR_HEIGHT) .margin({ - left: 32, - top: 71, - bottom: 14 + left: $r('sys.float.padding_level16') }) VideoInfoView({ secondLevelIndex: this.secondLevelIndex }) } + .padding({ top: this.statusBarHeight }) .alignItems(HorizontalAlign.Start) } .autoHide(false) .divider({ strokeWidth: 0.3 }) .showControlButton(false) - .sideBarWidth(240) - .minSideBarWidth(240) - .maxSideBarWidth(240) + .sideBarWidth($r('app.float.side_bar_width')) + .minSideBarWidth($r('app.float.side_bar_width')) + .maxSideBarWidth($r('app.float.side_bar_width')) } else { // Use Tabs and List at other breakpoints. Tabs({ - barPosition: this.currentWidthBreakpoint === 'lg' ? BarPosition.Start : BarPosition.End + barPosition: this.currentWidthBreakpoint === BreakpointTypeEnum.LG ? BarPosition.Start : BarPosition.End }) { TabContent() { TopTabView({ tabData: this.tabData }) @@ -103,11 +107,11 @@ export struct Home { .tabBar(this.tabBuilder($r('app.string.tab_me'), 3)) } .barBackgroundColor($r('sys.color.background_secondary')) - .barWidth(this.currentWidthBreakpoint === 'lg' ? 96 : '100%') - .barHeight(this.currentWidthBreakpoint === 'lg' ? '100%' : 76) - .barMode(this.currentWidthBreakpoint === 'lg' ? BarMode.Scrollable : BarMode.Fixed, + .barWidth(this.currentWidthBreakpoint === BreakpointTypeEnum.LG ? $r('app.float.tab_bar_width') : '100%') + .barHeight(this.currentWidthBreakpoint === BreakpointTypeEnum.LG ? '100%' : $r('app.float.tab_bar_height')) + .barMode(this.currentWidthBreakpoint === BreakpointTypeEnum.LG ? BarMode.Scrollable : BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER }) - .vertical(this.currentWidthBreakpoint === 'lg') + .vertical(this.currentWidthBreakpoint === BreakpointTypeEnum.LG) .barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK) .onChange((index: number) => { this.firstLevelIndex = index; diff --git a/multinavbarlibrary/src/main/ets/view/SideBarView.ets b/multinavbarlibrary/src/main/ets/view/SideBarView.ets index 3ecc1610b705c80259fd97f3ded955af59dbcb4a..46579a2b476ffd5ad5183947fb598d410b489cbb 100644 --- a/multinavbarlibrary/src/main/ets/view/SideBarView.ets +++ b/multinavbarlibrary/src/main/ets/view/SideBarView.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; import { TabDataModel } from '../model/TabDataModel'; @Component @@ -24,56 +25,57 @@ export struct SideBarView { build() { Column() { - Row({ space: 8 }) { + Row({ space: Constants.SPACE_8 }) { Image($r('app.media.startIcon')) - .height(24) - Text($r('app.string.EntryAbility_label')) - .fontSize('16fp') + .height($r('app.float.size_24')) + Text($r('app.string.project_name')) + .fontSize($r('sys.float.Body_L')) .fontWeight(FontWeight.Medium) } - .padding({ left: 8 }) - .height(56) + .padding({ left: $r('sys.float.padding_level4') }) + .height($r('app.float.size_56')) - Column({ space: 2 }) { + Column({ space: Constants.SPACE_2 }) { ForEach(this.tabData.getFirstList(), (item: string, index: number) => { Column() { Row() { - Row({ space: 8 }) { + Row({ space: Constants.SPACE_8 }) { SymbolGlyph($r('sys.symbol.person_crop_circle_fill_1')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor(index === this.firstLevelIndex ? [$r('sys.color.font_emphasize')] : [$r('sys.color.font_secondary')]) Text(item) - .fontSize('16fp') + .fontSize($r('sys.float.Body_L')) .fontWeight(index === this.firstLevelIndex ? FontWeight.Bold : FontWeight.Medium) } if (this.tabData.getSecondList(item).length > 0) { Image((index === this.firstLevelIndex && this.isShow) ? $r('app.media.chevron_up') : $r('app.media.arrow_down')) - .width(20) - .height(20) + .width($r('app.float.size_20')) + .height($r('app.float.size_20')) } } .justifyContent(FlexAlign.SpaceBetween) .width('100%') - .height(40) + .height($r('app.float.size_40')) .padding({ - left: 8 + left: $r('sys.float.padding_level2') }) - Column({ space: 2 }) { + Column({ space: Constants.SPACE_2 }) { ForEach(this.tabData.getSecondList(item), (item: string, index: number) => { Row() { Text(item) - .fontSize('16fp') + .fontSize($r('sys.float.Body_L')) .fontWeight(index === this.secondLevelIndex ? FontWeight.Bold : FontWeight.Medium) - .margin({ left: 40 }) + .margin({ left: $r('app.float.size_40') }) } .width('100%') - .height(40) - .borderRadius(8) - .backgroundColor(index === this.secondLevelIndex ? '#1A0A59F7' : '#00FFFFFF') + .height($r('app.float.size_40')) + .borderRadius($r('sys.float.corner_radius_level4')) + .backgroundColor(index === this.secondLevelIndex ? $r('app.color.tab_bar_color_normal') : + $r('app.color.tab_bar_color_selected')) .onClick(() => { this.secondLevelIndex = index; }) @@ -93,10 +95,10 @@ export struct SideBarView { .alignItems(HorizontalAlign.Start) } .alignItems(HorizontalAlign.Start) - .backgroundColor('#0D000000') + .backgroundColor($r('app.color.side_bar_backgroundColor')) .padding({ - left: 16, - right: 16 + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8') }) .height('100%') .width('100%') diff --git a/multinavbarlibrary/src/main/ets/view/TopTabView.ets b/multinavbarlibrary/src/main/ets/view/TopTabView.ets index c0b9a42c290ced9ef03ce1bd7204a5dff70e9d9e..7d7502d65f842d7249cb94d5541c1cd61410058d 100644 --- a/multinavbarlibrary/src/main/ets/view/TopTabView.ets +++ b/multinavbarlibrary/src/main/ets/view/TopTabView.ets @@ -13,25 +13,27 @@ * limitations under the License. */ -import { BreakpointType } from '../common/utils/BreakpointSystem'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants } from '../common/Constants'; +import { BreakpointType, BreakpointTypeEnum } from '../common/utils/BreakpointSystem'; import { TabDataModel } from '../model/TabDataModel'; import { VideoInfoView } from './VideoInfoView'; -import { hilog } from '@kit.PerformanceAnalysisKit'; -import { BusinessError } from '@kit.BasicServicesKit'; const TAG: string = '[TopTabView]'; @Component export struct TopTabView { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; + @StorageLink(Constants.KEY_BREAKPOINT) currentWidthBreakpoint: string = BreakpointTypeEnum.SM; + @StorageLink(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; @State secondLevelIndex: number = 0; - @State statusBarHeight: number = AppStorage.get('statusBarHeight')!; @Link tabData: TabDataModel; private firstLevel: string = ''; aboutToAppear(): void { try { - this.firstLevel = getContext(this).resourceManager.getStringSync($r('app.string.tab_home').id) + this.firstLevel = + this.getUIContext().getHostContext()!.resourceManager.getStringSync($r('app.string.tab_home').id); } catch (error) { hilog.error(0x0000, TAG, 'Get string by resourceManager failed. Cause: ' + (error as BusinessError).message); } @@ -43,8 +45,8 @@ export struct TopTabView { ForEach(this.tabData.getSecondList(this.firstLevel), (item: string, index: number) => { ListItem() { Button(item) - .width(110) - .height(36) + .width($r('app.float.top_tab_button_width')) + .height($r('app.float.size_36')) .buttonStyle(index === this.secondLevelIndex ? ButtonStyleMode.EMPHASIZED : ButtonStyleMode.NORMAL) .fontSize($r('sys.float.Body_M')) .fontColor(index === this.secondLevelIndex ? $r('sys.color.font_on_primary') : @@ -53,7 +55,12 @@ export struct TopTabView { } .align(Alignment.Center) .padding({ - right: new BreakpointType({sm:8, md:12, lg:18, xl:0}).getValue(this.currentWidthBreakpoint) + right: new BreakpointType({ + sm: $r('sys.float.padding_level4'), + md: $r('sys.float.padding_level6'), + lg: $r('sys.float.padding_level9'), + xl: $r('sys.float.padding_level0') + }).getValue(this.currentWidthBreakpoint) }) .onClick(() => { this.secondLevelIndex = index; @@ -63,11 +70,21 @@ export struct TopTabView { .scrollBar(BarState.Off) .listDirection(Axis.Horizontal) .padding({ - left: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint), - right: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint), + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('app.float.padding_level18'), + xl: $r('sys.float.padding_level12') + }).getValue(this.currentWidthBreakpoint), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('app.float.padding_level18'), + xl: $r('sys.float.padding_level12') + }).getValue(this.currentWidthBreakpoint), top: $r('sys.float.padding_level5') }) - .height(56) + .height($r('app.float.size_56')) .width('100%') VideoInfoView({ secondLevelIndex: this.secondLevelIndex }) diff --git a/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets b/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets index da7f559ce6792e4ca919ee5531d83ee77e8f34bf..0b45338524a87930229f4b01a2a1d471436b6bbb 100644 --- a/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets +++ b/multinavbarlibrary/src/main/ets/view/VideoInfoView.ets @@ -13,12 +13,13 @@ * limitations under the License. */ -import { BreakpointType } from '../common/utils/BreakpointSystem'; +import { Constants } from '../common/Constants'; +import { BreakpointType, BreakpointTypeEnum } from '../common/utils/BreakpointSystem'; import { VideoViewModel } from '../viewmodel/VideoViewModel'; @Component export struct VideoInfoView { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'sm'; + @StorageLink(Constants.KEY_BREAKPOINT) currentWidthBreakpoint: string = BreakpointTypeEnum.SM; @Link secondLevelIndex: number; private videoViewModel = new VideoViewModel(); private iteration: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; @@ -31,22 +32,27 @@ export struct VideoInfoView { Image(this.videoViewModel.getVideo(this.secondLevelIndex)) .objectFit(ImageFit.Fill) .width('100%') - .borderRadius(12) + .borderRadius($r('sys.float.corner_radius_level6')) Row() - .height(16) + .height($r('app.float.size_16')) .width('50%') - .borderRadius(12) + .borderRadius($r('sys.float.corner_radius_level6')) .backgroundColor($r('sys.color.ohos_id_color_click_effect')) .margin({ - top: new BreakpointType({sm:10, md:10, lg:12, xl:11}).getValue(this.currentWidthBreakpoint), - bottom: 6 + top: new BreakpointType({ + sm: $r('sys.float.padding_level5'), + md: $r('sys.float.padding_level5'), + lg: $r('sys.float.padding_level6'), + xl: $r('sys.float.padding_level6') + }).getValue(this.currentWidthBreakpoint), + bottom: $r('sys.float.padding_level3') }) Row() - .height(14) + .height($r('app.float.size_14')) .width('100%') - .borderRadius(12) + .borderRadius($r('sys.float.corner_radius_level6')) .backgroundColor($r('sys.color.ohos_id_color_hover')) } .width('100%') @@ -57,16 +63,46 @@ export struct VideoInfoView { } .layoutWeight(1) .scrollBar(BarState.Off) - .columnsTemplate(new BreakpointType({sm:'1fr 1fr', md:'1fr 1fr 1fr', lg:'1fr 1fr 1fr 1fr', xl:'1fr 1fr 1fr'}) + .columnsTemplate(new BreakpointType({ + sm: '1fr 1fr', + md: '1fr 1fr 1fr', + lg: '1fr 1fr 1fr 1fr', + xl: '1fr 1fr 1fr' + }) .getValue(this.currentWidthBreakpoint)) .width('100%') - .rowsGap(new BreakpointType({sm:12, md:16, lg:16, xl:16}).getValue(this.currentWidthBreakpoint)) - .columnsGap(new BreakpointType({sm:16, md:12, lg:16, xl:16}).getValue(this.currentWidthBreakpoint)) + .rowsGap(new BreakpointType({ + sm: $r('sys.float.padding_level6'), + md: $r('sys.float.padding_level8'), + lg: $r('sys.float.padding_level8'), + xl: $r('sys.float.padding_level8') + }).getValue(this.currentWidthBreakpoint)) + .columnsGap(new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level6'), + lg: $r('sys.float.padding_level8'), + xl: $r('sys.float.padding_level8'), + }).getValue(this.currentWidthBreakpoint)) .padding({ - left: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint), - right: new BreakpointType({sm:16, md:24, lg:36, xl:24}).getValue(this.currentWidthBreakpoint), - top: 12, - bottom: new BreakpointType({sm:6, md:6, lg:20, xl:20}).getValue(this.currentWidthBreakpoint) + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('app.float.padding_level18'), + xl: $r('sys.float.padding_level12') + }).getValue(this.currentWidthBreakpoint), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('app.float.padding_level18'), + xl: $r('sys.float.padding_level12') + }).getValue(this.currentWidthBreakpoint), + top: $r('sys.float.padding_level6'), + bottom: new BreakpointType({ + sm: $r('sys.float.padding_level3'), + md: $r('sys.float.padding_level3'), + lg: $r('sys.float.padding_level10'), + xl: $r('sys.float.padding_level10') + }).getValue(this.currentWidthBreakpoint) }) } } \ No newline at end of file diff --git a/multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets b/multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets index 7c378a8e00079801b4ce0807de58d1fcec14bd2f..712bad26508ffeeed359dd6a112dfff360fcd984 100644 --- a/multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets +++ b/multinavbarlibrary/src/main/ets/viewmodel/TabViewModel.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; import { TabDataModel } from '../model/TabDataModel'; export class TabViewModel { @@ -20,13 +21,14 @@ export class TabViewModel { constructor() { let tabMap: Map = new Map(); - tabMap.set(getContext(this).resourceManager.getStringSync($r('app.string.tab_home').id), + const context: UIContext = AppStorage.get(Constants.KEY_UI_CONTEXT) as UIContext; + tabMap.set(context.getHostContext()!.resourceManager.getStringSync($r('app.string.tab_home').id), [$r('app.string.selected'), $r('app.string.video'), $r('app.string.community'), $r('app.string.news')]); - tabMap.set(getContext(this).resourceManager.getStringSync($r('app.string.tab_moments').id), + tabMap.set(context.getHostContext()!.resourceManager.getStringSync($r('app.string.tab_moments').id), [$r('app.string.selected'), $r('app.string.video'), $r('app.string.community'), $r('app.string.news')]); - tabMap.set(getContext(this).resourceManager.getStringSync($r('app.string.tab_shopping').id), + tabMap.set(context.getHostContext()!.resourceManager.getStringSync($r('app.string.tab_shopping').id), [$r('app.string.selected'), $r('app.string.video'), $r('app.string.community'), $r('app.string.news')]); - tabMap.set(getContext(this).resourceManager.getStringSync($r('app.string.tab_me').id), + tabMap.set(context.getHostContext()!.resourceManager.getStringSync($r('app.string.tab_me').id), [$r('app.string.selected'), $r('app.string.video'), $r('app.string.community'), $r('app.string.news')]); this.tabMap = new TabDataModel(tabMap); } diff --git a/multinavbarlibrary/src/main/module.json5 b/multinavbarlibrary/src/main/module.json5 index ef4e58ee9ce13429872462c21c2b34652eed8b4f..19c971a6cc437816866f5905e8aaf241cc7ccc4a 100644 --- a/multinavbarlibrary/src/main/module.json5 +++ b/multinavbarlibrary/src/main/module.json5 @@ -8,4 +8,4 @@ "2in1" ] } -} +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/resources/base/element/color.json b/multinavbarlibrary/src/main/resources/base/element/color.json index 79b11c2747aec33e710fd3a7b2b3c94dd9965499..ebe9fb70e7c608261a8588bca976c6037ca63925 100644 --- a/multinavbarlibrary/src/main/resources/base/element/color.json +++ b/multinavbarlibrary/src/main/resources/base/element/color.json @@ -1,8 +1,16 @@ { "color": [ { - "name": "start_window_background", - "value": "#000000" + "name": "tab_bar_color_normal", + "value": "#00FFFFFF" + }, + { + "name": "tab_bar_color_selected", + "value": "#1A0A59F7" + }, + { + "name": "side_bar_backgroundColor", + "value": "#0D000000" } ] } \ No newline at end of file diff --git a/multinavbarlibrary/src/main/resources/base/element/float.json b/multinavbarlibrary/src/main/resources/base/element/float.json new file mode 100644 index 0000000000000000000000000000000000000000..523360ee7c4aee92afd6f669b5f34e478764bc58 --- /dev/null +++ b/multinavbarlibrary/src/main/resources/base/element/float.json @@ -0,0 +1,56 @@ +{ + "float": [ + { + "name": "padding_level18", + "value": "36vp" + }, + { + "name": "size_14", + "value": "14vp" + }, + { + "name": "size_16", + "value": "16vp" + }, + { + "name": "size_20", + "value": "20vp" + }, + { + "name": "size_24", + "value": "24vp" + }, + { + "name": "size_36", + "value": "36vp" + }, + { + "name": "size_40", + "value": "40vp" + }, + { + "name": "size_56", + "value": "56vp" + }, + { + "name": "top_tab_button_width", + "value": "110vp" + }, + { + "name": "top_tab_button_height", + "value": "100vp" + }, + { + "name": "side_bar_width", + "value": "240vp" + }, + { + "name": "tab_bar_width", + "value": "96vp" + }, + { + "name": "tab_bar_height", + "value": "76vp" + } + ] +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/resources/base/element/string.json b/multinavbarlibrary/src/main/resources/base/element/string.json index 9b439b3d99121f04f15b975242a0119ed6a47e6b..c8988285bf8029b6fc1c779c862bdd4a75257c30 100644 --- a/multinavbarlibrary/src/main/resources/base/element/string.json +++ b/multinavbarlibrary/src/main/resources/base/element/string.json @@ -1,15 +1,7 @@ { "string": [ { - "name": "module_desc", - "value": "module description" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", + "name": "project_name", "value": "MultiNavBar" }, { diff --git a/multinavbarlibrary/src/main/resources/en_US/element/string.json b/multinavbarlibrary/src/main/resources/en_US/element/string.json index 9b439b3d99121f04f15b975242a0119ed6a47e6b..c8988285bf8029b6fc1c779c862bdd4a75257c30 100644 --- a/multinavbarlibrary/src/main/resources/en_US/element/string.json +++ b/multinavbarlibrary/src/main/resources/en_US/element/string.json @@ -1,15 +1,7 @@ { "string": [ { - "name": "module_desc", - "value": "module description" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", + "name": "project_name", "value": "MultiNavBar" }, { diff --git a/multinavbarlibrary/src/main/resources/zh_CN/element/string.json b/multinavbarlibrary/src/main/resources/zh_CN/element/string.json index e794cd248a129686cef7d8cdc5f102c778856324..35bf3240b13574e97852117aad83879fb17b31f8 100644 --- a/multinavbarlibrary/src/main/resources/zh_CN/element/string.json +++ b/multinavbarlibrary/src/main/resources/zh_CN/element/string.json @@ -1,15 +1,7 @@ { "string": [ { - "name": "module_desc", - "value": "module description" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", + "name": "project_name", "value": "一多分级导航栏" }, { diff --git a/multinavbarsample/oh-package.json5 b/multinavbarsample/oh-package.json5 index 82c234286109faae6ccade670d0096afd5858edd..864b68ad23aa0bfd8a2a54cc0f2b6b567be7e070 100644 --- a/multinavbarsample/oh-package.json5 +++ b/multinavbarsample/oh-package.json5 @@ -6,6 +6,6 @@ "author": "", "license": "", "dependencies": { - "multinavbarlibrary": "file:../multinavbarlibrary" + "@ohos_samples/multinavbarlibrary": "file:../multinavbarlibrary" } } \ No newline at end of file diff --git a/multinavbarsample/src/main/ets/entryability/EntryAbility.ets b/multinavbarsample/src/main/ets/entryability/EntryAbility.ets index c1acff5966e36ee2544bebb1a2de9b81594aa91b..a79a572205c68ca18e95a8e2a5bebbf28a64145c 100644 --- a/multinavbarsample/src/main/ets/entryability/EntryAbility.ets +++ b/multinavbarsample/src/main/ets/entryability/EntryAbility.ets @@ -15,14 +15,13 @@ import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit'; import { window } from '@kit.ArkUI'; -import { BusinessError, deviceInfo } from '@kit.BasicServicesKit'; +import { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { WindowUtil } from 'multinavbarlibrary/src/main/ets/common/utils/WindowUtils'; +import { NavBarController } from '@ohos_samples/multinavbarlibrary'; const TAG: string = '[EntryAbility]'; export default class EntryAbility extends UIAbility { - onCreate(): void { hilog.info(0x0000, TAG, 'Ability onCreate'); this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); @@ -35,8 +34,8 @@ export default class EntryAbility extends UIAbility { hilog.error(0x0000, TAG, `Failed to load the content. Cause: ${err.message}`); return; } + NavBarController.initWindowConfig(windowStage); hilog.info(0x0000, TAG, 'Succeeded in loading the content.'); }); - WindowUtil.registerBreakPoint(windowStage) } } \ No newline at end of file diff --git a/multinavbarsample/src/main/ets/pages/Index.ets b/multinavbarsample/src/main/ets/pages/Index.ets index 1d5e4ed5a6a79183525ff468e2319b449238ed6d..3872fe6e49fa750fe11e70340d295b1bfb6f7637 100644 --- a/multinavbarsample/src/main/ets/pages/Index.ets +++ b/multinavbarsample/src/main/ets/pages/Index.ets @@ -13,14 +13,14 @@ * limitations under the License. */ -import { MultiNavBarPage } from 'multinavbarlibrary'; +import { MultiNavBarComponent } from '@ohos_samples/multinavbarlibrary'; @Entry @Component struct Index { build() { Stack() { - MultiNavBarPage() + MultiNavBarComponent() } } } \ No newline at end of file diff --git a/multinavbarsample/src/main/module.json5 b/multinavbarsample/src/main/module.json5 index eedde12399c677e35ea063fbd6fde5ec560a5101..f96c82a134f469581d1da49a30c10e5e8cc44910 100644 --- a/multinavbarsample/src/main/module.json5 +++ b/multinavbarsample/src/main/module.json5 @@ -9,7 +9,7 @@ "tablet", "2in1" ], - "deliveryWithInstall": true, + "deliveryWithInstall": false, "installationFree": false, "pages": "$profile:main_pages", "abilities": [ diff --git a/multinavbarsample/src/main/resources/base/element/color.json b/multinavbarsample/src/main/resources/base/element/color.json new file mode 100644 index 0000000000000000000000000000000000000000..79b11c2747aec33e710fd3a7b2b3c94dd9965499 --- /dev/null +++ b/multinavbarsample/src/main/resources/base/element/color.json @@ -0,0 +1,8 @@ +{ + "color": [ + { + "name": "start_window_background", + "value": "#000000" + } + ] +} \ No newline at end of file diff --git a/multinavbarsample/src/main/resources/base/element/string.json b/multinavbarsample/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..4d9705aa7e11417c1c5224851a16e33b26730e89 --- /dev/null +++ b/multinavbarsample/src/main/resources/base/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "module description" + }, + { + "name": "EntryAbility_desc", + "value": "description" + }, + { + "name": "EntryAbility_label", + "value": "MultiNavBar" + } + ] +} \ No newline at end of file diff --git a/multinavbarlibrary/src/main/resources/base/media/background.png b/multinavbarsample/src/main/resources/base/media/background.png similarity index 100% rename from multinavbarlibrary/src/main/resources/base/media/background.png rename to multinavbarsample/src/main/resources/base/media/background.png diff --git a/multinavbarlibrary/src/main/resources/base/media/foreground.png b/multinavbarsample/src/main/resources/base/media/foreground.png similarity index 100% rename from multinavbarlibrary/src/main/resources/base/media/foreground.png rename to multinavbarsample/src/main/resources/base/media/foreground.png diff --git a/multinavbarlibrary/src/main/resources/base/media/layered_image.json b/multinavbarsample/src/main/resources/base/media/layered_image.json similarity index 100% rename from multinavbarlibrary/src/main/resources/base/media/layered_image.json rename to multinavbarsample/src/main/resources/base/media/layered_image.json diff --git a/multinavbarsample/src/main/resources/base/media/startIcon.png b/multinavbarsample/src/main/resources/base/media/startIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b Binary files /dev/null and b/multinavbarsample/src/main/resources/base/media/startIcon.png differ diff --git a/multinavbarsample/src/main/resources/en_US/element/string.json b/multinavbarsample/src/main/resources/en_US/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..4d9705aa7e11417c1c5224851a16e33b26730e89 --- /dev/null +++ b/multinavbarsample/src/main/resources/en_US/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "module description" + }, + { + "name": "EntryAbility_desc", + "value": "description" + }, + { + "name": "EntryAbility_label", + "value": "MultiNavBar" + } + ] +} \ No newline at end of file diff --git a/multinavbarsample/src/main/resources/zh_CN/element/string.json b/multinavbarsample/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..c2cef1e0a72c248cbc7ecd09047493d817c566e2 --- /dev/null +++ b/multinavbarsample/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "模块描述" + }, + { + "name": "EntryAbility_desc", + "value": "描述" + }, + { + "name": "EntryAbility_label", + "value": "一多分级导航栏" + } + ] +} \ No newline at end of file