HarmonyOS三方件開發指南(2)——LoadingView組件

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函數）。

文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/2626#bkwz

想了解更多關於鴻蒙的內容，請訪問：

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

https://harmonyos.51cto.com/#bkwz