135-1821-9792

鸿蒙HarmonyOS三方件开发指南(2)-LoadingView组件

想了解更多内容，请访问：

创新互联专注于企业网络营销推广、网站重做改版、桃江网站定制设计、自适应品牌网站建设、H5技术、成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为桃江等各大城市提供网站开发制作服务。

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#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%。修改后代码如下： 

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
  
  
  
  4.  
    5.   
  
  
  
  5.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     ohos:height="match_parent" 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     ohos:width="match_parent" 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     ohos:orientation="vertical" 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     ohos:id = "$+id:layout_main"> 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.       
  
  
  
  18.  
    19.   
  
  
  
  19.         ohos:id="$+id:text_helloworld" 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.         ohos:height="500" 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.         ohos:width="500" 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.         ohos:left_margin="0" 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.         ohos:top_margin="0" 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.     /> 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.   
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.       
  
  
  
  34.  
    35.   
  
  
  
  35.         ohos:id="$+id:text_helloworld2" 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.         ohos:height="500" 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.         ohos:width="500" 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.         ohos:left_margin="500" 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.         ohos:top_margin="0" 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.         /> 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47.   
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49.       
  
  
  
  50.  
    51.   
  
  
  
  51.         ohos:id="$+id:text_helloworld3" 
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53.         ohos:height="500" 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55.         ohos:width="500" 
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57.         ohos:left_margin="0" 
    58.   
  
  
  
  58.  
    59.   
  
  
  
  59.         ohos:top_margin="500" 
    60.   
  
  
  
  60.  
    61.   
  
  
  
  61.         /> 
    62.   
  
  
  
  62.  
    63.   
  
  
  
  63.   
    64.   
  
  
  
  64.  
    65.   
  
  
  
  65.       
  
  
  
  66.  
    67.   
  
  
  
  67.         ohos:id="$+id:text_helloworld4" 
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69.         ohos:height="500" 
    70.   
  
  
  
  70.  
    71.   
  
  
  
  71.         ohos:width="500" 
    72.   
  
  
  
  72.  
    73.   
  
  
  
  73.         ohos:left_margin="500" 
    74.   
  
  
  
  74.  
    75.   
  
  
  
  75.         ohos:top_margin="500" 
    76.   
  
  
  
  76.  
    77.   
  
  
  
  77.         /> 
    78.   
  
  
  
  78.  
    79.   
  
  
  
  79.   
    80.   
  
  
  
  80.  
    81.   
  
  
  
  81.  
    82.

 2.3. 修改MainAbilitySlince的UI加载代码

在MainAbilitySlince类的onStart函数中，增加如下代码。

 
 
 
 
    
  
  
  
  
  1. @Override 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. public void onStart(Intent intent) { 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.     super.onStart(intent); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     super.setUIContent(ResourceTable.Layout_ability_main); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.   
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     PrecentPositionLayout precentPositionLayout = (PrecentPositionLayout)findComponentById(ResourceTable.Id_layout_main); 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     precentPositionLayout.AutoSize(); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.     LoadingView loadingView1 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld); 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     loadingView1.SetType(LoadingView.LoadingViewType.WATER); 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.     loadingView1.addDrawTask(loadingView1); 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.   
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.     LoadingView loadingView2 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld2); 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.     loadingView2.SetType(LoadingView.LoadingViewType.BALLOON); 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.     loadingView2.addDrawTask(loadingView2); 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.   
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.     LoadingView loadingView3 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld3); 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.     loadingView3.SetType(LoadingView.LoadingViewType.FISH); 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.     loadingView3.addDrawTask(loadingView3); 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.   
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.     LoadingView loadingView4 = (LoadingView)findComponentById(ResourceTable.Id_text_helloworld4); 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.     loadingView4.SetType(LoadingView.LoadingViewType.CIRCLE); 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.     loadingView4.addDrawTask(loadingView4); 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47.   
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49. } 
    50.

 3. LoadingView开发实现

3.1. 新建一个Module

新建一个Module，类型选择HarmonyOS Library，模块名为loadingview，如图

3.2. 新建一个LoadingView类

新建一个LoadingView类，继承自Component类，实现Component.DrawTast接口，并重写onDraw方法，代码如下：

 
 
 
 
    
  
  
  
  
  1. // 绘制类 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. private LoadingRander loadingRander; 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5. @Override 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. public void onDraw(Component component, Canvas canvas) { 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     // 获取组件的大小，进行绘制 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     DimensFloat pt = getComponentSize(); 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     Rect rect = new Rect(0,0,pt.getSizeXToInt(),pt.getSizeYToInt()); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.     loadingRander.draw(canvas, rect); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. } 
    18.

 为了实现动画，需要定义一个AnimatorValue，并设置动画侦听回调函数，代码如下：

 
 
 
 
    
  
  
  
  
  1. // 动画 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. private AnimatorValue animatorValue; 
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. // 动画侦听函数 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.         = new AnimatorValue.ValueUpdateListener() { 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.     @Override 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     public void onUpdate(AnimatorValue animatorValue, float v) { 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.         if (loadingRander != null) { 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.             loadingRander.setProgess(v); 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.         } 
    21.   
  
  
  
  21.  
    22.   
  
  
  
  22.         invalidate(); 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24.     } 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. }; 
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28.   
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30. private void init()  { 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32.     // 启动动画 
    33.   
  
  
  
  33.     animatorValue = new AnimatorValue(); 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.     animatorValue.setCurveType(Animator.CurveType.LINEAR); 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.     animatorValue.setDelay(100); 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.     animatorValue.setLoopedCount(Animator.INFINITE); 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.     animatorValue.setDuration(2000); 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.     animatorValue.setValueUpdateListener(mAnimatorUpdateListener); 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.     animatorValue.start(); 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47. } 
    48.   
  
  
  
  48.   
    49.

 增加一个设置类型的函数SetType，代码如下

 
 
 
 
    
  
  
  
  
  1. public enum LoadingViewType { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.     // 支持的类型 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.     WATER, BALLOON, FISH, CIRCLE; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.   
    9.   
  
  
  
  9. // 设置动画的类型 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. public boolean SetType(LoadingViewType type) { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     switch (type) { 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.         case WATER: 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.             loadingRander  = new LoadingRanderWatter(); 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.             break; 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.         case BALLOON: 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.             loadingRander  = new LoadingRanderBalloon(); 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.             break; 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.         case FISH: 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.             loadingRander  = new LoadingRanderFish(); 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.             break; 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.         case CIRCLE: 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.             loadingRander  = new LoadingRanderCircle(); 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37.             break; 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.         default: 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41.             return false; 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43.     } 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.     return true; 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47. } 
    48.

 3.3. 新建一个LoadingRander类

LoadingRander是动画绘制的基类，它有两个对外接口，代码如下。

 
 
 
 
    
  
  
  
  
  1. public class LoadingRander { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.     protected float mProgress; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.     protected float mWidth; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     protected float mHeight; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.     protected float mTextSize; 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     public LoadingRander() { 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.     // 设置进度 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.     public void setProgess(float progress) { 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.         mProgress = progress; 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23.     } 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.     // 绘制 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.     protected void draw(Canvas canvas, Rect bounds) { 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.         return; 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31.     } 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33. } 
    34.   
  
  
  
  34.   
    35.

 3.4. 新建四个LoadingRander的子类

分别完成四种风格动画的绘制(重写基类的draw函数)。

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技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz


网站标题：鸿蒙HarmonyOS三方件开发指南(2)-LoadingView组件
分享链接：http://wtcwzsj.com/article/dhpgojc.html

其他资讯


关于我们
我们的服务
网站建设案例
新闻动态
联系我们

135-1821-9792

公司服务热线
友情链接： seo关键词优化   帛金家居   成都LED亮化工程   成都茶叶销售   电信内江机房   重庆服务器托管   成都全网营销推广   泸县网站建设   葆金莱自动门   百度推广公司   

Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号