日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

想了解更多內(nèi)容，請訪問：

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、桃江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為桃江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

1. LoadingView組件功能介紹

1.1. 功能介紹：

LoadingView組件是一個可以顯示加載動畫的三方組件，目前支持4種風格顯示。

1.2. 模擬器上運行效果：

2. LoadingView使用方法

2.1. 新建工程，增加組件Har包依賴

在應(yīng)用模塊中添加HAR，只需要將precentpositionlayout.har和loadingview.har復制到entry\libs目錄下即可(由于build.gradle中已經(jīng)依賴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函數(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è)置動畫偵聽回調(diào)函數(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è)置類型的函數(shù)SetType，代碼如下

 
 
 
 

  
  
  
  
public enum LoadingViewType { 
  
  
  
  
 
  
  
  
  
    // 支持的類型 
  
  
  
  
 
  
  
  
  
    WATER, BALLOON, FISH, CIRCLE; 
  
  
  
  
 
  
  
  
  
} 
  
  
  
  
  
  
  
  
  
// 設(shè)置動畫的類型 
  
  
  
  
 
  
  
  
  
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() { 
  
  
  
  
 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    // 設(shè)置進度 
  
  
  
  
 
  
  
  
  
    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庫模塊構(gòu)建為HAR包，構(gòu)建HAR包的方法如下：

在Gradle構(gòu)建任務(wù)中，雙擊PackageDebugHar或PackageReleaseHar任務(wù)，構(gòu)建Debug類型或Release類型的HAR。

待構(gòu)建任務(wù)完成后，可以在loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。

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

?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責任

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

本文標題：鴻蒙HarmonyOS三方件開發(fā)指南(2)-LoadingView組件
鏈接地址：http://www.dlmjj.cn/article/dhpgojc.html