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 函数中，增加如下代码
@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 开发实现
3.1. 新建一个 Module
新建一个 Module，类型选择 HarmonyOS Library，模块名为 loadingview，如图
3.2. 新建一个 LoadingView 类
新建一个 LoadingView 类，继承自 Component 类，实现 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);
}
为了实现动画，需要定义一个 AnimatorValue，并设置动画侦听回调函数，代码如下：
// 动画
private AnimatorValue animatorValue;
// 动画侦听函数
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();
}
增加一个设置类型的函数 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 函数）。
3.5. 编译 HAR 包
利用 Gradle 可以将 HarmonyOS Library 库模块构建为 HAR 包，构建 HAR 包的方法如下：
在 Gradle 构建任务中，双击 PackageDebugHar 或 PackageReleaseHar 任务，构建 Debug 类型
或 Release 类型的 HAR。
待构建任务完成后，可以在工程目录中的 loadingview> bulid > outputs > har 目录中，获取生
成的 HAR 包
写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：
https://gitee.com/MNxiaona/733GH/blob/master/jianshu
网友评论