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

Question

我有一个 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 实现？

Answer 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

Answer 2

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

正如另一个答案解释的，appView位于LinearLayout内。受保护的（因此继承的）变量 root 引用此 LinearLayout 。您可以将您的（任何）本机View添加到此变量中。

这是我的做法：

1. 在 res/layouts/ 中创建布局

   
   
   
       <进度条
           android:id="@+id/progressBar1"
           样式 =“@android:style/Widget.ProgressBar.Horizo​​ntal”
           安卓：layout_width =“fill_parent”
           安卓：layout_height =“wrap_content”
           机器人：layout_alignParentBottom =“真”
           android:layout_alignParentLeft="true"
           机器人：layout_alignParentRight =“真”
           android:maxHeight="10dip"
           android:minHeight="10dip" //>
   
   
   

2. 按照添加 WebView 进度条通常遵循的所有步骤进行操作：

   最终活动 Activity = this;
   私人进度条progressBar1；
   

3. 添加您创建的布局：

   查看页脚 = View.inflate(getContext(), R.layout.mainshop, null);
   root.addView(页脚);
   

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

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

   progessBar1 = (ProgressBar) findViewById(R.id.progressBar1);
   
   this.appView.setWebChromeClient(new WebChromeClient() {
   
           公共无效onProgressChanged（WebView视图，int进度）{ 
               Activity.setProgress(进度 * 1000);
               if(progress < 100 && progessBar1.getVisibility() == ProgressBar.GONE) {
                   progessBar1.setVisibility(ProgressBar.VISIBLE);
               }
               progessBar1.setProgress(进度);
               if(进度 == 100) {
                   progessBar1.setVisibility(ProgressBar.GONE);
               }
   
               Log.d("进度", 进度+"");
   
            }
       });
   

干杯！

Answer 3

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

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

编辑：这只适用于 iOS。

Answer 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

Answer 5

如果您使用 jquery-mobile 您可以执行以下操作：

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

然后在 onProgressChanged 中执行以下操作：

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