返回发烧友论坛
发 帖  

[文章]【软通动力】HarmonyOS三方件开发指南(2)——LoadingView组件

软通动力HOS
2021-03-18 14:12:34
阅读量0
HarmonyOS
0
1
`1.      LoadingView组件功能介绍
1.1.     功能介绍：
LoadingView组件是一个可以显示加载动画的三方组件，目前支持4种风格显示。
1.2.     模拟器上运行效果：

2.      LoadingView使用方法
2.1.     新建工程，增加组件Har包依赖
在应用模块中添加HAR，只需要将precentpositionlayout.har和loadingview.har复制到entrylibs目录下即可（由于build.gradle中已经依赖libs目录下的*.har，因此不需要再做修改）。

2.2.     修改主页面的布局文件
修改主页面的布局文件ability_main.xml，将跟组件容器修改为com.isoftstone.precentpositionlayout.PrecentPositionLayout，然后再增加4个com.isoftstone.loadingview.LoadingView组件，分别位于屏幕的左上，左下，右上，右下，每个组件的长度和宽度都占屏幕的50%。修改后代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>

  3. <com.isoftstone.precentpositionlayout.PrecentPositionLayout

  5.     xmlns:ohos="http://schemas.huawei.com/res/ohos"

  7.     ohos:height="match_parent"

  9.     ohos:width="match_parent"

  11.     ohos:orientation="vertical"

  13.     ohos:id = "$+id:layout_main">



  17.     <com.isoftstone.loadingview.LoadingView

  19.         ohos:id="$+id:text_helloworld"

  21.         ohos:height="500"

  23.         ohos:width="500"

  25.         ohos:left_margin="0"

  27.         ohos:top_margin="0"

  29.     />



  33.     <com.isoftstone.loadingview.LoadingView

  35.         ohos:id="$+id:text_helloworld2"

  37.         ohos:height="500"

  39.         ohos:width="500"

  41.         ohos:left_margin="500"

  43.         ohos:top_margin="0"

  45.         />



  49.     <com.isoftstone.loadingview.LoadingView

  51.         ohos:id="$+id:text_helloworld3"

  53.         ohos:height="500"

  55.         ohos:width="500"

  57.         ohos:left_margin="0"

  59.         ohos:top_margin="500"

  61.         />



  65.     <com.isoftstone.loadingview.LoadingView

  67.         ohos:id="$+id:text_helloworld4"

  69.         ohos:height="500"

  71.         ohos:width="500"

  73.         ohos:left_margin="500"

  75.         ohos:top_margin="500"

  77.         />



  81. </com.isoftstone.precentpositionlayout.PrecentPositionLayout>

  83. 2.3.     修改MainAbilitySlince的UI加载代码
  84. 在MainAbilitySlince类的onStart函数中，增加如下代码。
  85. @Override

  87. public void onStart(Intent intent) {

  89.     super.onStart(intent);

  91.     super.setUIContent(ResourceTable.Layout_ability_main);



  95.     PrecentPositionLayout precentPositionLayout = (PrecentPositionLayout)findComponentById(ResourceTable.Id_layout_main);

  97.     precentPositionLayout.AutoSize();



  101.     LoadingView loadingView1 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld);

  103.     loadingView1.SetType(LoadingView.LoadingViewType.WATER);

  105.     loadingView1.addDrawTask(loadingView1);



  109.     LoadingView loadingView2 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld2);

  111.     loadingView2.SetType(LoadingView.LoadingViewType.BALLOON);

  113.     loadingView2.addDrawTask(loadingView2);



  117.     LoadingView loadingView3 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld3);

  119.     loadingView3.SetType(LoadingView.LoadingViewType.FISH);

  121.     loadingView3.addDrawTask(loadingView3);



  125.     LoadingView loadingView4 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld4);

  127.     loadingView4.SetType(LoadingView.LoadingViewType.CIRCLE);

  129.     loadingView4.addDrawTask(loadingView4);



  133. }
复制代码
3.      LoadingView开发实现
3.1.     新建一个Module
新建一个Module，类型选择HarmonyOS Library，模块名为loadingview，如图
2.png
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包。
3.png
项目源代码地址：https://github.com/isoftstone-dev/LoadingView_HarmonyOS

更多原创，请关注"软通动力HarmonyOS学院：https://harmonyos.51cto.com/column/30

©著作权归作者和HarmonyOS威廉希尔官方网站 社区共同所有，如需转载，请注明出处，否则将追究法律责任

`
1.png
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友