文章目錄

• 一、布局中設置 ProgressBar、RoundProgressBar 進度條
• 二、代碼中設置 ProgressBar、RoundProgressBar 進度條
• 三、完整代碼示例
• 四、GitHub 地址

一、布局中設置 ProgressBar、RoundProgressBar 進度條

---

ProgressBar 進度條組件分為兩種 , ① 圓形進度條 RoundProgressBar , ② 直線型進度條 ProgressBar ;

布局設置代碼 :

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><!-- 直線進度條 --><ProgressBarohos:id="$+id:progressbar"ohos:height="match_content"ohos:width="match_parent"ohos:top_margin="200"ohos:layout_alignment="horizontal_center"ohos:min="0"ohos:max="100"ohos:progress="66"ohos:vice_progress="88"/><!-- 圓形進度條 --><RoundProgressBarohos:id="$+id:roundprogressbar"ohos:height="400"ohos:width="400"ohos:top_margin="200"ohos:layout_alignment="horizontal_center"ohos:min="0"ohos:max="100"ohos:progress="66"/></DirectionalLayout>

進度條屬性簡介 :

最小值 : ohos:min=“0”

最大值 : ohos:max=“100”

當前進度 : ohos:progress=“66”

頂部邊距 : ohos:top_margin=“200”

布局對齊 : ohos:layout_alignment=“horizontal_center”

寬度 : ohos:width=“400”

高度 : ohos:height=“400”

純布局效果 :

二、代碼中設置 ProgressBar、RoundProgressBar 進度條

---

獲取直線進度條 ProgressBar 組件 , 并設置最大值 , 最小值 , 當前第一進度 , 當前第二進度 ;

// 獲取 XML 布局中的 ProgressBar 按鈕ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);// 設置最大值最小值progressBar.setMaxValue(100);progressBar.setMinValue(0);// 設置當前進度progressBar.setProgressValue(20);// 設置第二進度值progressBar.setViceProgress(80);

獲取圓形進度條 RoundProgressBar 組件 , 并設置最大值 , 最小值 , 當前第一進度 , 當前第二進度 ;

// 獲取 XML 布局中的 RoundProgressBar 按鈕RoundProgressBar roundProgressBar = (RoundProgressBar) findComponentById(ResourceTable.Id_roundprogressbar);// 設置最大值最小值roundProgressBar.setMaxValue(20);roundProgressBar.setMinValue(0);// 設置當前進度roundProgressBar.setProgressValue(10);// 設置第二進度roundProgressBar.setViceProgress(15);

三、完整代碼示例

---

布局文件 :

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><!-- 直線進度條 --><ProgressBarohos:id="$+id:progressbar"ohos:height="match_content"ohos:width="match_parent"ohos:top_margin="200"ohos:layout_alignment="horizontal_center"ohos:min="0"ohos:max="100"ohos:progress="66"ohos:vice_progress="88"/><!-- 圓形進度條 --><RoundProgressBarohos:id="$+id:roundprogressbar"ohos:height="400"ohos:width="400"ohos:top_margin="200"ohos:layout_alignment="horizontal_center"ohos:min="0"ohos:max="100"ohos:progress="66"/></DirectionalLayout>

Java 代碼 :

package com.example.progressbar.slice;import com.example.progressbar.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.ProgressBar; import ohos.agp.components.RoundProgressBar;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 獲取 XML 布局中的 ProgressBar 按鈕ProgressBar progressBar = (ProgressBar) findComponentById(ResourceTable.Id_progressbar);// 設置最大值最小值progressBar.setMaxValue(100);progressBar.setMinValue(0);// 設置當前進度progressBar.setProgressValue(20);// 設置第二進度值progressBar.setViceProgress(80);// 獲取 XML 布局中的 RoundProgressBar 按鈕RoundProgressBar roundProgressBar = (RoundProgressBar) findComponentById(ResourceTable.Id_roundprogressbar);// 設置最大值最小值roundProgressBar.setMaxValue(20);roundProgressBar.setMinValue(0);// 設置當前進度roundProgressBar.setProgressValue(10);// 設置第二進度roundProgressBar.setViceProgress(15);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);} }

四、GitHub 地址

---

GitHub 主應用 : https://github.com/han1202012/HarmonyHelloWorld

CheckBox 組件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/progressbar

總結

以上是生活随笔為你收集整理的【鸿蒙 HarmonyOS】UI 组件 ( 进度条 ProgressBar 和 RoundProgressBar 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。