将加载指示器/进度条添加到 Phonegap Android 闪屏

Posted 2023-05-06

【中文标题】将加载指示器/进度条添加到 Phonegap Android 闪屏

【英文标题】：Add loading indicator/progress bar to Phonegap Android splashscreen

【发布时间】：2012-03-12 19:02:39

【问题描述】：

我有一个 PhoneGap 1.4.1 / jQueryMobile 1.0.1 / android 项目，它可以很好地显示 res/drawable/splash.png，一旦加载了 WebView，启动画面就会消失。

我想在闪屏中添加某种进度指示器百分比文本，但到目前为止没有成功。

过去，我通过使用像这样的普通 webview 已经取得了成功：

myWebView.setWebViewClient(new WebViewClient() 
    @Override
    public void onPageFinished(WebView view, String url) 
        myLoadingView.setVisibility(View.GONE);
        myWebView.setVisibility(View.VISIBLE);
    
);
myWebView.loadUrl(...);

但这只是一个带有进度指示器文本和背景图像的布局，会更新：

myWebView.setWebChromeClient(new WebChromeClient() 
    public void onProgressChanged(WebView view, int progress) 
        myLoadingView.setText(progress+"%");
    
);

有谁知道我可以如何将此功能添加到现有的 PhoneGap 实现中，或者知道如何将 PhoneGap 替换为我自己的实现？

【参考方案1】：

我想我找到了解决方案（不是完整的解决方案，而是微调解决方案）。在 DroidGap 子类中，您应该添加以下行：

super.setStringProperty("loadingDialog", "Wait, Loading...");

这是我的完整示例

public class MainActivity extends DroidGap 
    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);

        super.setIntegerProperty("splashscreen", R.drawable.splash);
        // Display a native loading dialog.  Format for value = "Title,Message".  
        // (String - default=null)
        super.setStringProperty("loadingDialog", "Wait,Loading Demo...");

       super.loadUrl("file:///android_asset/www/index.html");
      

您可以在此部分设置几个属性，请参阅此代码：https://svn.apache.org/repos/asf/incubator/callback/phonegap-android/branches/WebSockets/framework/src/com/phonegap/DroidGap.java

【参考方案2】：

我终于设法向 PhoneGap webView 添加了一个进度条，它将显示页面加载的进度（百分比）。希望对你有帮助

作为this other answer explains，appView 位于LinearLayout 内。受保护的（因此是继承的）变量 root 引用了这个LinearLayout。您可以将您的（任何）本机 Views 添加到此变量中。

我是这样做的：

在你的 res/layouts/ 中创建一个布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:maxHeight="10dip"
        android:minHeight="10dip" />

</LinearLayout>

按照您通常会遵循的所有步骤添加 WebView 进度条：

final Activity activity = this;
private ProgressBar progessBar1;

添加您创建的布局：

View footer = View.inflate(getContext(), R.layout.mainshop, null);
root.addView(footer);

如果你在调用super.loadURL(...);之后添加它会显示在底部。如果之前添加，布局会显示在appView之前。

之后，您只需添加以下内容：

progessBar1 = (ProgressBar) findViewById(R.id.progressBar1);

this.appView.setWebChromeClient(new WebChromeClient() 

        public void onProgressChanged(WebView view, int progress)  
            activity.setProgress(progress * 1000);
            if(progress < 100 && progessBar1.getVisibility() == ProgressBar.GONE) 
                progessBar1.setVisibility(ProgressBar.VISIBLE);
            
            progessBar1.setProgress(progress);
            if(progress == 100) 
                progessBar1.setVisibility(ProgressBar.GONE);
            

            Log.d("Progress", progress+"");

         
    );

干杯！

【参考方案3】：

我知道您可以通过在 PhoneGap 配置文件（ios 上的 PhoneGap.plist）中将 ShowSplashScreenSpinner 选项设置为 YES 来轻松地将加载指示器添加到初始屏幕

当应用程序加载时，它会在启动屏幕的中间显示一个微调器

编辑：这只适用于 iOS。

【讨论】：

这很有趣。我已将： 添加到我的 /res/xml/phonegap.xml 文件中，但它没有添加微调器。我无法找到 .plist 的 Android 等效项，但会继续寻找。谢谢

@darryn.ten 以下行是 PhoneGap 中 ShowSplashScreenSpinner 的 android 等效项：<preference name="show-splash-screen-spinner" value="true" /> 将此行添加到您的 config.xml 文件中。

【参考方案4】：

停止使用扩展 DroidGap 的 Activity，创建常规 Android Activity 并将 org.apache.cordova.CordovaWebView 放入布局文件中。它会给你更多的灵活性。

http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_android.md.html#Embedding%20Cordova%20WebView%20on%20Android

【参考方案5】：

如果你使用 jquery-mobile，你可以这样做：

$.mobile.showPageLoadingMsg();
$('.ui-loader h1').html('<h1>Saving ... <span id="ui-loading-extra"></span>');

然后在 onProgressChanged 中做：

$('#ui-loading-extra').text(progress  + '%');

【讨论】：

这一切都发生在 webview 完成加载之前，在 jQueryMobile 可用之前。