鴻蒙HarmonyOS三方件開發(fā)指南(2)-LoadingView組件
https://harmonyos.51cto.com/#zz
1. LoadingView組件功能介紹
1.1. 功能介紹：
LoadingView組件是一個可以顯示加載動畫的三方組件，目前支持4種風格顯示。
1.2. 模擬器上運行效果：
2. LoadingView使用方法
2.1. 新建工程，增加組件Har包依賴
在應用模塊中添加HAR，只需要將precentpositionlayout.har和loadingview.har復制到entry\libs目錄下即可(由于build.gradle中已經依賴libs目錄下的*.har，因此不需要再做修改)。
2.2. 修改主頁面的布局文件
修改主頁面的布局文件ability_main.xml，將跟組件容器修改為com.isoftstone.precentpositionlayout.PrecentPositionLayout，然后再增加4個com.isoftstone.loadingview.LoadingView組件，分別位于屏幕的左上，左下，右上，右下，每個組件的長度和寬度都占屏幕的50%。修改后代碼如下：
- <?xml version="1.0" encoding="utf-8"?>
- <com.isoftstone.precentpositionlayout.PrecentPositionLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:orientation="vertical"
- ohos:id = "$+id:layout_main">
- <com.isoftstone.loadingview.LoadingView
- ohos:id="$+id:text_helloworld"
- ohos:height="500"
- ohos:width="500"
- ohos:left_margin="0"
- ohos:top_margin="0"
- />
- <com.isoftstone.loadingview.LoadingView
- ohos:id="$+id:text_helloworld2"
- ohos:height="500"
- ohos:width="500"
- ohos:left_margin="500"
- ohos:top_margin="0"
- />
- <com.isoftstone.loadingview.LoadingView
- ohos:id="$+id:text_helloworld3"
- ohos:height="500"
- ohos:width="500"
- ohos:left_margin="0"
- ohos:top_margin="500"
- />
- <com.isoftstone.loadingview.LoadingView
- ohos:id="$+id:text_helloworld4"
- ohos:height="500"
- ohos:width="500"
- ohos:left_margin="500"
- ohos:top_margin="500"
- />
- </com.isoftstone.precentpositionlayout.PrecentPositionLayout>
2.3. 修改MainAbilitySlince的UI加載代碼
在MainAbilitySlince類的onStart函數(shù)中，增加如下代碼。
- @Override
- public void onStart(Intent intent) {
- super.onStart(intent);
- super.setUIContent(ResourceTable.Layout_ability_main);
- PrecentPositionLayout precentPositionLayout = (PrecentPositionLayout)findComponentById(ResourceTable.Id_layout_main);
- precentPositionLayout.AutoSize();
- LoadingView loadingView1 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld);
- loadingView1.SetType(LoadingView.LoadingViewType.WATER);
- loadingView1.addDrawTask(loadingView1);
- LoadingView loadingView2 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld2);
- loadingView2.SetType(LoadingView.LoadingViewType.BALLOON);
- loadingView2.addDrawTask(loadingView2);
- LoadingView loadingView3 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld3);
- loadingView3.SetType(LoadingView.LoadingViewType.FISH);
- loadingView3.addDrawTask(loadingView3);
- LoadingView loadingView4 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld4);
- loadingView4.SetType(LoadingView.LoadingViewType.CIRCLE);
- loadingView4.addDrawTask(loadingView4);
- }
3. LoadingView開發(fā)實現(xiàn)
3.1. 新建一個Module
新建一個Module，類型選擇HarmonyOS Library，模塊名為loadingview，如圖
3.2. 新建一個LoadingView類
新建一個LoadingView類，繼承自Component類，實現(xiàn)Component.DrawTast接口，并重寫onDraw方法，代碼如下：
- // 繪制類
- private LoadingRander loadingRander;
- @Override
- public void onDraw(Component component, Canvas canvas) {
- // 獲取組件的大小，進行繪制
- DimensFloat pt = getComponentSize();
- Rect rect = new Rect(0,0,pt.getSizeXToInt(),pt.getSizeYToInt());
- loadingRander.draw(canvas, rect);
- }
為了實現(xiàn)動畫，需要定義一個AnimatorValue，并設置動畫偵聽回調函數(shù)，代碼如下：
- // 動畫
- private AnimatorValue animatorValue;
- // 動畫偵聽函數(shù)
- private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener
- = new AnimatorValue.ValueUpdateListener() {
- @Override
- public void onUpdate(AnimatorValue animatorValue, float v) {
- if (loadingRander != null) {
- loadingRander.setProgess(v);
- }
- invalidate();
- }
- };
- private void init() {
- // 啟動動畫
- animatorValue = new AnimatorValue();
- animatorValue.setCurveType(Animator.CurveType.LINEAR);
- animatorValue.setDelay(100);
- animatorValue.setLoopedCount(Animator.INFINITE);
- animatorValue.setDuration(2000);
- animatorValue.setValueUpdateListener(mAnimatorUpdateListener);
- animatorValue.start();
- }
增加一個設置類型的函數(shù)SetType，代碼如下
- public enum LoadingViewType {
- // 支持的類型
- WATER, BALLOON, FISH, CIRCLE;
- }
- // 設置動畫的類型
- public boolean SetType(LoadingViewType type) {
- switch (type) {
- case WATER:
- loadingRander = new LoadingRanderWatter();
- break;
- case BALLOON:
- loadingRander = new LoadingRanderBalloon();
- break;
- case FISH:
- loadingRander = new LoadingRanderFish();
- break;
- case CIRCLE:
- loadingRander = new LoadingRanderCircle();
- break;
- default:
- return false;
- }
- return true;
- }
3.3. 新建一個LoadingRander類
LoadingRander是動畫繪制的基類，它有兩個對外接口，代碼如下。
- public class LoadingRander {
- protected float mProgress;
- protected float mWidth;
- protected float mHeight;
- protected float mTextSize;
- public LoadingRander() {
- }
- // 設置進度
- public void setProgess(float progress) {
- mProgress = progress;
- }
- // 繪制
- protected void draw(Canvas canvas, Rect bounds) {
- return;
- }
- }
3.4. 新建四個LoadingRander的子類
分別完成四種風格動畫的繪制(重寫基類的draw函數(shù))。
3.5. 編譯HAR包
利用Gradle可以將HarmonyOS Library庫模塊構建為HAR包，構建HAR包的方法如下：
在Gradle構建任務中，雙擊PackageDebugHar或PackageReleaseHar任務，構建Debug類型或Release類型的HAR。
待構建任務完成后，可以在loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。
項目源代碼地址：https://github.com/isoftstone-dev/LoadingView_HarmonyOS
©著作權歸作者和HarmonyOS技術社區(qū)共同所有，如需轉載，請注明出處，否則將追究法律責任
https://harmonyos.51cto.com/#zz
