【Harmony OS】【JAVA UI】webView 動畫載入資源載入動畫交互

来源:https://www.cnblogs.com/developer-huawei/archive/2022/03/30/16066626.html
-Advertisement-
Play Games

在HarmonyOS中webview載入網頁的時候,需要有進度條,或者載入動畫進行用戶感知的交互,這樣可以優化用戶體驗,因此今天寫一篇載入動畫(效果如下)用於同學們進行學習,怎麼實現?首先我們需要學習“CommonDialog”“ WebView”“動畫開髮指導”三個知識儲備 我們分為“準備階段”, ...


在HarmonyOS中webview載入網頁的時候,需要有進度條,或者載入動畫進行用戶感知的交互,這樣可以優化用戶體驗,因此今天寫一篇載入動畫(效果如下)用於同學們進行學習,怎麼實現?首先我們需要學習“CommonDialog”“ WebView”“動畫開髮指導”三個知識儲備

我們分為“準備階段”,“自定義CommonDialog實現”,“動畫實現”,“webview的實現”,“運行效果”五個步驟進行實現。

20220119-090152(WeLinkPC).gif

 

1.準備階段

在resources \base\ media\目錄下準備一張loading圖片(圖片如下)存放位置如下

image.png

 

Loading圖片

image.png

存放位置

 

2.       自定義CommonDialog的實現

2.1新建xml命名為general_dialog.xml,在該xml文件繪畫一張圖片(代碼如下)

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="80vp"
    ohos:orientation="vertical"
    ohos:alignment="center"
    ohos:width="80vp">
    <Image
        ohos:id="$+id:loading"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:scale_mode="clip_center"
        ohos:image_src="$media:loading"/>
</DirectionalLayout>

效果圖如下

image.png

 

2.2新建GeneralDialog文件,我們參考HarmonyOS 的自定義CommonDialog場景示例

具體代碼如下

package com.harmony.alliance.mydemo.utils;
import java.util.Optional;
import com.harmony.alliance.mydemo.ResourceTable;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.service.WindowManager;
import ohos.app.Context;
 
public class GeneralDialog {
    private float dim = -1f;
    private   CommonDialog sDialog;
    private  Context mContext;
    private boolean mOutsideTouchClosable = false;
    public  GeneralDialog(Context context){
        this.mContext=context;
    }
    public void show() {
        if (sDialog != null) {
            sDialog.show();
            if (dim >= 0) {
                changeDialogDim(sDialog, dim);
            }
        }
    }
    public void remove() {
        if (sDialog != null) {
            sDialog.destroy();
        }
    }
    public void create() {
         sDialog = new CommonDialog(mContext);
        sDialog.setSize(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
        sDialog.setAlignment(LayoutAlignment.CENTER);
        sDialog.setOffset(0,0);
        sDialog.setTransparent(true);
        sDialog.setContentCustomComponent(initDialog(sDialog));
        sDialog.setAutoClosable(mOutsideTouchClosable);
    }
 
 
 
    private void changeDialogDim(CommonDialog dialog, float dim) {
        Optional<WindowManager.LayoutConfig> configOpt = dialog.getWindow().getLayoutConfig();
        configOpt.ifPresent(config -> {
            config.dim = dim;
            dialog.getWindow().setLayoutConfig(config);
        });
    }
    public interface ClickedListener{
        void onClick(GeneralDialog dialog);
    }
    private Component initDialog(CommonDialog sDialog) {
        Component dialogLayout = LayoutScatter.getInstance(mContext).parse(ResourceTable.Layout_general_dialog, null, false);
        dialogLayout.setBackground(new ShapeElement(){{
            setRgbColor(RgbColor.fromArgbInt(ResourceTool.getColor(mContext, ResourceTable.Color_bg_dialog_light, 0xffffff)));
            setCornerRadius(ResourceTool.getFloat(mContext, ResourceTable.Float_dialog_corner_radius, 0));
        }});
        Image image= (Image) dialogLayout.findComponentById(ResourceTable.Id_loading);
        return dialogLayout;
    }
}

2.2.3 在 MainAbility的onStart 的方法下調用如下代碼

GeneralDialog mGeneralDialog = new GeneralDialog(getContext());
    mGeneralDialog.create();
    mGeneralDialog.show();

效果如下

image.png

 

2.3動畫實現

2.3.1動畫的功能我們可以參考HarmonyOS動畫開髮指導AnimatorProperty的相關知識點,接下來我們initDialog開啟image的動畫功能代碼如下

Image image= (Image) dialogLayout.findComponentById(ResourceTable.Id_loading);
animatorProperty = new AnimatorProperty();
animatorProperty.setTarget(image);
animatorProperty
    .rotate(360)
    //無限迴圈
    .setLoopedCount(AnimatorValue.INFINITE)
    //反彈力效果
    .setCurveType(Animator.CurveType.BOUNCE);

if(sDialog!=null) {
    sDialog.setDestroyedListener(new CommonDialog.DestroyedListener() {
        @Override
        public void onDestroy() {
            if(animatorProperty.isRunning()) {
                animatorProperty.stop();
            }
        }
    });
}

2.3.2在GeneralDialog類寫一個開啟動畫方法(代碼如下)

public void StartanimatorProperty() {
    if(animatorProperty!=null&&animatorProperty.isRunning()) {
        animatorProperty.stop();
    }
    if(animatorProperty!=null&&!animatorProperty.isRunning()) {
        if(!animatorProperty.isRunning()) {
            animatorProperty.start();
        }
    }
}

2.3.3封一個工具類用於顯示和播放和消失loading彈框(代碼如下)

package com.harmony.alliance.mydemo.utils;
import ohos.app.Context;
public class LoadingDialogUtils {
    private static   GeneralDialog mGeneralDialog;
    public static  GeneralDialog  getInstance(Context mContext) {
        if(mGeneralDialog==null) {
            mGeneralDialog=new GeneralDialog(mContext);
        }
        return  mGeneralDialog;
    }
 
    public static void show(Context mContext) {
        LoadingDialogUtils.getInstance(mContext);
        mGeneralDialog.create();
        mGeneralDialog.show();
        mGeneralDialog.StartanimatorProperty();
    }
    public static void dismiss(Context mContext) {
        LoadingDialogUtils.getInstance(mContext);
        mGeneralDialog.remove();
    }
}

2.3.4開啟動畫代碼如下

  LoadingDialogUtils.show(MainAbility.this);

關閉動畫代碼如下

LoadingDialogUtils.dismiss(MainAbility.this);

2.4   webview的實現

webview 載入網頁我們可以參考HarmonyOS的WebView的組件

2.4.1我們學觀測Web狀態的setWebAgent(代碼如下)

webView.setWebAgent(new WebAgent() {
    @Override
    public void onLoadingPage(WebView webview, String url, PixelMap favicon) {
        super.onLoadingPage(webview, url, favicon);
        //todo  頁面開始載入時自定義處理 開啟動畫
    }
    @Override
    public void onPageLoaded(WebView webview, String url) {
        super.onPageLoaded(webview, url);
         // todo 頁面載入結束後自定義處理 關閉動畫
    }
    @Override
    public void onLoadingContent(WebView webview, String url) {
        super.onLoadingContent(webview, url);
        // 載入資源時自定義處理
    }
    @Override
    public void onError(WebView webview, ResourceRequest request, ResourceError error) {
        super.onError(webview, request, error);
        //todo 發生錯誤時自定義處理 關閉動畫
    }
});

2.4.2我們新建abilitySlice的java類,新建layout佈局代碼如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:my_webView"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ohos.agp.components.webengine.WebView>
</DirectionalLayout>

2.4.3 webview的java類代碼如下

package com.harmony.alliance.mydemo.slice;
import com.harmony.alliance.mydemo.ResourceTable;
import com.harmony.alliance.mydemo.utils.LoadingDialogUtils;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.webengine.*;
import ohos.media.image.PixelMap;
 
public class NewMyWebview  extends AbilitySlice {
    private WebView mMyWebview;
    private static final String EXAMPLE_URL = "https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-fa-calls-pa-examples-0000000000618000";
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_new_my_webview);
        mMyWebview= (WebView) findComponentById(ResourceTable.Id_my_webView);
        WebConfig webConfig = mMyWebview.getWebConfig();
        webConfig.setJavaScriptPermit(true);
        webConfig.setWebStoragePermit(true);
        webConfig.setDataAbilityPermit(true);
        webConfig.setLoadsImagesPermit(true);
        webConfig.setMediaAutoReplay(true);
        webConfig.setLocationPermit(true);
        webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);
        mMyWebview.setWebAgent(new WebAgent() {
            @Override
            public void onLoadingPage(WebView webview, String url, PixelMap favicon) {
                super.onLoadingPage(webview, url, favicon);
                //todo  頁面開始載入時自定義處理 開啟動畫
                LoadingDialogUtils.show(NewMyWebview.this);
            }
 
            @Override
            public void onPageLoaded(WebView webview, String url) {
                super.onPageLoaded(webview, url);
                // todo 頁面載入結束後自定義處理 關閉動畫
                LoadingDialogUtils.dismiss(NewMyWebview.this);
            }
 
            @Override
            public void onLoadingContent(WebView webview, String url) {
                super.onLoadingContent(webview, url);
                // 載入資源時自定義處理
            }
 
            @Override
            public void onError(WebView webview, ResourceRequest request, ResourceError error) {
                super.onError(webview, request, error);
                //todo  發生錯誤時自定義處理 關閉動畫
                LoadingDialogUtils.dismiss(NewMyWebview.this);
            }
        });
        mMyWebview.load(EXAMPLE_URL);
    }
}
 

2.5   運行效果如下

全部代碼如下

2.5.1general_dialog.xml代碼

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="80vp"
    ohos:orientation="vertical"
    ohos:alignment="center"
    ohos:width="80vp">
    <Image
        ohos:id="$+id:loading"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:scale_mode="clip_center"
        ohos:image_src="$media:loading"/>
</DirectionalLayout>

2.5.2GeneralDialog的java類

//請根據實際工程/包名引入
package com.harmony.alliance.mydemo.utils;
import java.util.Optional;
import com.harmony.alliance.mydemo.ResourceTable;
import ohos.agp.animation.Animator;
import ohos.agp.animation.AnimatorProperty;
import ohos.agp.animation.AnimatorValue;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.service.WindowManager;
import ohos.app.Context;

public class GeneralDialog {
    private float dim = -1f;
    private    AnimatorProperty animatorProperty;
    private   CommonDialog sDialog;
    private  Context mContext;
    private boolean mOutsideTouchClosable = false;
    
    public  GeneralDialog(Context context) {
        this.mContext=context;
    }
    public void show() {
        if (sDialog != null) {
            sDialog.show();
            if (dim >= 0) {
                changeDialogDim(sDialog, dim);
            }
        }
    }
    public void remove() {
        if (sDialog != null) {
            sDialog.destroy();
        }
    }
    public void create() {
        sDialog = new CommonDialog(mContext);
        sDialog.setSize(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);
        sDialog.setAlignment(LayoutAlignment.CENTER);
        sDialog.setOffset(0,0);
        sDialog.setTransparent(true);
        sDialog.setContentCustomComponent(initDialog(sDialog));
        sDialog.setAutoClosable(mOutsideTouchClosable);
    }
    public void   StartanimatorProperty() {
        if(animatorProperty!=null&&animatorProperty.isRunning()) {
            animatorProperty.stop();
        }
        if(animatorProperty!=null&&!animatorProperty.isRunning()) {
            if(!animatorProperty.isRunning()) {
                animatorProperty.start();
            }
        }
    }
    private void changeDialogDim(CommonDialog dialog, float dim) {
        Optional<WindowManager.LayoutConfig> configOpt = dialog.getWindow().getLayoutConfig();
        configOpt.ifPresent(config -> {
            config.dim = dim;
            dialog.getWindow().setLayoutConfig(config);
        });
    }
    public interface ClickedListener {
        void onClick(GeneralDialog dialog);
    }
    private Component initDialog(CommonDialog sDialog) {
        Component dialogLayout = LayoutScatter.getInstance(mContext).parse(ResourceTable.Layout_general_dialog, null, false);
        dialogLayout.setBackground(new ShapeElement() { {
            setRgbColor(RgbColor.fromArgbInt(ResourceTool.getColor(mContext, ResourceTable.Color_bg_dialog_light, 0xffffff)));
            setCornerRadius(ResourceTool.getFloat(mContext, ResourceTable.Float_dialog_corner_radius, 0));
        }});
        Image image= (Image) dialogLayout.findComponentById(ResourceTable.Id_loading);
        animatorProperty    = new AnimatorProperty();
        animatorProperty.setTarget(image);
        animatorProperty
                .rotate(360)
                //無限迴圈
                .setLoopedCount(AnimatorValue.INFINITE)
                //反彈力效果
                .setCurveType(Animator.CurveType.BOUNCE);
        if(sDialog!=null) {
            sDialog.setDestroyedListener(new CommonDialog.DestroyedListener() {
                @Override
                public void onDestroy() {
                    if(animatorProperty.isRunning()) {
                        animatorProperty.stop();
                    }
                }
            });
        }
        return dialogLayout;
    }
}

2.5.4webViewAbilitySlice的layout的xml代碼如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <ohos.agp.components.webengine.WebView
        ohos:id="$+id:my_webView"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </ohos.agp.components.webengine.WebView>
</DirectionalLayout>

2.5.5 WebViewAbiltySlice的類代碼如下

package com.harmony.alliance.mydemo.slice;

 

import com.harmony.alliance.mydemo.ResourceTable;

import com.harmony.alliance.mydemo.utils.LoadingDialogUtils;

import ohos.aafwk.ability.AbilitySlice;

import ohos.aafwk.content.Intent;

import ohos.agp.components.webengine.*;

import ohos.media.image.PixelMap;

 

public class NewMyWebview  extends AbilitySlice {

    private WebView mMyWebview;

    private static final String EXAMPLE_URL = "https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-fa-calls-pa-examples-0000000000618000";

    @Override

    protected void onStart(Intent intent) {

        super.onStart(intent);

        setUIContent(ResourceTable.Layout_new_my_webview);

        mMyWebview= (WebView) findComponentById(ResourceTable.Id_my_webView);

        WebConfig webConfig = mMyWebview.getWebConfig();

        webConfig.setJavaScriptPermit(true);

        webConfig.setWebStoragePermit(true);

        webConfig.setDataAbilityPermit(true);

        webConfig.setLoadsImagesPermit(true);

        webConfig.setMediaAutoReplay(true);

        webConfig.setLocationPermit(true);

        webConfig.setSecurityMode(WebConfig.SECURITY_SELF_ADAPTIVE);

        mMyWebview.setWebAgent(new WebAgent() {

            @Override

            public void onLoadingPage(WebView webview, String url, PixelMap favicon) {

                super.onLoadingPage(webview, url, favicon);

                //todo  頁面開始載入時自定義處理 開啟動畫

                LoadingDialogUtils.show(NewMyWebview.this);

            }

 

            @Override

            public void onPageLoaded(WebView webview, String url) {

                super.onPageLoaded(webview, url);

                // todo 頁面載入結束後自定義處理 關閉動畫

                LoadingDialogUtils.dismiss(NewMyWebview.this);

            }

 

            @Override

            public void onLoadingContent(WebView webview, String url) {

                super.onLoadingContent(webview, url);

                // 載入資源時自定義處理

            }

 

            @Override

            public void onError(WebView webview, ResourceRequest request, ResourceError error) {

                super.onError(webview, request, error);

                //todo  發生錯誤時自定義處理 關閉動畫

                LoadingDialogUtils.dismiss(NewMyWebview.this);

            }

        });

        mMyWebview.load(EXAMPLE_URL);

     }

}

效果如下

20220119-090152(WeLinkPC).gif

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 高速緩衝 概念 高速緩衝區是記憶體中的一塊記憶體,在塊設備與內核其它程式之間起著一個橋梁作用。內核程式如果需要訪問塊設備中的數據,都需要經過高速緩衝區來間接的操作。 高速緩衝區結構 高速緩衝區被劃分為1k大小的緩衝塊,與磁碟塊大小一致。高速緩衝區主要包含兩部分內容,緩衝塊頭結構(buffer_head, ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 一、clearos介紹 ClearOS是一個基於CentOS和Red Hat Enterprise Linux的簡單,開源,價格合理的Linux操作系統。 它設計用於中小型企業作為伺服器或網路網關。 二、clearos安裝 下載地址:develo ...
  • 鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 1. Tomcat 介紹 Apache Tomcat 是由 Apache Software Foundation(ASF)開發的一個開源 Java WEB 應用伺服器。 由於 Tomcat 是由 Java 語言實現的,因此需要運行在 Java 虛 ...
  • 一、 RDD創建 從本地文件系統中載入數據創建RDD sc:SparkContext(shell自動創建) 本地文件系統中載入數據創建RDD Spark採用textFile()方法來從文件系統中載入數據創建RDD 該方法把文件的URI作為參數,這個URI可以是: 本地文件系統的地址 或者是分散式文件 ...
  • 在寫sql語句的時候,數據類型是避不可少的一個環節,以下是我在學習的過程中總結的數據類型,僅供參考: 數值類型 類型 有符號(signed)範圍 無符號(unsigned)範圍 描述 tinyint (-128,127) (0,255) 小整數值 smallint (-32768,32767) (0 ...
  • 位元組跳動數據湖團隊在實時數倉構建寬表的業務場景中,探索實踐出的一種基於 Hudi Payload 的合併機制提出的全新解決方案。 位元組跳動數據湖團隊在實時數倉構建寬表的業務場景中,探索實踐出的一種基於 Hudi Payload 的合併機制提出的全新解決方案。 該方案在存儲層提供對多流數據的關聯能力, ...
  • ##數據分析 ###數據清洗:缺失值處理、1刪除記錄 2數據插補 3不處理 ###數據在https://book.tipdm.org/jc/219 中的資源包中數據和代碼chapter4\demo\data\catering_sale.xls ###常見插補方法 ####插值法-拉格朗日插值法 根據 ...
  • 本期我們給大家帶來的是“畫圖”應用開發者Rick的分享,希望能給你的HarmonyOS開發之旅帶來啟發~ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...