鸿蒙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%。修改后代码如下：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
  
  
  
  
 
  
  
  
  
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  
  
  
  
 
  
  
  
  
    ohos:height="match_parent" 
  
  
  
  
 
  
  
  
  
    ohos:width="match_parent" 
  
  
  
  
 
  
  
  
  
    ohos:orientation="vertical" 
  
  
  
  
 
  
  
  
  
    ohos:id = "$+id:layout_main"> 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
      
  
  
  
 
  
  
  
  
        ohos:id="$+id:text_helloworld" 
  
  
  
  
 
  
  
  
  
        ohos:height="500" 
  
  
  
  
 
  
  
  
  
        ohos:width="500" 
  
  
  
  
 
  
  
  
  
        ohos:left_margin="0" 
  
  
  
  
 
  
  
  
  
        ohos:top_margin="0" 
  
  
  
  
 
  
  
  
  
    /> 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
      
  
  
  
 
  
  
  
  
        ohos:id="$+id:text_helloworld2" 
  
  
  
  
 
  
  
  
  
        ohos:height="500" 
  
  
  
  
 
  
  
  
  
        ohos:width="500" 
  
  
  
  
 
  
  
  
  
        ohos:left_margin="500" 
  
  
  
  
 
  
  
  
  
        ohos:top_margin="0" 
  
  
  
  
 
  
  
  
  
        /> 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
      
  
  
  
 
  
  
  
  
        ohos:id="$+id:text_helloworld3" 
  
  
  
  
 
  
  
  
  
        ohos:height="500" 
  
  
  
  
 
  
  
  
  
        ohos:width="500" 
  
  
  
  
 
  
  
  
  
        ohos:left_margin="0" 
  
  
  
  
 
  
  
  
  
        ohos:top_margin="500" 
  
  
  
  
 
  
  
  
  
        /> 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
      
  
  
  
 
  
  
  
  
        ohos:id="$+id:text_helloworld4" 
  
  
  
  
 
  
  
  
  
        ohos:height="500" 
  
  
  
  
 
  
  
  
  
        ohos:width="500" 
  
  
  
  
 
  
  
  
  
        ohos:left_margin="500" 
  
  
  
  
 
  
  
  
  
        ohos:top_margin="500" 
  
  
  
  
 
  
  
  
  
        /> 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

 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包。

项目源代码地址：https://github.com/isoftstone-dev/LoadingView_HarmonyOS

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

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

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

https://harmonyos./#zz

网站名称：鸿蒙HarmonyOS三方件开发指南(2)-LoadingView组件
当前地址：http://www.shufengxianlan.com/qtweb/news3/511753.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联